JavaScript中的this工作原理

這篇文章主要介紹“JavaScript中的this工作原理”，在日常操作中，相信很多人在JavaScript中的this工作原理問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中的this工作原理”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

this的工作原理

如果一個函數(shù)被作為一個對象的方法調(diào)用，那么this將被指派為這個對象。

var parent = {     method: function () {         console.log(this);     } };   parent.method(); // <- parent

注意這種行為非?！按嗳酢?，如果你獲取一個方法的引用并且調(diào)用，那么this的值不會是parent了，而是window全局對象。這讓大多數(shù)開發(fā)者迷惑。

var parentless = parent.method;   parentless(); // <- Window

底線是你應(yīng)該查看調(diào)用鏈，以理解被調(diào)用函數(shù)是一個對象的屬性還是它自己。如果它被作為屬性調(diào)用，那么this的值將變成該屬性的對象，否則this的值將被指派為全局對象或window。如果在嚴(yán)格模式下，this的值將是undefined。

在被當(dāng)作構(gòu)造函數(shù)的情況下，當(dāng)使用new關(guān)鍵字時，this將被指派為被創(chuàng)建的實例對象。

function ThisClownCar () {   console.log(this); }   new ThisClownCar(); // <- ThisClownCar {}

注意，在這種情況下沒有辦法識別出一個函數(shù)是否應(yīng)該被用作構(gòu)造函數(shù)，因此省略new關(guān)鍵字導(dǎo)致this的結(jié)果將是全局對象，就像我們上面看到的沒有用parent調(diào)用的例子。

ThisClownCar(); // <- Window

改動this

.call、 .apply 和.bind 方法用來操作調(diào)用函數(shù)的方式，幫我們定義this的值和傳遞給函數(shù)的參數(shù)值。

Function.prototype.call 可以有任意數(shù)量的參數(shù)，***個參數(shù)被分配給this，剩下的被傳遞給調(diào)用函數(shù)。

Array.prototype.slice.call([1, 2, 3], 1, 2) // <- [2]

Function.prototype.apply 的行為和.call類似，但它傳遞給函數(shù)的參數(shù)是一個數(shù)組，而不是任意參數(shù)。

String.prototype.split.apply('13.12.02', ['.']) // <- ['13', '12', '02']

Function.prototype.bind 創(chuàng)建一個特殊的函數(shù)，該函數(shù)將永遠使用傳遞給.bind的參數(shù)作為this的值，以及能夠分配部分參數(shù)，創(chuàng)建原函數(shù)的珂里化（curride）版本。

var arr = [1, 2]; var add = Array.prototype.push.bind(arr, 3);   // effectively the same as arr.push(3) add();   // effectively the same as arr.push(3, 4) add(4);   console.log(arr); // <- [1, 2, 3, 3, 4]

作用域鏈中的this

在下面的例子，this將無法在作用域鏈中保持不變。這是規(guī)則的缺陷，并且常常會給業(yè)余開發(fā)者帶來困惑。

function scoping () {   console.log(this);     return function () {     console.log(this);   }; }   scoping()(); // <- Window // <- Window

有一個常見的方法，創(chuàng)建一個局部變量保持對this的引用，并且在子作用域中不能有同命變量。子作用域中的同名變量將覆蓋父作用域中對this的引用。

function retaining () {   var self = this;     return function () {     console.log(self);   }; }   retaining()(); // <- Window

除非你真的想同時使用父作用域的this,以及當(dāng)前this值，由于某些莫名其妙的原因,我更喜歡是使用的方法.bind函數(shù)。這可以用來將父作用域的this指定給子作用域。

function bound () {   return function () {     console.log(this);   }.bind(this); }   bound()(); // <- Window

到此，關(guān)于“JavaScript中的this工作原理”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>