this全面解析--JavaScript中的

Posted 2020-10-09 sandy.simple

上一章我们排除了一些对this的错误认识和知道了this是在调用函数时被绑定的，完全取决于函数的调用位置。先介绍两个概念：调用位置和调用栈。

调用栈：就是为了到达当前执行位置所调用的所有函数。

调用位置：在当前正在执行的函数的前一个调用中。即函数在代码中的调用位置而不是声明的位置。

function baz() {
        //当前调用栈是baz
        //因此，当前调用位置是全局作用域
        bar();    //bar的调用位置
    }
    function bar() {
        //当前调用栈是baz->bar
        //因此，当前的调用位置是baz中
        foo();   //foo的调用位置
    }
    function foo() {
        //当前的调用栈是baz->bar->foo
        //因此，当前的调用位置是bar中
    }
    baz();      //baz的调用位置

绑定规则：

1.默认绑定：

对于独立调用的 函数，会进行默认绑定。看下面的代码：

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

非严格模式下，独立调用的 函数，会进行默认绑定,this指向全局对象。上面的代码foo()的调用位置是全局，在全局对象中定义了一个属性a，因此this.a 为2。

2.隐式绑定

调用位置是否有上下文对象，或者说是否被某个对象包含或者拥有

    function foo2() {
        console.log(this.a);
    }
    var obj = {
        a:3,
        foo3:foo2
    };
    obj.foo3();   //3

调用位置使用obj上下文引用函数，即函数被调用时被obj对象拥有或包含。

当函数引用上下文对象时，隐式绑定会把函数调用中的this绑定到这个上下文对象。

对象属性引用链中只有最后一层在调用位置中起作用。看下面代码：

    function foo() {
        console.log(this.a);
    }
    var obj2 = {
        a:23,
        foo:foo
    }
    var obj1 = {
        a:98,
        obj2:obj2
    }
    obj1.obj2.foo();   //23

3.显示绑定

因为隐式绑定时，我们必须在对象内部包含一个指向函数的属性，并通过属性指引这个函数，从而把this间接（隐式）的绑定到这个对象上。如果想在对象上强制调用函数，可以通过call(...)和apply(...)方法。这个两个方法的第一个参数是一个对象，是给this准备的，函数调用将this绑定在该对象上。这两个方法的原理相同只是里面的参数不同。

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

4.new绑定

js也有一个new操作符，使用方法看起来和那些面向类语言一样，其实js中的new操作符的机制实际上和面向类语言完全不同。js中，构造函数只是使用new操作符调用的函数。

使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作

1.创建（或者说构造）一个新的对象。

2.这个新对象会被执行[[prototype]]链接。

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

4.如果函数没有返回其他对象，那么new表达式的函数调用会自动返回到这个新对象。

    function Foo(a) {
        this.a = a;
    }
    var bar = new Foo(2);
    console.log(bar.a);  //2

判 断this

根据优先级来判断函数在某个调用位置应运的是那条规则

1.函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。

var bar = new Foo（）；

2.函数是否通过apply,call显示绑定，如果是的话，this绑定的就是指定的对象。

var bar= foo.call(obj);

3.函数是否在某个上下文中调用（隐式调用）？如果是的话，this绑定就是那个上下文对象。

var bar = obj.foo();

4.如果都不是的话，使用默认绑定。严格模式下，就绑定到undefined，否则就是全局对象

var bar =  foo（）