AngularJs服務功能 - 這（）

我正在學習angularjs，我一直注意到什麼時候聲明瞭一個函數，大多數人通常在修改它之前將「this」變成一個var。這是爲什麼？AngularJs服務功能 - 這（）

代碼下面片段：

function NameService() { 

    var self = this; **THIS BLOCK. WHY??** 

    //getName returns a promise which when 
    //fulfilled returns the name. 
    self.getName = function() { 
     return $http.get('/api/my/name'); 
    }; 
}

並在底部，該示例使用self.getName。爲什麼不直接調用this.getName？

謝謝

來源

2016-01-03 Bayo O ' lili Jason'

這是一種保持正確'this'值並避免混淆的方法。假設你想從一個AJAX調用的成功函數中運行一個方法，你會使用'self'而不是'this'，因爲這並不意味着你的意思 –

謝謝。這對於這些回覆的速度來說非常有意義並且令人印象深刻:) –

這只是一個你可以使用的模式。通常它有助於避免在JavaScript'世界'中非常常見的'this'關鍵字的衝突。

也有助於提高可讀性，以便您更輕鬆地閱讀代碼。看看這個例子中，在那裏你可以很容易區分服務的公共職能和本地/私有的：與

function NameService() { 

    var self = this; **THIS BLOCK. WHY??** 

    self.getName = getName; 
    self.setName = setName; 


    //getName returns a promise which when 
    //fulfilled returns the name. 
    function getName() { 
     return $http.get('/api/my/name'); 
    }; 

    function setName(){ 
     //blablabla 
    } 

    function justAHelperFunction(){ 
     //helper function, kind of inner function, a private function 
    } 
}

來源

2016-01-03 12:40:16 Iamisti

謝謝!!!現在，我看到的代碼示例的其餘部分更有意義。我花了一個小時試圖弄清楚自己的大腦。 –

我很高興能幫你解決這個問題;） – Iamisti

在javascript中this指的是當前對象的this中說值的方法取決於如何該函數被調用。當您將回調傳遞給函數調用時，將更改this的上下文，並且在回調定義this內部沒有引用具有使用回調進一步調用該函數的方法的對象。

var person = { 
    firstName: 'John', 
    lastName: 'Doe', 

    printFullName: function() { 
    setTimeout(function() { 
     // here this doesn't point to the person object anymore 
     // as the callback passed to setTimeout was invoked by global window object 
     // so this points to window 
     console.log(this.firstName + ' ' + this.lastName); 
    }, 100) 
    } 
}

要解決上述情況，您希望這是一個人，您可以在另一個變量中創建上下文捕獲引用的別名。這是以上方法的正確版本。

printFullName: function() { 
    var self = this; 
    // till now self == this 
    setTimeout(function() { 
     // here self still points to person whereas this is now pointing to window 
     console.log(self.firstName + ' ' + self.lastName); 
    }, 100) 
    }

來源

2016-01-03 12:51:15 Ehtesham

AngularJs服務功能 - 這（）

回答

相關問題