深入理解this關鍵字

一. 當一個函數被創建的時候,this也就被創建了,它指向操作當前函數的那個對象。看如下這個例子
<!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>






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章