今天的教程来自天才的Cody Lindley的新书:《JavaScript启蒙教程 / JavaScript Enlightenment》。他讨论了令人迷惑的关键字this,以及确定和设置this的值的方法。
概念性的概述this
当一个函数创建后,一个关键字this就随之(在后台)创建,它链接到一个对象,而函数正是在这个对象中进行操作。换句话说,关键字this可在函数中使用,是对一个对象的引用,而函数正是该对象的属性或方法。
让我们来看这个对象:
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html><html lang="en"><body><script> var cody = { living:true, age:23, gender:'male', getGender:function(){return cody.gender;} }; console.log(cody.getGender()); // logs 'male' </script></body></html> |
1 |
注意在函数getGender里,由于在cody对象内部,我们可以通过.来获取gender属性(也就是cody.gender)。也可以用this来获取cody对象,因为this正是指向cody对象。
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html><html lang="en"><body><script> var cody = { living:true, age:23, gender:'male', getGender:function(){return this.gender;} }; console.log(cody.getGender()); // logs 'male' </script></body></html> |
this.gender中this指向cody对象,而getGender函数可以操作cody对象。
关于this的主题可能有点让人感到困惑,其实不必如此。仅记住,通常,this指向的对象正是包含函数的对象,而不是函数本身(当然也有例外,例如采用关键字new或者call()和apply())。
重要提示
– 关键字this就像其他的变量,唯一不同就是你不能更改它。
– 不同于传给函数的其他参数和变量,在调用函数的对象中,this是一个关键字(而不是属性)。
如何确定this的值?
this传递给所有的函数,它的值取决于函数运行时何时被调用。这里请注意,因为这是你需要记住的一个很特别的地方。
下面的代码中myObject对象有个属性sayFoo,它指向函数sayFoo。当在全局域中调用sayFoo函数时,this指向window对象。当myObject调用函数时,this指向的是myObject。
因为myObject有个叫foo的属性,在这里被使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html><html lang="en"><body><script> var foo = 'foo'; var myObject = {foo: 'I am myObject.foo'}; var sayFoo = function() { console.log(this['foo']); }; // give myObject a sayFoo property and have it point to sayFoo function myObject.sayFoo = sayFoo; myObject.sayFoo(); // logs 'I am myObject.foo' 12 sayFoo(); // logs 'foo' </script></body></html> |
很清楚,this的值取决于函数什么时候被调用。myObject.sayFoo和sayFoo都指向同样的函数,但sayFoo()调用的上下文不同,this的值也就不同。下面是类似的代码,head对象(window)显式使用,希望对你有用。
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html><html lang="en"><body><script> window.foo = 'foo'; window.myObject = {foo: 'I am myObject.foo'}; window.sayFoo = function() { ! console.log(this.foo); }; window.myObject.sayFoo = window.sayFoo; window.myObject.sayFoo(); ܌关键字this可在函数中使用,是对一个对象的引用,而函数正是该对象的属性或方法。
让我们来看这个对象:
注意在函数getGender里,由于在cody对象内部,我们可以通过.来获取gender属性(也就是cody.gender)。也可以用this来获取cody对象,因为this正是指向cody对象。
this.gender中this指向cody对象,而getGender函数可以操作cody对象。 关于this的主题可能有点让人感到困惑,其实不必如此。仅记住,通常,this指向的对象正是包含函数的对象,而不是函数本身(当然也有例外,例如采用关键字new或者call()和apply())。 重要提示 – 关键字this就像其他的变量,唯一不同就是你不能更改它。 – 不同于传给函数的其他参数和变量,在调用函数的对象中,this是一个关键字(而不是属性)。 如何确定this的值? this传递给所有的函数,它的值取决于函数运行时何时被调用。这里请注意,因为这是你需要记住的一个很特别的地方。 下面的代码中myObject对象有个属性sayFoo,它指向函数sayFoo。当在全局域中调用sayFoo函数时,this指向window对象。当myObject调用函数时,this指向的是myObject。 因为myObject有个叫foo的属性,在这里被使用。
很清楚,this的值取决于函数什么时候被调用。myObject.sayFoo和sayFoo都指向同样的函数,但sayFoo()调用的上下文不同,this的值也就不同。下面是类似的代码,head对象(window)显式使用,希望对你有用。
|