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

創(chuàng)新互聯(lián)秉承實現(xiàn)全網(wǎng)價值營銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，成都網(wǎng)站設計、網(wǎng)站建設，微信小程序，網(wǎng)頁設計制作，成都做手機網(wǎng)站，全網(wǎng)整合營銷推廣幫助傳統(tǒng)企業(yè)實現(xiàn)“互聯(lián)網(wǎng)+”轉型升級專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術人才,對客戶都以感恩的心態(tài)奉獻自己的專業(yè)和所長。

this的工作原理

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

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

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

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

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

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

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

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

ThisClownCar(); // <- Window

改動this

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

Function.prototype.call 可以有任意數(shù)量的參數(shù)，***個參數(shù)被分配給this，剩下的被傳遞給調用函數(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,以及當前this值，由于某些莫名其妙的原因,我更喜歡是使用的方法.bind函數(shù)。這可以用來將父作用域的this指定給子作用域。

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

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

文章標題：JavaScript中的this工作原理
轉載注明：http://chinadenli.net/article12/gpppgc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站排名、定制開發(fā)、域名注冊、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)