美文网首页
转载:[译] 让我们一起解决“this”难题—第一部分

转载:[译] 让我们一起解决“this”难题—第一部分

作者: 七色烟火 | 来源:发表于2018-09-11 11:37 被阅读0次

    难道我们就不能彻底搞清楚“this”吗?在某种程度上,几乎所有的 JavaScript 开发人员都曾经思考过“this”这个事情。对我来说,每当“this”出来捣乱的时候,我就会想方设法地去解决掉它,但过后就把它忘了,我想你应该也曾遇到过类似的场景。但是今天,让我们弄明白它,让我们一次性地彻底解决“this”的问题,一劳永逸。

    前几天,我在图书馆遇到了一个意想不到的事情。

    这本书的整个第二章都是关于“this”的,我很有自信地通读了一遍,但是发现其中有些地方讲到的“this”,我居然搞不懂它们是什么,需要去猜测。真的是时候反省一下我过度自信的愚蠢行为了。我再次把这一章重读了好几遍,发觉这里面的内容是每个 Javascript 开发人员都应该了解的。

    因此,我尝试着用一种更彻底的方式和更多的示例代码来展示 凯尔·辛普森 在他的这本书 你不知道的 Javascript 中描述的那些规范。

    在这里我不会通篇只讲理论,我会直接以曾经困扰过我的困难问题为例开始讲起,我希望它们也是你感到困难的问题。但不管这些问题是否会困挠你,我都会给出解释说明,我会一个接一个地向你介绍所有的规则,当然还会有一些追加内容。

    在开始之前,我假设你已经了解了一些 JavaScript 的背景知识,当我讲到 global、window、this、prototype 等等的时候,你知道它们是什么意思。这篇文章中,我会同时使用 global 和 window,在这里它们就是一回事,是可以互换的。

    在下面给出的所有代码示例中,你的任务就是猜一下控制台输出的结果是什么。如果你猜对了,就给你自己加一分。准备好了吗?让我们开始吧。

    Example #1

    function foo() { 

    console.log(this); 

    bar(); 

    }

    function bar() { 

    console.log(this); 

    baz(); 

    }

    function baz() { 

    console.log(this); 

    }

    foo();

    复制代码你被难住了吗?为了测试,你当然可以把这段代码复制下来,然后在浏览器或者 Node 的运行环境中去运行看看结果。再来一次,你被难住了吗?好吧,我就不再问了。但说真的,如果你没被难住,那就给你自己加一分。

    如果你运行上面的代码,就会在控制台中看到 global 对象被打印出三次。为了解释这一点,让我来介绍 第一个规则,默认绑定。规则规定,当一个函数执行独立调用时,例如只是 funcName();,这时函数的“this”被指向 global 对象。

    需要理解的是,在调用函数之前,“this”并没有绑定到这个函数,因此,要找到“this”,你应该密切注意该函数是如何调用,而不是在哪里调用。所有三个函数 foo();bar(); 和 baz();_ 都是独立的调用,因此这三个函数的“this”都指向全局对象。

    Example #2

    ‘use strict’;

    function foo() {

    console.log(this);

    bar();

    }

    function bar() {

    console.log(this);

    baz();

    }

    function baz() {

    console.log(this);

    }

    foo();

    复制代码注意下最开始的“use strict”。在这种情况下,你觉得控制台会打印什么?当然,如果你了解 strict mode,你就会知道在严格模式下 global 对象不会被默认绑定。所以,你得到的打印是三次 undefined 的输出,而不再是 global。

    回顾一下,在一个简单调用函数中,比如独立调用中,“this”在非严格模式下指向 global 对象,但在严格模式下不允许 global 对象默认绑定,因此这些函数中的“this”是 undefined。

    为了使我们对默认绑定概念理解得更加具体,这里有一些示例。

    Example #3

    function foo() {

    function bar() {

      console.log(this);

    }

    bar();

    }

    foo();

    复制代码foo 先被调用,然后又调用 bar,bar 将“this”打印到控制台中。这里的技巧是看看函数是如何被调用的。foo 和 bar 都被单独调用,因此,他们内部的“this”都是指向 global 对象。但是由于 bar 是唯一执行打印的函数,所以我们看到 global 对象在控制台中输出了一次。

    我希望你没有回答 foo 或 bar。有没有?

    我们已经了解了默认绑定。让我们再做一个简单的测试。在下面的示例中,控制台输出什么?

    Example #4

    var a = 1;

    function foo() { 

    console.log(this.a); 

    }

    foo();

    复制代码输出结果是 undefined?是 1?还是什么?

    如果你已经很好地理解了之前讲解的内容,那么你应该知道控制台输出的是“1”。为什么?首先,默认绑定作用于函数 foo。因此 foo 中的“this”指向 global 对象,并且 a 被声明为 global 变量,这就意味着 a 是 global 对象的属性(也称之为全局对象污染),因此 this.a 和 var a 就是同一个东西。

    随着本文的深入,我们将会继续研究默认绑定,但是现在是时候向你介绍下一个规则了。

    Example #5

    var obj = { 

    a: 1, 

    foo: function() { 

      console.log(this); 

    };

    obj.foo();

    复制代码这里应该没有什么疑问,对象“obj”会被输出在控制台中。你在这里看到的是 隐式绑定。规则规定,当一个函数被作为一个对象方法被调用时,那么它内部的“this”应该指向这个对象。如果函数调用前面有多个对象( obj1.obj2.func() ),那么函数之前的最后一个对象(obj3)会被绑定。

    需要注意的一点是函数调用必须有效,那也就是说当你调用 obj.func() 时,必须确保 func 是对象 obj 的属性。

    因此,在上面的例子中调用 obj.foo() 时,“this”就指向 obj,因此 obj 被打印输出在控制台中。

    Example #6

    function logThis() { 

    console.log(this); 

    }

    var myObject = { 

    a: 1, 

    logThis: logThis 

    };

    logThis(); 

    myObject.logThis();

    复制代码你被难住了?我希望没有。

    跟在 myObject 后面的这个全局调用 logThis() 通过 console.log(this) 打印的是 global 对象;而 myObject.logThis() 打印的是 myObject 对象。

    这里需要注意一件有趣的事情:

    console.log(logThis === myObject.logThis); // true

    复制代码为什么不呢?它们当然是相同的函数,但是你可以看到 如何调用_logThis_ 会让其中的“this”发生改变。当 logThis 被单独调用时,使用默认绑定规则,但是当 logThis 作为前面的对象属性被调用时,使用隐式绑定规则。

    不管采用哪条规则,让我们看看是怎么处理的(双关语)。

    Example #8

    function foo() { 

    var a = 2; 

    this.bar(); 

    }

    function bar() { 

    console.log(this.a); 

    }

    foo();

    复制代码控制台输出什么?首先,你可能会问我们可以调用“_this.bar()”吗?当然可以,它不会导致错误。

    就像示例 #4 中的 var a 一样,bar 也是全局对象的属性。因为 foo 被单独调用了,它内部的“this”就是全局对象(默认绑定规则)。因此 foo 内部的 this.bar 就是 bar。但实际的问题是,控制台中输出什么?

    如果你猜的没错,“undefined”会被打印出来。

    注意 bar 是如何被调用的?看起来,隐式绑定在这里发挥作用。隐式绑定意味着 bar 中的“this”是其前面的对象引用。bar 前面的对象引用是全局对象,在 foo 里面是全局对象,对不对?因此在 bar 中尝试访问 this.a 等同于访问 [global object].a。没有什么意外,因此控制台会输出 undefined。

    太棒了!继续向下讲解。

    Example #7

    var obj = { 

    a: 1, 

    foo: function(fn) { 

      console.log(this); 

      fn(); 

    };

    obj.foo(function() { 

    console.log(this); 

    });

    复制代码请不要让我失望。

    函数 foo 接受一个回调函数作为参数。我们所做的就是在调用 foo 的时候在参数里面放了一个函数。

    obj.foo( function() { console.log(this); } );

    复制代码但是请注意 foo 是 如何 被调用的。它是一个单独调用吗?当然不是,因此第一个输出到控制台的是对象 obj 。我们传入的回调函数是什么?在 foo 内部,回调函数变为 fn ,注意 fn 是 如何 被调用的。对,因此 fn 中的“this”是全局对象,因此第二个被输出到控制台的是全局对象。

    希望你不会觉得无聊。顺便问一下,你的分数怎么样?还可以吗?好吧,这次我准备难倒你了。

    Example #8

    var arr = [1, 2, 3, 4];

    Array.prototype.myCustomFunc = function() {

    console.log(this);

    };

    arr.myCustomFunc();

    复制代码如果你还不知道 Javascript 里面的 .prototype 是什么,那你就权且把它和其他对象等同看待,但如果你是 JavaScript 开发者,你应该知道。你知道吗?努努力,再去多读一些关于原型链相关的书籍吧。我在这里等着你。

    那么打印输出的是什么?是 Array.prototype 对象?错了!

    这是和之前相同的技巧,请检查 custommyfunc 是 如何 被调用的。没错,隐式绑定把 arr 绑定到 myCustomFunc,因此输出到控制台的是 arr[1,2,3,4]。

    我说的,你理解了吗?

    Example #9

    var arr = [1, 2, 3, 4];

    arr.forEach(function() { 

    console.log(this); 

    });

    复制代码执行上述代码的结果是,在控制台中输出了 4 次全局对象。如果你错了,也没关系。请再看示例#7。还没理解?下一个示例会有所帮助。

    Example #10

    var arr = [1, 2, 3, 4];

    Array.prototype.myCustomFunc = function(fn) { 

    console.log(this); 

    fn(); 

    };

    arr.myCustomFunc(function() { 

    console.log(this); 

    });

    复制代码就像示例 #7 一样,我们将回调函数 fn 作为参数传递给函数 myCustomFunc。结果是传入的函数会被独立调用。这就是为什么在前面的示例(#9)中输出全局对象,因为在 forEach 中传入的回调函数被独立调用。

    类似地,在本例中,首先输出到控制台的是 arr,然后是输出的是全局对象。我知道这看上去有点复杂,但我相信如果你能再多用点心,你会弄明白的。

    让我们继续使用这个数组的示例来介绍更多的概念。我想我会在这里使用一个简称,WGL 怎么样?作为 WHAT.GETS.LOGGED 的简称?好吧,在我开始老生常谈之前,下面是另外一个例子。

    Example #11

    var arr = [1, 2, 3, 4];

    Array.prototype.myCustomFunc = function() { 

    console.log(this);

    (function() { 

    console.log(this); 

    })();

    };

    arr.myCustomFunc();

    复制代码那么,输出是?

    答案和示例 #10 完全一样。轮到你了,说一说为什么首先输出的是 arr?你看到第一个 console.log(this) 的下面有一段复杂的代码,它被称为 IIFE(立即调用的函数表达式)。这个名字不用再过多解释了,对吧?被 (…)(); 这样形式封装的函数会立即被调用,也就是说等同于被独立调用,因此它内部的“this”是全局变量,所以输出的是全局变量。

    要来新概念了!让我们看看你对 ES2015 的熟悉程度。

    Example #12

    var arr = [1, 2, 3, 4];

    Array.prototype.myCustomFunc = function() { 

    console.log(this);

    (function() { 

      console.log(‘Normal this : ‘, this); 

    })();

    (() =\> { 

      console.log(‘Arrow function this : ‘, this); 

    })();

    };

    arr.myCustomFunc();

    复制代码除了 IIFE 后面的增加了 3 行代码之外,其他代码与示例 #11 完全相同。它实际上也是一种 IIFE,只是语法稍有不同。嗨,这是箭头函数。

    箭头函数的意思是,这些函数中的“this”是一个词法变量。也就是说,当将“this”与这种箭头函数绑定时,函数会从包裹它的函数或作用域中获取“this”的值。包裹我们这个箭头函数的函数里面的“this”是 arr。因此?

    // This is WGL

    arr [1, 2, 3, 4]

    Normal this : global

    Arrow function this : arr [1, 2, 3, 4]

    复制代码如果我用箭头函数重写示例 #9 会怎么样?控制台输出什么呢?

    var arr = [1, 2, 3, 4];

    arr.forEach(() => {

    console.log(this);

    });

    复制代码上面的这个例子是额外追加的,所以即使你猜对了也不用增加分数。你还在算分吗?书呆子。

    现在请仔细关注以下示例。我会不惜一切代价让你弄懂他们 :-)。

    Example #13

    var yearlyExpense = {

    year: 2016,

    expenses: [

      {‘month’: ‘January’, amount: 1000},

      {‘month’: ‘February’, amount: 2000},

      {‘month’: ‘March’, amount: 3000}

      ],

    printExpenses: function() {

      this.expenses.forEach(function(expense) {

      console.log(expense.amount + ‘ spent in ‘ + expense.month + ‘, ‘ +    this.year);

      });

      }

    };

    yearlyExpense.printExpenses();

    复制代码那么,输出是?多点时间想一想。

    这是答案,但我希望你在阅读解释之前先自己想想。

    1000 spent in January, undefined 

    2000 spent in February, undefined 

    3000 spent in March, undefined

    复制代码这都是关于 printExpenses 函数的。首先注意下它是如何被调用的。隐式绑定?是的。所以 printExpenses 中的“this”指向的是对象 yearlycost。这意味着 this.expenses 是 yearlyExpense 对象中的 expenses 数组,所以这里没有问题。现在,当它在传递给 forEach 的回调函数中出现“this”时,它当然是全局对象,请参考例 #9。

    注意,下面的“修正”版本是如何使用箭头函数进行改进的。

    var expense = {

    year: 2016,

    expenses: [

      {‘month’: ‘January’, amount: 1000},

      {‘month’: ‘February’, amount: 2000},

      {‘month’: ‘March’, amount: 3000}

      ],

    printExpenses: function() {

      this.expenses.forEach((expense) => {

        console.log(expense.amount + ‘ spent in ‘ + expense.month + ‘, ‘ +  this.year);

      });

      }

    };

    expense.printExpenses();

    复制代码这样我们就得到了想要的输出结果:

    1000 spent in January, 2016 

    2000 spent in February, 2016 

    3000 spent in March, 2016

    复制代码到目前为止,我们已经熟悉了隐式绑定和默认绑定。我们现在知道函数被调用的方式决定了它里面的“this”。我们还简要地讲了箭头函数以及它们内部的“this”是怎样定义的。

    在我们讨论其他规则之前,你应该知道,有些情况下,我们的“this”可能会丢失隐式绑定。让我们快速地看一下这些例子。

    Example #14

    var obj = { 

    a: 2, 

    foo: function() { 

      console.log(this); 

    };

    obj.foo();

    var bar = obj.foo; 

    bar();

    复制代码不要被这里面的花哨代码所分心,只需注意函数是如何被调用的,就可以弄明白“this”的含义。你现在一定已经掌握这个技巧了吧。首先 obj.foo() 被调用,因为 foo 前面有一个对象引用,所以首先输出的是对象 obj。bar 当然是被独立调用的,因此下一个输出是全局变量。提醒你一下,记住在严格模式下,全局对象是不会默认绑定的,因此如果你在开启了严格模式,那么控制台输出的就是 undefined,而不再是全局变量。

    bar 和 foo 是对同一个函数的引用,唯一区别是它们被调用的方式不同。

    Example #15

    var obj = { 

    a: 2, 

    foo: function() { 

      console.log(this.a); 

    };

    function doFoo(fn) { 

    fn(); 

    }

    doFoo(obj.foo);

    复制代码这里也没什么特别的。我们是通过把 obj.foo 作为 doFoo 函数的参数(doFoo 这个名字听起来很有趣)。同样, fn 和 foo 是对同一个函数的引用。现在我要重复同样的分析过程, fn 被独立调用,因此 fn 中的“this”是全局对象。而全局对象没有属性 a,因此我们在控制台中得到了 undifined 的输出结果。

    到这里,我们这部分就讲完了。在这一部分中,我们讨论了将“this”绑定到函数的两个规则。默认绑定和隐式绑定。我们研究了如何使用“use strict”来影响全局对象的绑定,以及如何会让隐式绑定的“this”失效。我希望在接下来的第二部分中,你会发现本文对你有所帮助,在那里我们将介绍一些新规则,包括 new 和显式绑定。那里再见吧!

    在我们结束之前,我想用一个“简单”的例子来作为这一部分的收尾,当我开始使用 Javascript 时,这个例子曾经让我感到非常震惊。Javascript 里面也并不是所有的东西都是美的,也有看起来很糟糕的东西。让我们看看其中的一个。

    var obj = { 

    a: 2, 

    b: this.a * 2 

    };

    console.log( obj.b ); // NaN

    复制代码它读起来感觉很好,在 obj 里面,“this”应该是 obj,因此是 this.a 应该是 2。嗯,错了。因为在这个对象里面的“this”是全局对象,所以如果你像这么写…

    var myObj = { 

    a: 2, 

    b: this 

    };

    console.log(myObj.b); // global

    复制代码控制台输出的就是全局对象。你可能会说“但是,myObj 是全局对象的属性(示例 #4 和示例 #8),不对吗?”是的,绝对正确。

    console.log( this === myObj.b ); // true 

    console.log( this.hasOwnProperty(‘myObj’) ); //true

    复制代码“也就是说,如果我像这样写的话,它就可以!”

    var myObj = { 

    a: 2, 

    b: this.myObj.a * 2 

    };

    复制代码遗憾的是,不是这样的,这会导致逻辑错误。上面的代码是不正确的,编译器会抱怨它找不到未定义的属性 a。为什么会这样?我也不太清楚。

    幸运的是,getters(隐式绑定)可以给我们提供帮助。

    var myObj = { 

    a: 2, 

    get b() { 

      return this.a * 2 

    };

    console.log( myObj.b ); // 4

    复制代码你坚持到最后了!做得好。第二部分,我们再见。

    相关文章

      网友评论

          本文标题:转载:[译] 让我们一起解决“this”难题—第一部分

          本文链接:https://www.haomeiwen.com/subject/gsaygftx.html