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是函数自身。
function foo(num) { console.log( "foo: " + num ); // keep track of how many times `foo` is called this.count++; } foo.count = 0; var i; for (i=0; i<10; i++) { if (i > 5) { foo( i ); } } // foo: 6 // foo: 7 // foo: 8 // foo: 9 // how many times was `foo` called? console.log( foo.count ); // 0 -- WTF?
因为this指向了window对象。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 ); // 4
除此之外,还有规避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决定!!!