第四篇--浅析JavaScript的this绑定

JavaScript的this指向有四种绑定规则，即：

1.默认绑定

2.隐式绑定

3.显示绑定

4.new调用绑定

默认绑定：即全局函数的this默认绑定到window

    var a = 3;//var会连接到window对象
    let foo = function () {
      console.log(this.a);
    }
    foo();//3

隐式绑定：即函数在上下文对象内则绑定到上下文对象上。下转隐式丢失对比理解

    var a = 3;
    let obj = {
      a: 2,
      foo() {
        console.log(this.a);
      }
    };
    obj.foo();//2
    // 或
    function foo() {
      console.log(this.a);
    };
    let obj = {
      a: 2,
      foo: foo
    };
    obj.foo();//2

提一嘴隐式丢失：官方解释bar是对foo不加修饰的调用，因此丢失了obj的绑定。

我的理解就是，obj.foo在执行时，是通过obj对象查询到foo并进行了调用；而bar是将foo的指针取了出来，bar得到了foo的指针，因此bar()等同于foo();

    var a = 3;
    function foo() {
      console.log(this.a);
    };
    let obj = {
      a: 2,
      foo: foo
    };
    obj.foo();//2
    let bar = obj.foo;
    bar();//3,丢失了obj

显示绑定：即通过call、apply方法显示绑定this。

    var a = 3;
    function foo() {
      console.log(this.a);
    }
    let obj = {
      a: 2
    }
    foo.call(obj);//2
    foo.apply(obj);//2

显示绑定没有解决隐式丢失问题，即foo的绑定还是丢失了。我们需要的是具有foo功能的函数，但是这个函数已经硬硬的绑定到了我们所给的对象上了。

显示绑定之硬绑定：硬硬的的绑定到我们所给的对象上，实际上就是多包裹了一层函数

    function foo() {
      console.log(this.a);
    }
    var obj = {
      a: 2
    }
    var bar = function () {
      foo.call(obj);
    }
    bar();//2
    bar.call(window);//2

bind的实现原理有部分类似于此

new调用绑定:构造调用，构造调用的函数会出现4种变化

①创建（构造）一个全新的对象

②这个对象会被直行[[Prototype]]链接

③这个新对象会被绑定到函数调用的this

④如果函数没有返回其他对象，则new表达式中的函数调用会自动返回这个新对象

明确一点，new不是实例化类，而是调用一个新函数，只是和普通调用不同，这里是构造调用，详解见官网

    function foo() {
      this.a = a;
    }
    //即此时new调用会创建一个新对象，并返回，即此时bar就是new调用所建的新对象了
    var bar = new foo(2);
    console.log(bar.a);//2

四中绑定的优先级：new > 显示 > 隐式 > 默认绑定