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 的输出结果。
链接:https://juejin.im/post/5b680d8b518825196730a00f