摘要:捕獲所有參數綁定當一個函數用作構造函數時使用關鍵字,它的被綁定到正在構造的新對象。使用來調用函數,或者說發生構造函數調用時,會自動執行下面的操作你不知道的創建或者說構造一個全新的對象。在箭頭函數中,與封閉詞法上下文的保持一致。
this 實際上是在函數被調用時發生的綁定,它指向什么完全取決于函數的調用位置(也就是函數的調用方法)。
四條規則:(你不知道的JS) 1. 默認綁定function foo() { console.log( this.a ); } var a = 2; foo(); // 2
無論是否在嚴格模式下,在全局執行上下文中(在任何函數體外部)this 都指代全局對象。(MDN)
在嚴格模式下,this將保持他進入執行上下文時的值,如果 this 沒有被執行上下文(execution context)定義,那它將保持為 undefined。(MDN)
function foo() { "use strict"; console.log( this.a ); } var a = 2; foo(); // TypeError: this is undefined2. 隱式綁定/丟失
當函數作為對象里的方法被調用時,它們的 this 是調用該函數的對象,且綁定只受最靠近的成員引用的影響。(MDN)
//隱式綁定 function foo() { console.log( this.a ); } var obj2 = { a: 42, foo: foo }; var obj1 = { a: 2, obj2: obj2 }; obj1.obj2.foo(); // 42
//隱式丟失 function foo() { console.log( this.a ); } function doFoo(fn) { // fn 其實引用的是 foo fn(); // <-- 調用位置! } var obj = { a: 2, foo: foo }; var a = "oops, global"; // a 是全局對象的屬性 doFoo( obj.foo ); // "oops, global"3. 顯示綁定
如果要想把 this 的值從一個上下文傳到另一個,就要用 call 或者apply 方法。(MDN)
調用f.bind(someObject)會創建一個與f具有相同函數體和作用域的函數,但是在這個新函數中,this將永久地被綁定到了bind的第一個參數,無論這個函數是如何被調用的。
var obj = { count: 0, cool: function coolFn() { if (this.count < 1) { setTimeout( function timer(){ this.count++; // this 是安全的 // 因為 bind(..) console.log( "more awesome" ); }.bind( this ), 100 ); // look, bind()! } } }; obj.cool(); // 更酷了。硬綁定
創建一個包裹函數,傳入所有的參數并返回接收到的所有值。
硬綁定會大大降低函數的靈活性,使用硬綁定之后就無法使用隱式綁定或者顯式綁定來修改 this 。
// 簡單的輔助綁定函數 function bind(fn, obj) { return function() { return fn.apply( obj, arguments ); }; }軟綁定
給默認綁定指定一個全局對象和 undefined 以外的值,那就可以實現和硬綁定相同的效果,同時保留隱式綁定或者顯式綁定修改 this 的能力。
Function.prototype.softBind = function(obj) { var fn = this; var curried = [].slice.call( arguments, 1 );// 捕獲所有 curried 參數 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; };4. new 綁定
當一個函數用作構造函數時(使用new關鍵字),它的this被綁定到正在構造的新對象。(MDN)
使用 new 來調用函數,或者說發生構造函數調用時,會自動執行下面的操作(你不知道的JS)
創建(或者說構造)一個全新的對象。
這個新對象會被執行 [[ 原型 ]] 連接。
這個新對象會綁定到函數調用的 this 。
如果函數沒有返回其他對象,那么 new 表達式中的函數調用會自動返回這個新對象。
function foo(a) { this.a = a; } var bar = new foo(2); console.log( bar.a ); // 2四條規則優先級
new 綁定 > 顯式綁定 > 隱式綁定 > 默認綁定
函數是否在 new 中調用( new 綁定)?如果是的話 this 綁定的是新創建的對象。
var bar = new foo()
函數是否通過 call 、 apply (顯式綁定)或者硬綁定調用?如果是的話, this 綁定的是指定的對象。
另外:如果綁定 null 或者 undefined ,實際應用的是默認綁定規則。
var bar = foo.call(obj2)
函數是否在某個上下文對象中調用(隱式綁定)?如果是的話, this 綁定的是那個上下文對象。
var bar = obj1.foo()
如果都不是的話,使用默認綁定。如果在嚴格模式下,就綁定到 undefined ,否則綁定到全局對象。
var bar = foo()
其中:間接引用函數會應用默認綁定規則
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例外 1. 箭頭函數
箭頭函數不使用 this 的四種標準規則,而是根據外層(函數或者全局)作用域來決定 this 。
在箭頭函數中,this與封閉詞法上下文的this保持一致。(MDN)
箭頭函數會繼承外層函數調用的 this 綁定(無論 this 綁定到什么)。這其實和self = this 機制一樣。
箭頭函數的綁定無法被修改。
setTimeout(function() { console.log(this) //瀏覽器中:window //nodejs中:Timeout實例 }, 0)其他解釋
https://www.zhihu.com/questio...
func(p1, p2) 等價于
func.call(undefined, p1, p2)
obj.child.method(p1, p2) 等價于
obj.child.method.call(obj.child, p1, p2)
如果你傳的 context 就 null 或者 undefined,那么 window 對象就是默認的 context(嚴格模式下默認 context 是 undefined)
例子var number = 50; var obj = { number: 60, getNum: function () { var number = 70; return this.number; } }; alert(obj.getNum()); alert(obj.getNum.call()); alert(obj.getNum.call({number:20}));
參考資料:
深入理解JavaScript系列(13):This? Yes,this!
MDN-this
《你不知道的JS上卷》閱讀小記之setTimeout的this指向問題Script
JavaScript 的 this 原理-阮一峰
如何理解 JavaScript 中的 this 關鍵字?-方應杭-知乎
JS this 相關問題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99348.html
摘要:捕獲所有參數綁定當一個函數用作構造函數時使用關鍵字,它的被綁定到正在構造的新對象。使用來調用函數,或者說發生構造函數調用時,會自動執行下面的操作你不知道的創建或者說構造一個全新的對象。在箭頭函數中,與封閉詞法上下文的保持一致。 this 實際上是在函數被調用時發生的綁定,它指向什么完全取決于函數的調用位置(也就是函數的調用方法)。 四條規則:(你不知道的JS) 1. 默認綁定 func...
摘要:但是,它是用構造器調用來這樣做的。本質是因為讓函數調用變成了構造器調用假設有一個需要繼承的一個類型添加一個屬性如何檢查類繼承自省錯誤方法只能查詢的祖先。 名詞解析 字面量對象字面量 var a = {};數組字面量 var arr = [1,2,3];正則表達式字面量 var reg = /[a-z]/g; 屬性描述符 configurable:fasle是一個單向操作,同時阻止使...
摘要:但是,它是用構造器調用來這樣做的。本質是因為讓函數調用變成了構造器調用假設有一個需要繼承的一個類型添加一個屬性如何檢查類繼承自省錯誤方法只能查詢的祖先。 名詞解析 字面量對象字面量 var a = {};數組字面量 var arr = [1,2,3];正則表達式字面量 var reg = /[a-z]/g; 屬性描述符 configurable:fasle是一個單向操作,同時阻止使...
摘要:但是,它是用構造器調用來這樣做的。本質是因為讓函數調用變成了構造器調用假設有一個需要繼承的一個類型添加一個屬性如何檢查類繼承自省錯誤方法只能查詢的祖先。 名詞解析 字面量對象字面量 var a = {};數組字面量 var arr = [1,2,3];正則表達式字面量 var reg = /[a-z]/g; 屬性描述符 configurable:fasle是一個單向操作,同時阻止使...
閱讀 3070·2023-04-25 16:50
閱讀 904·2021-11-25 09:43
閱讀 3512·2021-09-26 10:11
閱讀 2518·2019-08-26 13:28
閱讀 2531·2019-08-26 13:23
閱讀 2419·2019-08-26 11:53
閱讀 3566·2019-08-23 18:19
閱讀 2987·2019-08-23 16:27