JavaScript this的理解

一直对js的this不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录
/*

 来自: 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

下面定义一个对象

//对象
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 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对象保存在一个变量里,

//对象
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方法

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的值翻倍

原文地址:https://www.cnblogs.com/imzhstar/p/4175177.html