摘要:是直接使用不帶任何修飾的函數引用進行調用的,因此只能使用默認綁定,無法應用其他規則。這通常被稱為裝箱。綁定對于的初學者可能會把它和類的語言混淆首先我們重新定義一下中的構造函數。在中,構造函數只是一些使用操作符時被調用的函數。
前言: 名字取得可能有點大,this 關鍵字是 JavaScript 中最復雜的機制之一。筆者也困擾已久,但自從閱讀了《你不知道的Javascript》以后豁然開朗,整理成文。如需更更詳細的解釋,請閱讀《你不知道的Javascript》第二部分第1章第2章。
綁定規則 默認綁定最常用的函數調用類型:獨立函數調用。可以把這條規則看作是無法應用 其他規則時的默認規則。
function foo() { console.log( this.a ); } var a = 2; foo(); // 2
foo() 是直接使用不帶任何修飾的函數引用進行調用的,因此只能使用 默認綁定,無法應用其他規則。
ps:不帶任何修飾的函數的描述如果有疑惑的話請不要糾結,繼續看下去就就會明白。
需要說明的一點是:如果使用嚴格模式(strict mode),那么全局對象將無法使用默認綁定,因此 this 會綁定 到 undefined:
function foo() { "use strict"; console.log( this.a ); } var a = 2; foo(); // TypeError: this is undefined隱式綁定
另一條需要考慮的規則是調用位置是否有上下文對象,或者說是否被某個對象擁有或者包 含,不過這種說法可能會造成一些誤導。
function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; obj.foo(); // 2 此處foo里的this就是指的.前面的對象
ps:啰嗦兩句,為什么obj.foo()可以執行,這是一種屬性的引用鏈的寫法,因為obj 和foo 都掛在全局作用域上。如果還不明白再舉一個例子。
function foo() { console.log( this.a ); } var obj2 = { a: 42, foo: foo }; var obj1 = { a: 2, obj2: obj2 }; obj1.obj2.foo(); // 42
對象屬性引用鏈中只有最頂層或者說最后一層會影響調用位置.此處也就是obj2
這里說一個比較容易出錯的地方:
function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; var a = "oops, global"; // a 是全局對象的屬性 setTimeout( obj.foo, 100 ); // "oops, global
JavaScript 環境中內置的 setTimeout() 函數實現和下面的偽代碼類似:
function setTimeout(fn,delay) { // 等待 delay 毫秒
fn(); // <-- 調用位置! }
setTimeout的參數fn可以看做調用時候傳入的函數復制給fn,這個是掛在全局作用域上的(此處的說法不嚴謹,很多時候框架的不同此處的this被綁定到哪兒很不確定).所以,回調函數丟失 this 綁定是非常常見的。es6 的=>很好的解決了這個問題。
顯式綁定JavaScript 提供的絕大多數函數以及你自 己創建的所有函數都可以使用 call(..) 和 apply(..) 方法。它們會把這個對象綁定到 this,接著在調用函數時指定這個 this。因為你可以直接指定 this 的綁定對象,因此我 們稱之為顯式綁定。
function foo() { console.log( this.a ); } var obj = { a:2 }; foo.call( obj ); // 2
通過 foo.call(..),我們可以在調用 foo 時強制把它的 this 綁定到 obj 上。
如果你傳入了一個原始值(字符串類型、布爾類型或者數字類型)來當作 this 的綁定對 象,這個原始值會被轉換成它的對象形式(也就是 new String(..)、new Boolean(..) 或者 new Number(..))。這通常被稱為“裝箱”。
ps:硬綁定只能執行一次,之后再綁別的都是綁不上去的。
由于硬綁定是一種非常常用的模式,所以在 ES5 中提供了內置的方法 Function.prototype. bind,它的用法如下:
function foo(something) { console.log( this.a, something ); return this.a + something; } var obj = { a:2 }; var bar = foo.bind( obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5
bind(..) 會返回一個硬編碼的新函數,它會把參數設置為 this 的上下文并調用原始函數。
new綁定對于js的new 初學者可能會把它和JAVA類的語言混淆
首先我們重新定義一下 JavaScript 中的“構造函數” 。在 JavaScript 中,構造函數只是一些 使用 new 操作符時被調用的函數。它們并不會屬于某個類,也不會實例化一個類。實際上, 它們甚至都不能說是一種特殊的函數類型,它們只是被 new 操作符調用的普通函數而已。
創建(或者說構造)一個全新的對象。
這個新對象會被執行 [[ 原型 ]] 連接。
這個新對象會綁定到函數調用的 this。
如果函數沒有返回其他對象,那么 new 表達式中的函數調用會自動返回這個新對象。
2涉及到原型鏈的知識,本篇可忽視。
function foo(a) { this.a = a; } var bar = new foo(2); console.log( bar.a ); // 2
使用 new 來調用 foo(..) 時,我們會構造一個新對象并把它綁定到 foo(..) 調用中的 this 上。new 是最后一種可以影響函數調用時 this 綁定行為的方法,我們稱之為 new 綁定。
ps:此處可能看得比較費解,請閱讀《你不知道的js》第二部的關于類與原型鏈的章節,還是比較復雜的,在此就不展開了。此處你可以理解為用函數new 了一個新對象,然后綁定到 函數的this上使用。
在 new 中使用硬綁定函數的一般用處主要目的是預先設置函數的一些參數,這樣在使用 new 進行初始化時就可以只傳入其余的參數。bind(..) 的功能之一就是可以把除了第一個 參數(第一個參數用于綁定 this)之外的其他參數都傳給下層的函數(這種技術稱為“部 分應用”,是“柯里化”的一種)。舉例來說:
function foo(p1,p2) { this.val = p1 + p2; } // 之所以使用 null 是因為在本例中我們并不關心硬綁定的 this 是什么 // 反正使用 new 時 this 會被修改 var bar = foo.bind( null, "p1" ); var baz = new bar( "p2" ); baz.val; // p1p2優先級
我們可以根據優先級來判斷函數在某個調用位置應用的是哪條規則。可以按照下面的 順序來進行判斷:
(數值越小優先級越高)
1 函數是否在 new 中調用(new 綁定)?如果是的話 this 綁定的是新創建的對象。
var bar = new foo()
2 函數是否通過 call、apply(顯式綁定)或者硬綁定調用?如果是的話,this 綁定的是 指定的對象。
var bar = foo.call(obj2)
3 函數是否在某個上下文對象中調用(隱式綁定)?如果是的話,this 綁定的是那個上 下文對象。
var bar = obj1.foo()
4 如果都不是的話,使用默認綁定。如果在嚴格模式下,就綁定到 undefined,否則綁定到 全局對象。
var bar = foo()綁定例外
在某些場景下 this 的綁定行為會出乎意料,你認為應當應用其他綁定規則時,實際上應用 的可能是默認綁定規則。
被忽略的this如果你把 null 或者 undefined 作為 this 的綁定對象傳入 call、apply 或者 bind,這些值 在調用時會被忽略,實際應用的是默認綁定規則.
間接引用另一個需要注意的是,你有可能(有意或者無意地)創建一個函數的“間接引用”,在這 種情況下,調用這個函數會應用默認綁定規則。
function foo() { console.log( this.a ); } var a = 2; var o = { a: 3, foo: foo }; var p = { a: 4 }; o.foo(); // 3 (p.foo = o.foo)(); // 2
賦值表達式 p.foo = o.foo 的返回值是目標函數的引用,因此調用位置是 foo() 而不是 p.foo() 或者 o.foo()。
1
軟綁定用硬綁定之后就無法使用隱式綁定或者顯式綁定來修改 this。
如果可以給默認綁定指定一個全局對象和 undefined 以外的值,那就可以實現和硬綁定相 同的效果,同時保留隱式綁定或者顯式綁定修改 this 的能力。
if (!Function.prototype.softBind) {
Function.prototype.softBind = function(obj) { var fn = this; // 捕獲所有 curried 參數 var curried = [].slice.call( arguments, 1 ); var bound = function() { return fn.apply( (!this || this === (window || global)) ?obj : this curried.concat.apply( curried, arguments ) ); }; bound.prototype = Object.create( fn.prototype ); return bound; }; }關于=>有話說
箭頭函數并不是使用 function 關鍵字定義的,而是使用被稱為“胖箭頭”的操作符 => 定 義的。箭頭函數不使用 this 的四種標準規則,而是根據外層(函數或者全局)作用域來決 定 this。
之前我們有說過setTimeout的this綁定丟失的問題es6和es6以前的解決辦法如下,可以比較著看
es6:
function foo() { setTimeout(() => { // 這里的 this 在此法上繼承自 foo() console.log( this.a ); },100); } var obj = { a:2 }; foo.call( obj ); // 2
es5
function foo() { var self = this; // lexical capture of this setTimeout( function(){ console.log( self.a ); }, 100 ); } var obj = { a: 2 }; foo.call( obj ); // 2
ES6 中的箭頭函數并不會使用四條標準的綁定規則,而是根據當前的詞法作用域來決定 this,具體來說,箭頭函數會繼承外層函數調用的 this 綁定(無論 this 綁定到什么)。這 其實和 ES6 之前代碼中的 self = this 機制一樣。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99184.html
摘要:該模塊實現方案主要包含與這兩個關鍵字,其允許某個模塊對外暴露部分接口并且由其他模塊導入使用。由于在服務端的流行,的模塊形式被不正確地稱為。以上所描述的模塊載入機制均定義在中。 最近一直在搞基礎的東西,弄了一個持續更新的github筆記,可以去看看,誠意之作(本來就是寫給自己看的……)鏈接地址:Front-End-Basics 此篇文章的地址:JavaScript的模塊 基礎筆記...
摘要:正文開始三種本地存儲方式前言網絡早期最大的問題之一是如何管理狀態。這個特點很重要,因為這關系到什么樣的數據適合存儲在中。特點生命周期持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。 最近一直在搞基礎的東西,弄了一個持續更新的github筆記,可以去看看,誠意之作(本來就是寫給自己看的……)鏈接地址:Front-End-Basics 此篇文章的地址:三種本地存儲方式 ...
摘要:我的書簽我的書簽謹慎導入,小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧,讓你少寫不必要的,代碼更優雅一勞永 我的書簽 我的書簽(謹慎導入,小心覆蓋) 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
摘要:我的書簽我的書簽謹慎導入,小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧,讓你少寫不必要的,代碼更優雅一勞永 我的書簽 我的書簽(謹慎導入,小心覆蓋) 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
閱讀 1735·2023-04-25 19:37
閱讀 1298·2021-11-16 11:45
閱讀 2802·2021-10-18 13:30
閱讀 2763·2021-09-29 09:34
閱讀 1616·2019-08-30 15:55
閱讀 3110·2019-08-30 11:10
閱讀 1833·2019-08-29 16:52
閱讀 994·2019-08-29 13:18