JavaScript this的理解

1
一直对js的this不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*
 
 来自: JavaScript 语言精髓
 
 方法:当一个函数被定义为对象的一个属性时,我们称它为一个方法.
 
 this : 在函数访问this时,this被绑定到了 全局对象.
 
 */
 
//全局函数
var log = function(msg){
    document.writeln("<br>" + msg + "<br>");
};
 
log("**************thistest.js***************");
 
//定义一个全局变量
var value = 100;
 
//函数
var add = function(a, b){
    var value = 11;
    //访问内部变量
    log("add:value = " + value); // 输出 add:value = 11
    //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
    log("add:this.value = " + this.value); // 输出 100
    return a + b;
}
 
// add是一个函数,在add里访问 this ,this绑定到的是全局对象
 
add(1, 2);
//输出:
//add:value = 11
//add:this.value = 100

下面定义一个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//对象
var myObj = {
 
    //对象的属性
    value:0,
 
    //方法
    increment:function(inc){
 
        //此时访问this时,this绑定的时myObj对象
        log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值
 
        //调用一次 value的值增加1
        this.value += typeof inc ==='number'?inc : 1;
 
    }
 
};

有时候我们在方法内部会定义函数,那么函数怎么调用对象属性呢,如果在函数内容直接用this是访问不到对象的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//对象
var myObj = {
 
    //对象的属性
    value:0,
 
    //方法
    increment:function(inc){
 
        //此时访问this时,this绑定的时myObj对象
        log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值
 
        //调用一次 value的值增加1
        this.value += typeof inc ==='number'?inc : 1;
 
        //定义内部函数,注意还是函数,所以函数内部访问this还是只能访问到 全局对象
        var inFun = function(){
            //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
            log("myObj.increment.inFun:this.value = " + this.value);
        };
        inFun();
    }
 
};

为了能在inFun函数内访问到myObj对象,我们先把myObj对象保存在一个变量里,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//对象
var myObj = {
 
    //对象的属性
    value:0,
 
    //方法
    increment:function(inc){
 
        //把当前对象myObj引用保存在self变量,随后的函数就可以访问self 来代替访问myObj对象
        var self = this;
 
        //此时访问this时,this绑定的时myObj对象
        log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值
 
        //调用一次 value的值增加1
        this.value += typeof inc ==='number'?inc : 1;
 
        //定义内部函数,注意还是函数,所以函数内部访问this还是只能访问到 全局对象
        var inFun = function(){
            //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
            log("myObj.increment.inFun:this.value = " + this.value);
            //
            log("myObj.increment.inFun:myObj.value = " + self.value);
        };
        inFun();
    }
 
};

给 myObj增一个double方法

1
2
3
4
5
6
7
8
9
myObj.double = function(){
    var self = this;
    var helper = function(){
        //此处不能用 this.value 访问到myObj.value的值
        //add函数前的this可以省略,也可以用 this.add(a,b);
        self.value = add(self.value, self.value);
    };
    helper();
};

调用double方法,即可使用myObj.value的值翻倍

posted @   A.Kun  阅读(206)  评论(0编辑  收藏  举报
编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!
点击右上角即可分享
微信分享提示