说明
《你不知道的JavaScript》学习笔记。
为什么要用this
书中举了一个例子：
function identify() { return this.name.toUpperCase(); } function speak() { var greeting = "Hello, I'm " + identify.call( this ); console.log( greeting ); } var me = { name: "Kyle" }; var you = { name: "Reader" }; identify.call( me ); // KYLE identify.call( you ); // READER speak.call( me ); // Hello, 我是 KYLE speak.call( you ); // Hello, 我是 READER
如果不使用 this，那就需要给 identify() 和 speak() 显式的传入一个上下文对象。
function identify(context) { return context.name.toUpperCase(); } function speak(context) { var greeting = "Hello, I'm " + identify( context ); console.log( greeting ); } var me = { name: "Kyle" }; var you = { name: "Reader" }; identify( you ); // READER speak( me ); //hello, 我是 KYLE
随着使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用 this 则不会这样。
this 提供了一种更优雅的方式来隐式“传递” 一个对象引用， 因此可以将 API 设计得更加简洁并且易于复用。
误解
两种常见的对于 this 的错误解释。
1、指向自身
1、先看一个例子：想要记录一下函数 foo 被调用的次数。
function foo(num) { console.log( "foo: " + num ); // 记录 foo 被调用的次数 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 // foo 被调用了多少次？ console.log( foo.count ); // 0 console.log( count ); // NaN
显然 foo() 里的 this 不是指向那个函数对象，虽然属性名相同，跟对象却不相同。
2、再看下面两个函数
function foo() { foo.count = 4; // foo 指向它自身 } setTimeout( function(){ // 匿名（没有名字的） 函数无法指向自身 }, 10 );
代码分析：
1、foo() 函数是具名函数，在它的内部可以使用 foo 来引用自身
2、传入 setTimeout() 的回调函数是匿名函数，无法从函数内部引用自身
3、解决方法
1、使用 foo 标识符替代 this 来引用函数对象
2、强制 this 指向 foo 函数对象
方法1：
function foo(num) { console.log( "foo: " + num ); // 记录 foo 被调用的次数 foo.count++; }
方法2：
var i; for (i=0; i<10; i++) { if (i > 5) { // 使用 call(..) 可以确保 this 指向函数对象 foo 本身 foo.call( foo, i ); } }
2、它的作用域
- this 在任何情况下都不指向函数的词法作用域。
- 在 JavaScript 内部， 作用域确实和对象类似， 可见的标识符都是它的属性。
- 作用域“对象” 无法通过 JavaScript 代码访问， 它存在于 JavaScript 引擎内部。
this到底是什么
当一个函数被调用时， 会创建一个活动记录（有时候也称为
执行上下文）。 这个记录会包含函数在哪里被调用（调用栈）、 函数的调用方法、 传入的参数等信息。 this 就是记录的其中一个属性， 会在函数执行的过程中用到。
- this 是在运行时进行绑定的， 并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。
- this 的绑定和函数声明的位置没有任何关系， 只取决于函数的调用方式。
