摘要:通常尋找調用位置,最重要的是分析調用棧就是為了達到當前執行位置所調用的所有函數,而調用位置就是在當前正在執行的函數的前一個調用中。綁定在中,構造函數只是一些使用操作符時被調用的函數,它們并不屬于哪一類,也不會實例化一個類。
this是什么
每個函數的this是在調用時被綁定的,完全取決于函數的調用位置,
那么調用位置是什么?它是函數在代碼中被調用的位置。
通常尋找調用位置,最重要的是分析調用棧(就是為了達到當前執行位置所調用的所有函數),而調用位置就是在當前正在執行的函數的前一個調用中。
實例:
function baz() { // 當前調用棧是:baz // 因此,當前調用位置是全局作用域 console.log("baz"); bar(); // <-- bar 的調用位置 } function bar() { // 當前調用棧是 baz -> bar // 因此,當前調用位置在 baz 中 console.log("bar"); foo(); // <-- foo 的調用位置 } function foo() { // 當前調用棧是 baz -> bar -> foo // 因此,當前調用位置在 bar 中 console.log("foo"); } baz(); // <-- baz 的調用位置綁定規則 默認綁定
最常用的函數調用類型:獨立函數調用。可以把這條規則看做是無法應用其他規則時的默認規則
舉例:
function foo() { console.log(this.a) } var a = 2 foo() //2
在本例中。函數調用時應用了this的默認綁定,因此this指向全局對象。因為在代碼中,foo()是直接使用不帶任何修飾的函數引用進行調用的,因此只能默認綁定。
隱式綁定調用位置是否有上下文對象,或者說是否被某個對象擁有或者包含。
舉例:
function foo() { console.log(this.a) } var obj = { a: 2, foo: foo } obj.foo() //2
調用位置使用obj上下文來引用函數,隱式綁定規則會把函數調用中的this綁定在這個上下文對象中。
但是要注意隱式丟失:
被隱式綁定的函數會丟失綁定對象,也就是說它會應用默認綁定,從而綁定在全局對象或者undefined中。舉例:
function foo() { console.log(this.a); } var obj = { a: 2, foo: foo }; var bar = obj.foo; // 函數別名! var a = "oops, global"; // a 是全局對象的屬性 bar(); // "oops, global"顯式綁定
使用函數的call()和apply()方法來直接指定this的綁定對象。
當傳入了一個基本類型值來當做this的綁定對象,這個值會被轉換成對應的對象形式,這通常被稱為“裝箱”。
function foo() { console.log(this.a); } var obj = { a: 2, }; var bar = function() { foo.call(obj) } bar() //2 setTimeout(bar, 100) //2 //硬綁定的bar無法改變它的this bar.call(window) //2
這是一種顯式的強制綁定,因此稱為硬綁定
典型應用場景:
創建一個包裹函數,負責接收參數并返回值
function foo(something) { console.log(this.a, something); return this.a + something; } var obj = { a: 2 }; var bar = function () { return foo.apply(obj, arguments); }; var b = bar(3); // 2 3 console.log(b); // 5
創建一個可以重復使用的輔助函數
function foo(something) { console.log(this.a, something); return this.a + something; } // 簡單的輔助綁定函數 function bind(fn, obj) { return function () { return fn.apply(obj, arguments); }; } var obj = { a: 2 }; var bar = bind(foo, obj); var b = bar(3); // 2 3 console.log(b); // 5
由于硬綁定是一種非常常用的模式,所以ES5提供了內置的方法Function.prototype.bind方法。
new綁定在Javascript中,構造函數只是一些使用new操作符時被調用的函數,它們并不屬于哪一類,也不會實例化一個類。實際上,它們甚至都不能說是一種特殊的函數類型,它們只是被new操作符調用的普通函數而已。
使用new來調用函數,或者說發生構造函數調用時,會自動執行下面的操作。
創建(或者說構造)一個全新的對象。
這個新對象會被執行[[prototype]]連接。
這個新對象會綁定到函數調用的this。
如果函數沒有返回其他對象,那么new表達式中的函數調用會自動返回這個新對象。
function foo(a) { this.a = a; } var bar = new foo(2); console.log(bar.a); // 2
使用new來調用foo()時,我們會構造一個新對象并把它綁定到foo()調用中的this上。new是最后一種可以影響函數調用時this綁定行為的方法,我們稱為new綁定。
判斷this函數是否在new中調用(new綁定)?如果是的話this綁定的是新創建的對象。
函數是否通過call、apply(顯式綁定)或者硬綁定調用?this綁定的是指定的對象。
函數是否在某個上下文對象中調用(隱式綁定)?this綁定的是那個上下文對象。
如果都不是的話,使用默認綁定。如果在嚴格模式下,就綁定到undefined,否則綁定到全局對象。
綁定例外被忽略的this
如果你把null或者undefined作為this的綁定對象傳入call,apply或者bind,這些值在調用時會被忽略,實際應用的是默認綁定規則:
function foo() { console.log(this.a) } var a = 2 foo.call(undefined) //2
間接引用
你有可能有意無意的創建了一個函數的“間接引用”,在這種情況下,調用這個函數會應用默認綁定規則。
間接引用最容易在賦值時發生:
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()。
軟綁定
硬綁定會把this強制綁定到指定的對象(除了使用new時),防止函數調用應用默認綁定規則,但是硬綁定大大降低了函數的靈活性,使用硬綁定之后就無法使用隱式綁定或者顯式綁定來修改this,所以我們使用軟綁定,給默認綁定指定一個全局對象和undefined以外的值,就可以實現和硬綁定相同的效果,同時保留隱式綁定或者顯式綁定this的能力。
if(!Function.prototype.softBind) { Funciton.prototype.softBind = function(obj) { var fn = this 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 } }this詞法
ES6中介紹了一種無法使用上面那些規則的特殊函數類型:箭頭函數。
箭頭函數并不是function關鍵字定義的,而是使用=>定義的,箭頭函數不適用this的四種標準規則,而是根據外層(函數或者全局)作用域來決定this的
function foo() { return (a) => { console.log(this.a) } } var obj1 = { a: 2 } var obj2 = { a: 3 } var bar = foo.call(obj1) bar.call(obj2) //2,不是3
箭頭函數最常用域回調函數中,例如事件處理器或者定時器
function foo() { setTimeout(() => { console.log(this.a) }, 100) } var obj = {a: 2} foo.call(obj) // 2
箭頭函數像bind一樣確保函數的this被綁定到指定對象上,此外,其重要性還體現在它用更常見的詞法作用域取代了傳統的this機制。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92617.html
摘要:理解的函數基礎要搞好深入淺出原型使用原型模型,雖然這經常被當作缺點提及,但是只要善于運用,其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法,包括,,。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。 怎樣使用 this 因為本人屬于偽前端,因此文中只看懂了 8 成左右,希望能夠給大家帶來幫助....(據說是阿里的前端妹子寫的) this 的值到底...
摘要:和類在開始時遇到類組件,只是需要有關類的基礎。畢竟,中的條件呈現僅再次顯示大多數是而不是特定的任何內容。 在我的研討會期間,更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法,但也包括三元運算符,語言中的簡寫版本,此對象,JavaScript內置函數(map,reduce,filter)或更常識性的概念,如:可組合性,可重用...
摘要:對象在中,除了數字字符串布爾值這幾個簡單類型外,其他的都是對象。那么在函數對象中,這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數,后面會講解,新創建的對象的原型。這時的函數通常稱為構造函數。。 本文原發于我的個人博客,經多次修改后發到sf上。本文仍在不斷修改中,最新版請訪問個人博客。 最近工作一直在用nodejs做開發,有了nodejs,...
摘要:所以相同點是,在全局范圍內,全局變量終究是屬于老大的。只生效一次引入了。只生效一次在箭頭函數中,與封閉詞法環境的保持一致。我通常把這些原始函數叫做構造函數。在里面你可以嵌套函數,也就是你可以在函數里面定義函數。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...
摘要:原文許多人被中的關鍵字給困擾住了,我想混亂的根源來自人們理所當然地認為中的應該像中的或中的一樣工作。盡管有點難理解,但它的原理并不神秘。在瀏覽器中,全局對象是對象。運算符創建一個新對象并且設置函數中的指向調用函數的新對象。 原文:Understanding the this keyword in JavaScript 許多人被JavaScript中的this關鍵字給困擾住了,我想混亂的...
閱讀 1155·2021-11-24 10:43
閱讀 3112·2021-11-22 09:34
閱讀 3553·2021-10-08 10:04
閱讀 3936·2021-09-23 11:58
閱讀 3120·2019-08-30 15:44
閱讀 489·2019-08-30 13:01
閱讀 1163·2019-08-28 18:07
閱讀 1452·2019-08-26 13:42