You Don't Know JS: this & Object Prototypes( 第一章 this or That?)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Foreword

this 关键字和prototypes

他们是用JS编程的基础。没有他们创建复杂的JS程序是不可能的。

我敢说大量的web developers从没有建立过JS Object，仅仅对待这门语言作为一个事件绑定胶水，在按钮和Ajax请求之间。

我也曾是他们的一员，但是当我了解到如何掌握prototypes并创建JS对象，一个世界的可能性对我打开了。

Chapter 1: this Or That?
Chapter 2: this All Makes Sense Now!
Chapter 3: Objects
Chapter 4: Mixing (Up) "Class" Objects
Chapter 5: Prototypes
Chapter 6: Behavior Delegation
Appendix A: ES6 class
Appendix B: Thank You's!

Chapter 1: `this` Or That?

this作为一个识别符号关键字自动定义在每个函数的作用域中，但是它究竟涉及什么，甚至困扰着有经验的JS developer。

Why this?

既然很难理解，为什么还使用？它的麻烦大于它的价值吗？

看案例：

function identify() {
return this.name.toUpperCase();
}var me = {
name: "Kyle"
};

var you = {
name: "Reader"
};

identify.call( me ); // KYLE

identify.call( you ); // READER

这段代码让identify函数被多次调用。

如果不用this关键字，也可以通过传入一个context对象来实现：

function identify(context) {
return context.name.toUpperCase();
}
identify( you ); // READER

由此可见，this机制提供了更优雅的方式，暗示传入了一个对象，这让API设计更清晰，复用更容易。

Confusions

首先，消除一些错误观念。常常有2个错误的假设：

Itself

假设this是函数自身。

//在call方法内加上函数对象的identifier名字
for (var i=0; i<10; i++) {
if (i > 5) {
foo.call( foo, i );
}
}// how many times was `foo` called?
console.log( foo.count ); //

除此之外，还有规避this的方法。但都没有直面this到底是什么的问题。

使用foo.count代替this.count.
单独声明一个data对象{ count: 0}，用于计数 data.count++

Its Scope

另一个常见的误区是关于this，它涉及了函数的作用域。这里有些诡计：

在某些情况下是对的，但在其他情况下，这么理解是受到误导的！

this关键字，在任何时候，都不涉及一个function的 Lexical scope

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

写这段代码的人，试图通过this关键字，把变量a传递给bar函数。以为this是桥梁，能在两个函数的lexical scope之间传递内部变量a。 ❌。没有这个桥梁！！

this不能得到foo函数的Lexical scope！！

this和Lexical scope是不相关的！！！

What's this?

this机制到底是如何工作的？

this和函数调用的方式相关！

当一个函数被invoked，一条记录被创建。这条记录包含信息：

函数从哪里调用（the call-stack）
函数如何被invoked
什么参数被传入。

这条记录的属性之一就是 this 引用。它会在函数的执行期间被使用。

下一章，我们会学习寻找一个函数的call-site（调用点），来决定它的执行如何绑定this关键字

Review

this既不是函数自身的引用也不是函数的lexical作用域的引用！！

this实际是一个在函数被invoked时创建的绑定binding!!!

this引用什么由函数被调用的地点call-site决定！！！