你不知道的JavaScript----this解析

目录

关于this

为什么要用this

 this的误解

指向自身

误解二：this指向函数的作用域

this全面解析

调用位置

绑定规则

① 默认绑定

② 隐式绑定

③ 显示绑定

④new绑定

优先级

---

关于this

比如，我们在同一个方法内使用了一个外部变量a和this，此时，不管该方法被谁调用，这个外部变量a指向的永远都是该方法定义时所在代码块外部的那个变量a(这就是词法作用域)不会改变，但是this不一样，它会因为调用该方法的对象的改变而改变！

其实简单来说，正常情况下，this绑定的是当前方法的调用对象，注意不是定义时的词法作用域，它与词法作用域最大的区别就是：随着调用该方法的对象的不同，this指向的对象也会改变！

为什么要用this

如果说词法作用域是方法与定义时的代码块内外交流的通道，那么this就是方法与被调用对象间的唯一关联，通过词法作用域，我们可以读取使用外部变量，通过this我们可以使用调用对象的属性，方法等！

    function identify() {
            return this.name.toUpperCase();
        }

    function speak() {
            var greeting = "Hello, I'm " + identify.call(this);
            console.log(greeting);
        }

    var me = {
         name: "Kyle"
    };
    var you = {
        name: "Reader"
    };

    identify.call(me); // KYLE
    identify.call(you); // READER

    speak.call(me); // Hello, 我是KYLE
    speak.call(you); // Hello, 我是READER

所以this这个磨人的小妖精，魔力就在于能更优雅的给开发者上下文环境

 this的误解

太拘泥于“this”的字面意思就会产生一些误解。有两种常见的对于this的解释，但是它们都是错误的。

指向自身

    function foo(num) {
        console.log(num);
        this.count++;
    }
    foo.count = 0;

    var i;
    for (i = 0; i < 5; i++) {
        foo(i);
    }
    console.log('count=' + foo.count);  // ->>> 0
    console.log('globalCount=' + window.count);     // ->>> NaN

行之后我们发现在foo函数中分别打印了0,1,2,3,4,按我们“预期”的结果，应该要打印出count = 5，结果遗憾的是0。 事实上当执行foo.count = 0时，函数对象确实被添加了一个count属性，但是函数中的this.count跟这个count并不是同一个。其实是创建了一个全局变量count，值为NaN。

当前执行的方法是window对象下的，执行过程this指向window，而count的自加变成了 undefined + 1，而undefined 在做隐式类型转换会变成NaN，所以值为NaN

误解二：this指向函数的作用域

    function foo() {
        var a = 2;
        this.bar()
    }
    function bar() {
        console.log(this.a)
    }
    foo(); // ->>> undefined

此处视图使用this.a去访问foo的a，但是无法将作用域连接起来。此