摘要:的功能之一就是可以把除了第一個參數(shù)第一個參數(shù)用于綁定之外的其他參數(shù)都傳給下層的函數(shù)這種技術(shù)稱為部分應(yīng)用,是柯里化的一種。
GitHub地址:https://github.com/SimonZhang...
隱式綁定this的指向問題應(yīng)該是讓每一個前端er都頭疼的問題,我也一樣,曾經(jīng)遇到甚至都是一頓亂猜。最近在研讀一些書籍如《你不知道的JavaScript》和《JavaScript語言精粹與編程實(shí)踐》,讓我對this的問題豁然開朗。故寫下此篇文章,分享一下我的心得。
關(guān)于this,一般來說,誰調(diào)用了方法,該方法的this就指向誰,如:
function foo(){ console.log(this.a) } var a = 3; var obj = { a: 2, foo: foo }; obj.foo(); // 輸出2,因?yàn)槭莖bj調(diào)用的foo,所以foo的this指向了obj,而obj.a = 2
如果存在多次調(diào)用,對象屬性引用鏈只有上一層或者說最后一層在調(diào)用位置中起作用,如:
function foo() { console.log( this.a ) } var obj2 = { a: 42, foo: foo } var obj1 = { a: 2, obj2: obj2 } obj1.obj2.foo(); // 42隱式丟失
一個最常見的this綁定問題就是被隱式綁定的函數(shù)會丟失綁定對象,也就是說他回應(yīng)用默認(rèn)綁定,從而把this綁定到全局對象或者undefined上,取決于是否是嚴(yán)格模式。
function foo() { console.log( this.a ) } var obj1 = { a: 2, foo: foo } var bar = obj1.foo; // 函數(shù)別名! var a = "oops, global"; // a是全局對象的屬性 bar(); // "oops, global"
雖然bar是obj.foo的一個引用,但是實(shí)際上,它引用的是foo函數(shù)本身,因此此時的bar()其實(shí)是一個不帶任何修飾的函數(shù)調(diào)用,因此應(yīng)用了默認(rèn)綁定
一個更微妙、更常見并且更出乎意料的情況發(fā)生在傳入回調(diào)函數(shù)時:
function foo() { console.log( this.a ) } function doFoo( fn ){ // fn 其實(shí)引用的是 foo fn(); // <-- 調(diào)用位置! } var obj = { a: 2, foo: foo } var a = "oops, global"; // a是全局對象的屬性 doFoo( obj.foo ); // "oops, global"
參數(shù)傳遞其實(shí)就是一種隱式賦值,因此我們傳入函數(shù)時也會被隱式賦值,所以結(jié)果和上一個例子一樣,如果把函數(shù)傳入語言內(nèi)置的函數(shù)而不是傳入自己聲明的函數(shù)(如setTimeout等),結(jié)果也是一樣的
顯式綁定簡單的說,就是指定this,如:call、apply、bind、new綁定等
硬綁定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
這里簡單做一下解釋:
在bar函數(shù)中,foo使用apply函數(shù)綁定了obj,也就是說foo中的this將指向obj,與此同時,使用arguments(不限制傳入?yún)?shù)的數(shù)量)作為參數(shù)傳入foo函數(shù)中;所以在運(yùn)行bar(3)的時候,首先輸出obj.a也就是2和傳入的3,然后foo返回了兩者的相加值,所以b的值為5
同樣,本例也可以使用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); // 5new綁定
在傳統(tǒng)面向類的語言中,使用new初始化類的時候會調(diào)用類中的構(gòu)造函數(shù),但是JS中new的機(jī)制實(shí)際上和面向類和語言完全不同。
使用new來調(diào)用函數(shù),或者說發(fā)生構(gòu)造函數(shù)調(diào)用時,會自動執(zhí)行下面的操作:
創(chuàng)建(或者說構(gòu)造)一個全新的對象
這個新對象會被執(zhí)行[[Prototype]]連接
這個新對象會綁定到函數(shù)調(diào)用的this
如果函數(shù)沒有返回其他對象,那么new表達(dá)式中的函數(shù)會自動返回這個新對象
如:
function foo(a){ this.a = a } var bar = new foo(2); console.log(bar.a); // 2
使用new來調(diào)用foo(...)時,我們會構(gòu)造一個新對象并把它綁定到foo(...)調(diào)用中的this上。new是最后一種可以影響函數(shù)調(diào)用時this綁定行為的方法,我們稱之為new綁定。
this的優(yōu)先級毫無疑問,默認(rèn)綁定的優(yōu)先級是四條規(guī)則中最低的,所以我們可以先不考慮它。
隱式綁定和顯式綁定哪個優(yōu)先級更高?我們來測試一下:
function foo(a){ console.log(this.a) } var obj1 = { a: 2, foo: foo } var obj2 = { a: 3, foo: foo } obj1.foo(); // 2 obj2.foo(); // 3 obj1.foo.call(obj2); // 3 obj2.foo.call(obj1); // 2
可以看到,顯式綁定優(yōu)先級更高,也就是說在判斷時應(yīng)當(dāng)先考慮是否可以存在顯式綁定。
現(xiàn)在我們要搞清楚new綁定和隱式綁定的優(yōu)先級誰高誰低 :
function foo(a){ this.a = something } var obj1 = { foo: foo } var obj2 = {} obj1.foo(2); console.log(obj1.a); // 2 obj1.foo.call(obj2,3); console.log(obj2.a); // 3 var bar = new obj1.foo(4) console.log(obj1.a); // 2 console.log(bar.a); // 4
可以看到new綁定比隱式綁定優(yōu)先級高。但是new綁定和顯式綁定誰的優(yōu)先級更高呢?
function foo(something){ this.a = something } var obj1 = {} var bar = foo.bind(obj1); bar(2); console.log(obj1.a); // 2 var baz = new bar(3); console.log(obj1.a); // 2 console.log(baz.a); // 3
可以看到,new綁定修改了硬綁定中的this,所以new綁定的優(yōu)先級比顯式綁定更高。
之所以要在new中使用硬綁定函數(shù),主要目的是預(yù)先設(shè)置函數(shù)的一些參數(shù),這樣在使用new進(jìn)行初始化時就可以只傳入其余的參數(shù)。bind(...)的功能之一就是可以把除了第一個參數(shù)(第一個參數(shù)用于綁定this)之外的其他參數(shù)都傳給下層的函數(shù)(這種技術(shù)稱為“部分應(yīng)用”,是“柯里化”的一種)。舉例來說:
function foo(p1,p2){ this.val = p1 + p2; } // 之所以使用null是因?yàn)樵诒纠形覀儾⒉魂P(guān)心硬綁定的this是什么 // 反正使用new時this會被修改 var bar = foo.bind(null,"p1"); var baz = new bar("p2"); baz.val; // p1p2 }
This在箭頭函數(shù)中的應(yīng)用柯里化:在直覺上,柯里化聲稱“如果你固定某些參數(shù),你將得到接受余下參數(shù)的一個函數(shù)”。所以對于有兩個變量的函數(shù)yx,如果固定了 y = 2,則得到有一個變量的函數(shù) 2x
箭頭函數(shù)不使用this的四種標(biāo)準(zhǔn)規(guī)則,而是根據(jù)外層(函數(shù)或者全局)作用域來決定this。
我們來看一下箭頭函數(shù)的詞法作用域:
function foo() { // 返回一個箭頭函數(shù) return (a) => { // this繼承自foo() console.log(this.a) }; } var obj1 = { a: 2 }; var obj2 = { a: 3 }; var bar = foo.call(obj1); bar.call(obj2); // 2, 不是3!
foo()內(nèi)部創(chuàng)建的箭頭函數(shù)會捕獲調(diào)用時foo()的this。由于foo()的this綁定到obj1,bar(引用箭頭函數(shù))的this也會綁定到obj1,箭頭函數(shù)的綁定無法被修改。(new也不行!)
總結(jié)如果要判斷一個運(yùn)行中的函數(shù)的this綁定,就需要找到這個函數(shù)的直接調(diào)用位置。找到之后就可以順序應(yīng)用下面這四條規(guī)則來判斷this的綁定對象。
由new調(diào)用?綁定到新創(chuàng)建的對象。
由call或者apply(或者bind)調(diào)用?綁定到指定的對象。
由上下文對象調(diào)用?綁定到那個上下文對象。
默認(rèn):在嚴(yán)格模式下綁定到undefined,否則綁定到全局對象。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/82729.html
摘要:函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言,然而,近幾年,函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。因此,...
摘要:忍者級別的函數(shù)操作對于什么是匿名函數(shù),這里就不做過多介紹了。我們需要知道的是,對于而言,匿名函數(shù)是一個很重要且具有邏輯性的特性。通常,匿名函數(shù)的使用情況是創(chuàng)建一個供以后使用的函數(shù)。 JS 中的遞歸 遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加 這一次,徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制,如果...
摘要:記錄下我遇到的面試題,都有大佬分享過,附上各個大佬的文章,總結(jié)出其中的主要思想即可。推薦黑金團(tuán)隊(duì)的文章前端緩存最佳實(shí)踐推薦名揚(yáng)的文章淺解強(qiáng)緩存和協(xié)商緩存狀態(tài)碼重點(diǎn)是等,要給面試官介紹清楚。前言 在這互聯(lián)網(wǎng)的寒冬臘月時期,雖說過了金三銀四,但依舊在招人不斷。更偏向于招聘高級開發(fā)工程師。本人在這期間求職,去了幾家創(chuàng)業(yè),小廠,大廠廝殺了一番,也得到了自己滿意的offer。 整理一下自己還記得的面試...
摘要:作者今年大三,在春招過程中參加了多家大公司的面試后,拿到了騰訊的前端實(shí)習(xí),在這里做一些總結(jié),希望給還未參加過實(shí)習(xí)面試的同學(xué)一些幫助。在之后的面試時就更加從容一些了。 作者今年大三,在春招過程中參加了多家大公司的面試后,拿到了騰訊的前端實(shí)習(xí) offer,在這里做一些總結(jié),希望給還未參加過實(shí)習(xí)面試的同學(xué)一些幫助。 一、簡歷的準(zhǔn)備 簡歷制作是很重要的一個環(huán)節(jié),一份好的簡歷會給面試官留下很不錯...
摘要:然而學(xué)習(xí)布局,你只要學(xué)習(xí)幾個手機(jī)端頁面自適應(yīng)解決方案布局進(jìn)階版附源碼示例前端掘金一年前筆者寫了一篇手機(jī)端頁面自適應(yīng)解決方案布局,意外受到很多朋友的關(guān)注和喜歡。 十分鐘學(xué)會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具,fiddle英文中有欺騙、偽造之意,與wireshark相比它更輕量級,上手簡單,因?yàn)橹荒茏ttp和https數(shù)據(jù)...
閱讀 1496·2023-04-26 01:28
閱讀 3315·2021-11-22 13:53
閱讀 1420·2021-09-04 16:40
閱讀 3189·2019-08-30 15:55
閱讀 2677·2019-08-30 15:54
閱讀 2489·2019-08-30 13:47
閱讀 3368·2019-08-30 11:27
閱讀 1146·2019-08-29 13:21