资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/this全面解析（一）

this全面解析（一）

darry / 997人阅读

摘要：调用栈就是为了到达当前执行位置所调用的所有函数。由于无法控制回调函数的执行方式，因此就没有办法控制调用位置得到期望的绑定，下一节我们会介绍如何通过固定来修复这个问题。

在《你不知道的this》中我们排除了对于this的错误理解，并且明白了每个函数的this是在调用时绑定的，完全取决于函数的调用位置。在本节中我们主要介绍一下几个主要内容：

什么是调用位置

绑定规则

this词法

调用位置

调用位置：就是函数在代码中被调用的位置(而不是声明位置)。要想回答this到底引用的是什么？只有仔细分析调用位置才能回答这个问题。
而分析调用位置最重要的就是分析调用栈。下面是调用栈的定义。
调用栈：就是为了到达当前执行位置所调用的所有函数。

    function baz(){
         //当前调用栈是：baz
         //因此，当前调用位置是全局作用域
         console.log("baz");
         bar(); //bar的调用位置
    }
    function bar(){
         //当前调用栈是：baz -> bar
         //因此，当前调用位置是在baz中
         console.log("bar");
         foo(); //foo的调用位置
    }
    function foo(){
         //当前调用栈是：baz -> bar -> foo
         //因此，当前调用位置是在baz中
         console.log("foo");
    }
    baz(); // baz的调用位置
绑定规则

我们的思路是，通过找到函数的调用位置，然后判断需要应用规则中的哪一条。便可决定this的绑定对象。关于this的绑定规则主要是以下四种：

默认绑定

隐式绑定

显式绑定

new绑定

1.默认绑定

默认绑定的典型类型是：独立函数调用。 思考如下代码：

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

调用foo()时，函数应用了默认绑定，this只想全局对象window(这是在非严格模式下，若是在严格模式下会报错)，所以this.a被解析成了全局变量a。所以，在不使用任何修饰的函数引用进行调用，只能使用默认绑定，无法应用其他规则。

2.隐式绑定

隐式绑定的常见形式是在调用位置具有上下文对象，或者说被某个对象拥有或者包含。看如下代码：

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

这里函数foo()是预先定义好的，然后再将其添加为obj对象的引用属性。调用位置使用obj上下文来引用函数，因此可以说函数被调用时obj对象“拥有”或者“包含”它。
无论你如何称呼这个模式，当foo()被调用时，它的前面确实是加上了obj的引用。当函数引用上下文对象时，隐式绑定规则就会把函数调用中的this绑定到这个上下文对象。所以，this.a和obj.a是一样的。

另一个需要注意的点是：对象属性引用链中只有最后一层在调用位置起作用

    function foo(){
         console.log(this.a);
    }
    var obj2 = {
         a: 100,
         foo: foo
    };
    var obj1 = {
         a: 1,
         obj2: obj2
    }
    obj1.obj2.foo(); // 100
隐式绑定一个最常见的问题

一个最常见的问题就是：隐式绑定的函数会丢失绑定对象。也就是是说它会应用默认绑定，而把this绑定到全局对象或者undifined上，取决于是否是严格模式。

    function foo(){
        console.log(this.a);
    }
    var obj ={
        a: 2,
        foo: foo
    }
    var bar = obj.foo; //函数别名
    var a = "global";
    bar(); // "global"

虽然bar是obj.foo的一个引用，但实际上，他引用的是foo函数本身， 因此， 此时的bar()其实是一个不带任何修饰的函数调用，因此，它应用了默认绑定。
一种更微妙，更常见的并且更出乎意料的情况发生在传入回调函数时：

    function foo(){
        console.log(this.a);
    }
    function callBack(fn){
        fn();
    }

    var obj = {
        a: 2,
        foo: foo
    }
    var a = "global";
    callBack(obj.foo); // "global"

参数传递其实就是一种隐式赋值，这句话我们可以用下面的两段代码来详细的讲解：

    var a = 1;
    function fn(){
        alert(a); //1
        a = 2;
    }
    fn();
    alert(a); // 2

_ _ _

    var a = 1;
    function fn(a){
          alert(a); //undifined
          a = 2;
    }
    fn();
    alert(a); // 1

思考一下结果是否与你想象的一致呢？
在第一段代码中：
首先，在全局作用域中，先通过变量提升，找到了标识符a和函数fn，a此时有个默认值为undifined。然后，在执行阶段我们先将变量a赋值为1，紧跟着函数fn()执行。此时，在函数域中，依旧应用变量提升的规则，但是什么都没找到，接着执行函数内的代码:alert(a),因为在函数中并没有找到变量a。所以，通过作用域链向上层的父级作用域中查找，我们找到了a,并且此时a的值已经被赋值为1，所以，alert(a)这句的结果就是1。下一句代码：a = 2,注意a的前面没有关键字var, 即这里的a是全局的，也就是说在执行这句代码时，他修改了全局作用域中a的值，即a现在为2。最后在执行alert(a)时，自然而然a的值便是2了。

在第二段代码中：
同样，通过变量提升，我们找到了标识符a和函数fn，a此时的默认值也为undifined。开始执行，a首先被赋值为1。然后，函数执行，这里与第一段代码的不同之处在于，在函数fn中传入了参数a,那么这么做的结果就是：在函数域先运用变量提升的规则，不会像第一段代码中那样什么都找不到，而是相当于定义了一个值为undifined（调用的时候没有传入参数）的变量a,所以当执行函数域中的alert(a)时，结果就为undifined，而不会通过作用域链向上去查找，因为本函数中已经找到了，只不过是以参数的形式传入的。同理代码(a = 2)会修改a的值，即在函数域中，a的值现在为2（读者可以去尝试在函数中最后面alert一下a的值）。而在函数外执行alert(a),我们得到的结果便是1，因为该句代码是在全局中执行的，即会在全局中去查找变量a,而不会去访问函数域中的a。这也是因为，在JavaSceipt中子作用域可以访问父作用域而反过来却不行的规则。

回到我们this绑定丢失的话题上，说了这么多，我其实就是想说：参数传递其实就是一种隐式赋值，参数传递其实就是一种隐式赋值，参数传递其实就是一种隐式赋值，重要的事说三遍！
我们按照上面的方式来解析代码：在执行callBack(obj.foo)时，在函数作用域通过变量提升找到了参数fn,它的默认值为undifined，然后我们将参数传入，其实相当于(var fn = obj.foo),这就与前面的将其直接赋值给一个变量对等上了，然后再执行fn()，应用默认绑定，此时的this已经不指向obj了，而是指向window(严格模式)。

如果把函数传入内置的函数而不是传入你自己声明的函数，会发生什么呢？结果是一样的，没有区别：

    function foo(){
        console.log(this.a)
    }
    var obj = {
        a: 2,
        foo: foo
    }
    var a = "global";
    setTimeout(obj.foo, 1000); //"global"

JavaSceipt环境中内置的setTimeout()函数实现和下面的伪代码类似：

    function setTimeout(fn, delay){
        //等待delay秒
        fn(); //调用位置
    }

就向你们看到的那样，回调函数丢失this绑定的情况是非常常见的，并且还有一种情况this的行为会出乎我们意料：调用回调函数的函数可能会修改this。由于无法控制回调函数的执行方式，因此就没有办法控制调用位置得到期望的绑定，下一节我们会介绍如何通过固定this来“修复“这个问题。

云服务器 GPU云服务器 如何全面分析一个人 免费三级一域名解析 解析一段c语言 全面分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78968.html

相关文章

  • 全面解析JS中的this

    摘要：当我们不想再对象内部间接包含引用函数，而像在某个对象上强制调用函数。我们可以用中内置的和的方法来实现，这两个方法的第一个参数是一个对象，是给准备的，接着再调用函数时将其绑定到。 this是什么 在javascript中，每个执行上下文可以抽象成一组对象showImg(https://segmentfault.com/img/bVuKR7); 而this是与执行上下文相关的特殊对象，任何...

    calx 评论0 收藏0

  • this全面解析(二)

    摘要：在传统的面向类的语言中，构造函数是类中的一些特殊方法，使用初始化类是会调用类中的构造函数。 在上一节中我们详细介绍了this的两种绑定方式，默认绑定和隐式绑定，在这一节我们继续介绍this的另外两种绑定方式显示绑定和new绑定。那么，我们要解决的问题当然就是上一节中我们提到的：this丢失！ 显式绑定 在隐式绑定中，我们必须在一个对象的内部包含一个指向函数的属性，并通过这个属性间接引用...

    iflove 评论0 收藏0

  • 关于this的全面解析（下）

    摘要：关于的全棉解析上的文章地址判断函数是否在中调用绑定如果是的话绑定的是新创建的对象。显而易见，这种方式可能会导致许多难以分析和追踪的。默认在严格模式下绑定到，否则绑定到全局对象。 关于this的全棉解析（上）的文章地址 判断this 函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。 bar = new foo() 函数是否通过call、apply（显式绑定...

    philadelphia 评论0 收藏0

  • 关于this的全面解析（上）

    摘要：关于的全面解析下页面链接的调用位置调用位置就是函数在代码中被调用的位置而不是声明的位置，寻找调用位置就是寻找函数被调用的位置，最重要的是分析调用栈就是为了到达当前执行位置所调用的所有函数。因此，调用函数时被绑定到这个对象上，所以和是一样的。 关于this的全面解析（下）页面链接 this的调用位置 调用位置就是函数在代码中被调用的位置（而不是声明的位置），寻找调用位置就是寻找函数被调用...

    caige 评论0 收藏0

  • 全面解析this

    摘要：在严格模式下，对象的函数中的指向调用函数的对象实例显式绑定，，通过可以把的绑定到上。间接引用最容易在赋值时发生返回目标函数的引用词法之前介绍的种绑定规则可以包含所有正常的函数，但是中介绍了一种无法使用这些规则的特殊函数类型箭头函数。 this到底指向什么？ this关键词是javaScript中最复杂的机制之一，一般有两个误区：1.this指向函数自身；2.this指向函数的作用域； ...

    Y3G 评论0 收藏0

发表评论

登陆后可评论

0条评论

darry

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<