2015-08-23

重温javascript的this指向

前几天，听同事讨论起javascript的this指向问题，趁此机会复习一下这个知识点。

翻了下犀牛书，在8.2.2节(第6版p171)提到了this的指向问题：

需要注意的是，this是一个关键字，不是变量，也不是属性名。JavaScript的语法不允许给this赋值。

和变量不同，关键字this没有作用域的限制，嵌套的函数不会从调用它的函数中继承this。如果嵌套函数作为方法调用，其this的值指向调用它的对象。如果嵌套函数作为函数调用，其this值不是全局对象（非严格模式下）就是undefined（严格模式下）。很多人误以为调用嵌套函数时this会指向调用外层函数的上下文。如果你想访问这个外部函数的this值，需要将this的值保存在一个变量里，这个变量和内部函数都同在一个作用域内。

(以上是LD亲手敲的奥，赞一个- -)
对着上面这段话提到的场景解释一下：
嵌套的函数不会从调用它的函数中继承this
1
2
3
4
5
6
7
8
var Outer = function () {
    this.foo = 'outer value';
    function fnInner(){
        console.log(this.foo)//如果继承了外层，那么会打印outer value
    }
    fnInner();
};
new Outer();

答案是undefined，也就是说不会继承外层this，这个应该是最好理解的。那么如何访问外层this下的属性呢？很简单，且看：

var Outer = function () {
    this.foo = 'outer value';
    var that = this;//将this赋值给一个局部变量
    function fnInner(){
        console.log(that.foo);//访问that即是外层函数的this
    }
    fnInner();
};
new Outer();

说起that，关于这个局部变量的命名有三大党派：

that派
self派
me派
你更喜欢哪一派呢？

再看下一个：

如果嵌套函数作为方法调用，其this的值指向调用它的对象。

var Outer = function () {
    this.foo = 'outer value';
    this.fnInner = function (){
        console.log('nested func: ' + this.foo);//this即为刚刚创建的Outer实例对象
    };
    this.fnInner();//方法调用
};
new Outer();

理解这个应该也不难。最后一个场景：

如果嵌套函数作为函数调用，其this值不是全局对象（非严格模式下）就是undefined（严格模式下）。

var Outer = function () {//非严格模式
    this.foo = 'outer value';
    function fnInner(){
        console.log(this);//此this为全局对象，在浏览器中就是window，在node中是一个global全局对象
    }
    fnInner();//函数调用
};
new Outer();

浏览器：

node：

再看：

var Outer = function () {//严格模式
    'use strict';
    this.foo = 'outer value';
    function fnInner(){
        console.log(this);
    }
    fnInner();
};
new Outer();