JS中this的指向

標籤：c   style   class   blog   code   java   

JS中this的指向：this在物件導向編程中非常重要，它的值取決於調用的模式。在JS中一共有四種調用模式，方法調用模式、函數調用模式、構造器調用模式和apply調用模式。

 

方法調用模式：當一個函數被儲存為對象的一個屬性時，我們稱它為一個方法。當方法被調用時，this被綁定到該對象。方法可以使用this去訪問對象，所以它能從對象中取值或修改該對象。this到對象的綁定發生在調用的時候。通過this可取的它們所屬對象的內容相關的方法稱為公用方法。

var myobj = {    value: 1,    inc: function (){        return this.value    }}myobj.inc(); //輸出1

 

函數調用模式：當一個函數並非一個對象的屬性時，那麼它被當作一個函數來調用。當一個函數被調用時，this被綁定到全域對象。這是語言設計上的一個錯誤，倘若語句設計正確，當內建函式被調用時，this應該仍然綁定到外部函數的this變數中。幸運的是，有一個很容易的解決方案，如果該方法定義一個變數並給它賦值為this，那麼內建函式就可以通過變數訪問到this。

var myobj = {value: 1}var value = 10;myobj.double = function (){    var that = this;        var this01 = (function (){        return that.value;    })();        var this02 = (function (){        return this.value;    })();    console.log(this01);  //this01輸出1    console.log(this02); //this02輸出10}myobj.double()

 

構造器調用模式：如果在一個函數前面帶上一個new來調用，那麼將建立一個隱藏接到該函數的prototype成員的新對象，同時this將會被綁定到那個新對象上。new首碼也會改變return語句的行為。

//建立一個名為Quo的構造器函數var Quo = function (string){    this.status = string}//給Quo的所有執行個體提供一個名為getStatus的公用方法Quo.prototype.getStatus = function (){    return this.status}//構造一個Quo執行個體var myQuo = new Quo(‘csh‘);myQuo.getStatus(); //輸出csh

結合new首碼調用的函數被稱為構造器函數，按照約定，它們儲存在以大寫格式命名的變數裡。如果調用建構函式時沒有在前面加上new，可能會發生非常糟糕的事情。所以大寫約定非常重要(不推薦使用構造器函數)。

 

apply調用模式：在JS裡面函數是擁有方法的。apply方法讓我們構建一個參數數組並用其去調用函數。它也允許我們選擇this的值。apply方法接收兩個參數。第一個是將被綁定給this的值，第二個就是一個參數數組。當apply第一個參數為空白時，this預設調用全域對象。

var add = function (a, b){    return a + b;}var arr = [3, 4];console.log(add.apply(null, arr)); //輸出7var myOBJ = {name: ‘csh‘};var myname = function (){    return this.name;}console.log(myname.apply(myOBJ, null));//輸出csh