<!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>
注意裏面的這個getGender(), 我們可以通過cody.gender訪問到這個函數。當然我們也可以重寫this去訪問這個函數,請看代碼:<!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是code對象的一個的引用。
二。this的值是怎麼確定的呢?
this的值是由當前運行函數的上下文確定的。請看如下代碼段:
<!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>
myObject
對象被賦值了一個指向sayFoo()函數的sayFoo屬性,當sayFoo()函數在全局函數中調用的時候,它的this指針是指向windows的,當sayFoo()函數被當作myObject的方法調用的時候,this是指向myObject.
三。this關鍵字在嵌套函數中指向的是window對象而不是函數被定義的地方。請看下面的代碼:
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {
func1:function() {
console.log(this); //logs myObject
varfunc2=function() {
console.log(this); //logs window, and will do so from this point on
varfunc3=function() {
console.log(this); //logs window, as it’s the head object
}();
}();
}
};
myObject.func1();
</script></body></html>
嵌套在裏面的函數的this指針始終指向window.不過這這現象就在ESM5中被修復,現在,我們需要知道的是,特別是當你把函數當作參數傳遞給其他函數的時候。請看如下代碼:
<!DOCTYPE html><html lang="en"><body><script>
var foo = {
func1:function(bar){
bar(); //logs window, not foo
console.log(this);//the this keyword here will be a reference to foo object
}
};
foo.func1(function(){console.log(this)});
</script></body></html>
現在我們明白了,this會始終指向window噹噹前函數被包含在另一個函數上下文的裏面。
爲了保證this值不會丟失,我們可以使用一個變量that保存父作用域裏的This.以便更好的保持跟蹤作用域。請看如下代碼
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {
myProperty:'Icanseethelight',
myMethod:function() {
var that=this; //store a reference to this (i.e.myObject) in myMethod scope varhelperFunctionfunction(){//childfunction
var helperFunction function() { //childfunction
//logs 'I can see the light' via scope chain because that=this
console.log(that.myProperty); //logs 'I can see the light'
console.log(this); // logs window object, if we don't use "that"
}();
}
}
myObject.myMethod(); // invoke myMethod
</script></body></html>