JavaScript初階（七）----------This指向問題

標籤：size   就是   console   microsoft   轉換   編譯過程   span   沒有   例子   

模仿jQuery實現鏈式調用模式

　　 有時候我們需要像jQuery一樣連續調用方法，這時候我們就要用到this了。

　　

var deng = {    smoke : function () {         console.log("smoke,cool!!");        return this;    },    firehair : function () {        console.log(‘fire‘);        return this;    },    drink : function () {         console.log("drink");        return this;    }}deng.smoke().firehair().drink();

 

   以上代碼就是實現了鏈式調用，當函數一調用執行就會返回自己。

 

 

 

this指向問題

 　　1.函數先行編譯過程，this----->window

　　2.全域範圍      this -----> window

　　3.call / apply，改變this指向，指向第一個參數

　　4.object.function() { }     this ------> object

 

　　例如：

var obj = {age : 20,smoke : function () {console.log(this);}}var smoke1 = obj.smoke;smoke1();

　　

　　在這個例子當中，把函數體給smoke1，這時候smoke1執行的時候，就相當於自己執行，沒有人調用它，所以這時候，正常走先行編譯環節，指向的是window。

 

再來個比較複雜的，例如：

              var name = "222";              var a = {                  name : "111",                  say : function () {                      console.log(this.name);                  }              }              var fun = a.say;              fun();  //  222              a.say();  //  111              var b = {                  name : "333",                  say : function (fun) {                      fun();                  }              }              b.say(a.say); // 222              b.say = a.say;               b.say(); // 333

 

　　

 

　　 先是將對象a的函數體給fun，然後fun執行就相當於執行自己的函數，這是this指向的是window，然後對象a調用自己的say方法，這時this指向a，接下來第三個是將a對象裡面的函數體

拿出來自己執行，這時候this指向的是window，最後是將a.say裡面的函數體給了b.say的函數體，這時候this指向b，用的對象a裡面的方法。

 

 

 

屬性的表示方法

　　我們一般用obj.prop的方法來引用屬性，但是有時候當我們需要通過變數傳參的形式調用屬性會報錯，所以我們採用下面這種形式

console.log(obj["prop"]);//obj["prop"]

　　

　　通過這種方法調用屬性，是系統最後的轉換形式，就算我們使用點的形式來進行屬性的調用，系統內部最後還是會將它轉化為中括弧的形式。另外就是，通過中括弧的形式調用屬

性，還能進行屬性的拼接：

           function getProp(num){                var obj = {                    friend1 : "a",                    friend2 : "b",                    friend3 : "c"                }                console.log(obj["friend1"]+num+obj["friend2"]+obj["friend3"]);            }            getProp("e");//aebc

 

JavaScript初階（七）----------This指向問題