1.1 为什么使用this

随着你的使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用this则不会这样。当我们介绍对象和原型时，你就会明白函数可以自动引用合适的上下文对象有多重要。

1.2 关于误解

首先需要消除一些关于this的错误认识。

1.2.1　指向自身

先来看个例子：

        function foo(num) {
            console.log("foo: " + num);

            // 记录foo被调用的次数，这里this指向window
            this.count++;
        }

        foo.count = 0;

        var i;

        for (i = 0; i < 10; i++) {
            if (i > 5) {
                 foo(i);
            }
        }
        // foo: 6
        // foo: 7
        // foo: 8
        // foo: 9 

        // foo被调用了多少次？
        console.log(foo.count); // 0 -- WTF?

执行foo.count = 0时，的确向函数对象foo添加了一个属性count。但是函数内部代码this.count中的this并不是指向那个函数对象（指向全局变量 window），所以虽然属性名相同，根对象却并不相同，困惑随之产生。

如果要从函数对象内部引用它自身，那只使用this是不够的。一般来说你需要通过一个指向函数对象的词法标识符（变量）来引用它。

解决方法一：
一种解决方法是用词法作用域：

function foo(num) {
    console.log( "foo: " + num ); 

    // 记录foo被调用的次数
    data.count++;
} 

var data = {
    count: 0
}; 

解决方法二：
另一种解决方法是使用foo标识符替代this来引用函数对象：

function foo(num) {
    console.log( "foo: " + num ); 

    // 记录foo被调用的次数
    foo.count++;
}
foo.count=0; 

然而，这种方法同样回避了this的问题，并且完全依赖于变量foo的词法作用域。

重点：解决方法三：
另一种方法是强制this指向foo函数对象：

function foo(num) {
    console.log( "foo: " + num ); 

    // 记录foo被调用的次数
    // 注意，在当前的调用方式下（参见下方代码），this确实指向foo
    this.count++;
} 

foo.count = 0; 

var i; 

for (i=0; i<10; i++) {
    if (i > 5) {
        // 使用call(..)可以确保this指向函数对象foo本身
        foo.call( foo, i );
    }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9 

// foo被调用了多少次？
console.log( foo.count ); // 4

原文地址：https://www.cnblogs.com/tangge/p/11380139.html