原生JS大揭秘—撩開this的面紗

Brenner 發布于2019-08-26 11:39 / 2864人閱讀

摘要：隨著函數使用場景的不同，而發生變化。是當前執行上下文中的一部分。在中新增了該方法也是強制更改指向。但是和的區別是更改后不會立即執行，它會返回一個新函數。

this何意？在英文中this是一個人稱代詞，表示這個的,具體指哪個？不確定，只有在具體的語境中才可確定，在編程語言中this也有同樣的類似特性。
在js中this是一個關鍵字，它不能被當做變量、屬性，也不可以進行賦值操作。
this 隨著函數使用場景的不同，而發生變化。
this 是當前執行上下文中的一部分。

this永遠指向函數的調用者。 函數內this的取決于函數是如何被調用

當函數是獨立調用時，this指向全局對象window（非嚴格模式），undefined（嚴格模式）

當函數是作為一個對象的方法被調用時，this指向該對象

構造函數中，this指向new的對象實例

在事件處理函數中，this指向觸發事件的DOM對象

// 聲明一個函數
function show(){
    console.log(this);
}

// 聲明一個對象（變量）
var obj={
    _show:show
}

// 獨立調用
show(); // window(非嚴格模式) undefined(嚴格模式)

// 作為某個對象的方法調用
show._show(); // obj

// 作為構造函數被調用，指向對象實例
var s = new show(); // this->s

// 作為事件處理函數調用
var aLink=document.getElementById("J-link");
// 事件處理函數中，this指向觸發事件的DOM對象
aLink.onclick=show; // this->aLink

在JS中一切皆對象，函數也是對象，既然是對象就有屬性和方法，在JS中所有的方法都是兩個方法call(),apply()

我們可以使用這兩個方法來顯示更改函數中this的指向，

call、apply這兩個函數的共同特點：改變并立即執行。

區別就是傳參方式不同

call是一個一個傳入

apply是傳入一個數組，一次性傳完。

在ES5中新增了bind(),該方法也是強制更改this指向。

但是bind和call、apply的區別是bind更改this后不會立即執行，它會返回一個新函數。

bind傳參也是一個一個的傳入

特別注意：
  call/apply如果更改為原始值的null、undefined，則this->window
  call/apply如果更改為原始值的Number、String、Boolean，則this->對應的包裝對象

// 聲明一個對象(變量)
var obj={
    name:"tom",
    age :20
};

// 聲明一個函數
function show(a, b){
    console.log(this, a, b);
}

// 獨立調用
show(1, 2); // this->window(非嚴格模式) this->undefined(嚴格模式)

// 強制更改this指向為obj，并立即執行該函數
show.call(obj, 1, 2); // this->obj
show.apply(obj, [1, 2]); // this->obj

// 強制更改this指向obj,不會立即執行，它返回一個新函數，需要去主動執行這個新函數
show.bind(obj, 1, 2)(); // this->obj

云服務器 GPU云服務器 js里面的this 大揭秘原生js的hover js中的this

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107315.html

原生JS大揭秘—揭開數據類型轉換的面紗

摘要：可以將其他類型轉成字符串函數可以將任意類型的值轉為布爾值。提示空數組空對象轉換為布爾型也是。在JS中數據類型轉換有兩種相關資料參閱官方ecma-5規范阮一峰老師類型轉換規范對相等==定義強制類型轉換Number() Number函數將字符串轉為數值，要比parseInt函數嚴格很多，只要有一個字符是非數字（空格、+、-除外），那么就會被轉為NaN。 showImg(http...

Moxmi 2019-08-26 11:44 評論0 收藏0
原生JS大揭秘—看清JS繼承本質

摘要：繼承理論源于生活又高于生活在中繼承，和現實生活中繼承是相似的如兒子繼承父親財產子女的生理特性有父母的特性身高膚色性格等等只是一定比例上是這樣的，不是絕對的一樣中繼承方法有以下幾種本質區別方法特別注意是本質區別冒充繼承也稱之為借用構造函數這種 JS繼承理論源于生活、又高于生活在JS中繼承，和現實生活中繼承是相似的如:兒子繼承父親財產、子女的生理特性有父母的特性（身高、膚色、性格...

sutaking 2019-08-22 18:09 評論0 收藏0
劍指Kubernetes 揭秘騰訊云的PaaS技術選型策略

摘要：騰訊云在年底決定開發容器產品隨后組建容器技術團隊并進行技術選型通過對不同編排工具的分析對比最終選擇作為容器編排引擎并且迅速在年初推出容器解決方案為用戶提供托管的一站式服務。但是騰訊云最終選擇了現在看來這個選擇無比正確。Kubernetes 很火,一大批互聯網公司早已領先一步,搭建起專有的 PaaS平臺,傳統企業們看到的 Kubernetes的趨勢,亦不甘落后,在試水的道上一路狂奔。雖然,Ku...

icattlecoder 2019-04-30 11:34 評論0 收藏0
原生JS大揭秘—JS代碼底層運行原理

摘要：是一種基于對象的動態弱類型腳本語言以下簡稱，是一種解釋型語言，和其他的編程語言不同，如等編譯型語言，這些語言在代碼執行前會進行通篇編譯，先編譯成字節碼機器碼。然后在執行。 JavaScript是一種基于對象的動態、弱類型腳本語言（以下簡稱JS），是一種解釋型語言，和其他的編程語言不同，如java/C++等編譯型語言，這些語言在代碼執行前會進行通篇編譯，先編譯成字節碼（機器碼）。然后在執...

xiongzenghui 2019-08-26 11:40 評論0 收藏0
原生JS大揭秘—同步與異步

摘要：中任務分類同步異步同步任務異步任務中異步類型定時任務網絡請求回調函數事件綁定只能傳入一個參數未完待續 JS中任務分類同步異步同步任務異步任務 JS中異步類型定時任務網絡請求回調函數事件綁定 Promise(resolve只能傳入一個參數) 未完待續...

不知名網友 2019-08-22 18:11 評論0 收藏0