JavaScript通常函数中 "this" 的判断

JavaScript中this值很让人头疼, 今天总结下几个方法快速判断this的指定.

---

先说结论(传统语法):

1. 函数在new(new绑定)中调用: this绑定的是新建立的对象:

   var bar = new foo(); //this 指向bar.

2. 函数经过call / apply(显式绑定)　或者硬绑定调用, this指向括号内的对象:

   var bar = foo.call(obj2);  // this 指向 obj2

3. 函数在某个上下文对象中调用(隐式绑定), this绑定该上下文对象:

   var bar = obj1.foo();     //this 绑定 obj1

4. 若是上述三种都不是, 使用默认绑定. 在严格模式下 绑定到undefined, 不然绑定到全局对象:

   var bar = foo(); //非严格模式下,this指向全局对象;

---

---

重点: ES6中 this词法

• ES6中引入了箭头函数, 解决了this的复杂性.

• 箭头函数不是使用function关键字定义的, 而是使用"=>"操做符定义的.

• 箭头函数不使用上文的四种标准规则, 而是根据外层(函数或全局)的做用域来决定this.

function foo(){
    //返回一个箭头函数
    return (a) => {
        //this继承自 foo()
        console.log(this.a);
    };
}

var obj1 = {
    a:2
};

var obj2 = {
    a:3
};

var bar = foo.call( obj1 );
bar.call( obj2 );    //2, 不是3

foo()内部建立的箭头函数会捕获调用foo()时的this.

因为foo()的this被绑定到obj1, bar(引用箭头函数) 的this也会绑定到 obj1;

箭头函数的绑定没法被修改(new也不行).

箭头函数最经常使用于回调函数中, 例如事件处理器或定时器:

function foo(){
        setTimeout() => {
            //这里的this 在词法上继承自foo()
            console.log( this.a );
        }, 100 );
    };
    
    foo.call( obj ); //2

---

function foo(){   //等价于上述代码
        var self = this;    //ES6以前的模式 , self绑定外层函数.
        setTimeout( function(){
            console.log( self.a ); //此时self的指向已经固定.
        }, 100 );
    }
    var obj = {
        a = 2;
    };
    foo.call(obj); //2

具体来讲,箭头函数会继承外层函数调用的this绑定(不管this绑定到什么).

---

最近才开始学ES6和MVVM框架，的确晚了一步．以前一直认为打好基础最重要，死磕ES5, 得不偿失. 面对旧技术的漏洞就像泥潭, 最好的方法是绕开, 而不是自不量力想要克服它.

(The End)