国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

加深對(duì) JavaScript This 的理解

PiscesYE / 2759人閱讀

摘要:使用來(lái)調(diào)用函數(shù),會(huì)自動(dòng)執(zhí)行下面操作創(chuàng)建一個(gè)全新的對(duì)象。所以如果是一個(gè)函數(shù)的話,會(huì)是這樣子的創(chuàng)建一個(gè)新對(duì)象連接新對(duì)象與函數(shù)的原型執(zhí)行函數(shù),改變指向新的對(duì)象所以,在使用來(lái)調(diào)用函數(shù)時(shí)候,我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到函數(shù)調(diào)用中的上。

歡迎來(lái)我的博客閱讀:《加深對(duì) JavaScript This 的理解》

我相信你已經(jīng)看過(guò)很多關(guān)于 JavaScript 的 this 的談?wù)摿?,既然你點(diǎn)進(jìn)來(lái)了,不妨繼續(xù)看下去,看是否能幫你加深對(duì) this 的理解。

最近在看 《You Dont Know JS》 這本書,不得感嘆,就算用了 JS 很多年的老前端來(lái)看這本書,我覺得還是會(huì)有不少的收獲。

其中關(guān)于 this 的講解,更是加深了我對(duì) this 的理解,故整理知識(shí)點(diǎn),再加上自身的理解,以自己的語(yǔ)言來(lái)描述。
對(duì)讀者來(lái)說(shuō),算是二手知識(shí),這本書是開源的,可以到本書的 Github 項(xiàng)目地址學(xué)習(xí)一手的知識(shí)。

首先有一句大家都明白的話,我還是要強(qiáng)調(diào)一遍:
this 是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定,它指向什么完全取決于函數(shù)在哪里被調(diào)用。」

這句話很重要,這是理解 this 原理的基礎(chǔ)。
而在講解 this 之前,先要理解一下作用域的相關(guān)概念。

「詞法作用域」與「動(dòng)態(tài)作用域」

通常來(lái)說(shuō),作用域一共有兩種主要的工作模型。

詞法作用域

動(dòng)態(tài)作用域

詞法作用域是大多數(shù)編程語(yǔ)言所采用的模式,而動(dòng)態(tài)作用域仍有一些編程語(yǔ)言在用,例如 Bash 腳本。
而 JavaScript 就是采用的詞法作用域,也就是在編程階段,作用域就已經(jīng)明確下來(lái)了。

思考下面代碼:

function foo(){
  console.log(a);   // 輸出 2
}

function bar(){
  let a = 3;
  foo();
}

let a = 2;

bar()

因?yàn)?JavaScript 所用的是詞法作用域,自然 foo() 聲明的階段,就已經(jīng)確定了變量 a 的作用域了。

倘若,JavaScript 是采用的動(dòng)態(tài)作用域,foo() 中打印的將是 3

function foo(){
  console.log(a);   // 輸出 3 (不是 2)
}

function bar(){
  let a = 3;
  foo();
}

let a = 2;

bar()

而 JavaScript 的 this 機(jī)制跟動(dòng)態(tài)作用域很相似,是在運(yùn)行時(shí)在被調(diào)用的地方動(dòng)態(tài)綁定的。

this 的四種綁定規(guī)則

在 JavaScript 中,影響 this 指向的綁定規(guī)則有四種:

默認(rèn)綁定

隱式綁定

顯式綁定

new 綁定

默認(rèn)綁定

這是最直接的一種方式,就是不加任何的修飾符直接調(diào)用函數(shù),如:

function foo() {
  console.log(this.a)   // 輸出 a
}

var a = 2;  //  變量聲明到全局對(duì)象中

foo();

使用 var 聲明的變量 a,被綁定到全局對(duì)象中,如果是瀏覽器,則是在 window 對(duì)象。
foo() 調(diào)用時(shí),引用了默認(rèn)綁定,this 指向了全局對(duì)象。

隱式綁定

這種情況會(huì)發(fā)生在調(diào)用位置存在「上下文對(duì)象」的情況,如:

function foo() {
  console.log(this.a);
}

let obj1 = {
  a: 1,
  foo,
};

let obj2 = {
  a: 2,
  foo,
}

obj1.foo();   // 輸出 1
obj2.foo();   // 輸出 2

當(dāng)函數(shù)調(diào)用的時(shí)候,擁有上下文對(duì)象的時(shí)候,this 會(huì)被綁定到該上下文對(duì)象。
正如上面的代碼,
obj1.foo() 被調(diào)用時(shí),this 綁定到了 obj1,
obj2.foo() 被調(diào)用時(shí),this 綁定到了 obj2

顯式綁定

這種就是使用 Function.prototype 中的三個(gè)方法 call(), apply(), bind() 了。
這三個(gè)函數(shù),都可以改變函數(shù)的 this 指向到指定的對(duì)象,
不同之處在于,call()apply() 是立即執(zhí)行函數(shù),并且接受的參數(shù)的形式不同:

call(this, arg1, arg2, ...)

apply(this, [arg1, arg2, ...])

bind() 則是創(chuàng)建一個(gè)新的包裝函數(shù),并且返回,而不是立刻執(zhí)行。

bind(this, arg1, arg2, ...)

apply() 接收參數(shù)的形式,有助于函數(shù)嵌套函數(shù)的時(shí)候,把 arguments 變量傳遞到下一層函數(shù)中。

思考下面代碼:

function foo() {
  console.log(this.a);  // 輸出 1
  bar.apply({a: 2}, arguments);
}

function bar(b) {
  console.log(this.a + b);  // 輸出 5
}

var a = 1;
foo(3);

上面代碼中, foo() 內(nèi)部的 this 遵循默認(rèn)綁定規(guī)則,綁定到全局變量中。
bar() 在調(diào)用的時(shí)候,調(diào)用了 apply() 函數(shù),把 this 綁定到了一個(gè)新的對(duì)象中 {a: 2},而且原封不動(dòng)的接收 foo() 接收的函數(shù)。

new 綁定

最后一種,則是使用 new 操作符會(huì)產(chǎn)生 this 的綁定。
在理解 new 操作符對(duì) this 的影響,首先要理解 new 的原理。
在 JavaScript 中,new 操作符并不像其他面向?qū)ο蟮恼Z(yǔ)言一樣,而是一種模擬出來(lái)的機(jī)制。
在 JavaScript 中,所有的函數(shù)都可以被 new 調(diào)用,這時(shí)候這個(gè)函數(shù)一般會(huì)被稱為「構(gòu)造函數(shù)」,實(shí)際上并不存在所謂「構(gòu)造函數(shù)」,更確切的理解應(yīng)該是對(duì)于函數(shù)的「構(gòu)造調(diào)用」。

使用 new 來(lái)調(diào)用函數(shù),會(huì)自動(dòng)執(zhí)行下面操作:

創(chuàng)建一個(gè)全新的對(duì)象。

這個(gè)新對(duì)象會(huì)被執(zhí)行 [[Prototype]] 連接。

這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的 this。

如果函數(shù)沒有返回其他對(duì)象,那么 new 表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。

所以如果 new 是一個(gè)函數(shù)的話,會(huì)是這樣子的:

function New(Constructor, ...args){
    let obj = {};   // 創(chuàng)建一個(gè)新對(duì)象
    Object.setPrototypeOf(obj, Constructor.prototype);  // 連接新對(duì)象與函數(shù)的原型
    return Constructor.apply(obj, args) || obj;   // 執(zhí)行函數(shù),改變 this 指向新的對(duì)象
}

function Foo(a){
    this.a = a;
}

New(Foo, 1);  // Foo { a: 1 }

所以,在使用 new 來(lái)調(diào)用函數(shù)時(shí)候,我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到函數(shù)調(diào)用中的 this 上。

優(yōu)先級(jí)

如果一個(gè)位置發(fā)生了多條改變 this 的規(guī)則,那么優(yōu)先級(jí)是如何的呢?

看幾段代碼:

// 顯式綁定 > 隱式綁定
function foo() {
    console.log(this.a);
}

let obj1 = {
    a: 2,
    foo,
}

obj1.foo();     // 輸出 2
obj1.foo.call({a: 1});      // 輸出 1

這說(shuō)明「顯式綁定」的優(yōu)先級(jí)大于「隱式綁定」

// new 綁定 > 顯式綁定
function foo(a) {
    this.a = a;
}

let obj1 = {};

let bar = foo.bind(obj1);
bar(2);
console.log(obj1); // 輸出 {a:2}

let obj2 = new bar(3);
console.log(obj1); // 輸出 {a:2}
console.log(obj2); // 輸出 foo { a: 3 }

這說(shuō)明「new 綁定」的優(yōu)先級(jí)大于「顯式綁定」
而「默認(rèn)綁定」,毫無(wú)疑問(wèn)是優(yōu)先級(jí)最低的。
所以優(yōu)先級(jí)順序?yàn)椋?/p>

「new 綁定」 > 「顯式綁定」 > 「隱式綁定」 > 「默認(rèn)綁定?!?/strong>

所以,this 到底是什么

this 并不是在編寫的時(shí)候綁定的,而是在運(yùn)行時(shí)綁定的。它的上下文取決于函數(shù)調(diào)用時(shí)的各種條件。
this 的綁定和函數(shù)聲明的位置沒有任何關(guān)系,只取決于函數(shù)的調(diào)用方式。
當(dāng)一個(gè)函數(shù)被調(diào)用時(shí),會(huì)創(chuàng)建一個(gè)「執(zhí)行上下文」,這個(gè)上下文會(huì)包含函數(shù)在哪里被調(diào)用(調(diào)用棧)、函數(shù)的調(diào)用方式、傳入的參數(shù)等信息。this 就是這個(gè)記錄的一個(gè)屬性,會(huì)在函數(shù)執(zhí)行的過(guò)程中用到。

參考

《You Dont Know JS》- this & Object Prototypes

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/84029.html

相關(guān)文章

  • JavaScript This綁定方式導(dǎo)圖

    摘要:本文是對(duì)加深對(duì)的理解一文的導(dǎo)圖版翻譯中的是一個(gè)捉摸不透的東西,它很喜歡變化,很詭異。寫在后面的幾種綁定規(guī)則,歸根結(jié)底,的套路就是關(guān)于幾種模式的等價(jià)變換形式,知乎上面有大神解答,猛戳這最后是全圖附上思維導(dǎo)圖的下載鏈接去有道云筆記下載 本文是對(duì)《加深對(duì) JavaScript This 的理解》一文的導(dǎo)圖版翻譯 JS中的this是一個(gè)捉摸不透的東西,它很喜歡變化,很詭異。擁抱變化,接收詭異...

    lbool 評(píng)論0 收藏0
  • Javascript Context和Scope學(xué)習(xí)總結(jié)02【轉(zhuǎn)自cnblogsJKhuang】

    摘要:總結(jié)本博文通過(guò)介紹執(zhí)行上下文和作用域的異同的使用以及變量對(duì)象,讓我們加深對(duì)語(yǔ)言特性的理解。首先,我們介紹了執(zhí)行上下文和的的關(guān)系,并且執(zhí)行上下文是具有對(duì)象的然后,介紹了作用域使變量在作用域范圍內(nèi)可見,并且作用域是基于函數(shù)的。 接上一篇Javascript Context和Scope的學(xué)習(xí)總結(jié)01【轉(zhuǎn)自cnblogs的JKhuang】(可能是segmentfault對(duì)單篇文章發(fā)布字?jǐn)?shù)有限制...

    Aldous 評(píng)論0 收藏0
  • JavaScript中常用設(shè)計(jì)模式

    摘要:本文已同步到中常見的設(shè)計(jì)模式如果感覺寫的還可以,就給個(gè)小星星吧,歡迎和收藏。本文中關(guān)于各種設(shè)計(jì)模式定義都是引用書中的,部分引用自百度百科已標(biāo)出。下面把我整理出的常用設(shè)計(jì)模式按類型做個(gè)表格整理。 本文已同步到Github JavaScript中常見的設(shè)計(jì)模式,如果感覺寫的還可以,就給個(gè)小星星吧,歡迎star和收藏。 最近拜讀了曾探大神的《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》,真是醍醐...

    NSFish 評(píng)論0 收藏0
  • 從一道題解讀JS原型鏈

    摘要:明確重要的一點(diǎn),這個(gè)連接存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間,而不是存在于實(shí)例與構(gòu)造函數(shù)之間。相當(dāng)于重新創(chuàng)建了,指向構(gòu)造函數(shù)這一部分相當(dāng)于是重新在原型對(duì)象中創(chuàng)建了一個(gè)屬性,同時(shí)指向構(gòu)造函數(shù)。 之前對(duì)js原型和原型鏈的理解一直覺得很繞,繞來(lái)繞去的,在看了《JavaScript高級(jí)程序設(shè)計(jì)》和各種文章之后,終于對(duì)原型和原型鏈有了初步的了解,可是還是沒有很深入的了解,今次通過(guò)以前段時(shí)間遇到的一...

    harryhappy 評(píng)論0 收藏0
  • JavaScript高級(jí)程序設(shè)計(jì)——原型和原型鏈

    摘要:但是確是一個(gè)特例它的指向的是至于為什么簡(jiǎn)單解釋下所有的構(gòu)造器都來(lái)自于,甚至包括根構(gòu)造器及自身。所有構(gòu)造器都繼承了的屬性及方法。如知道了所有構(gòu)造器含內(nèi)置及自定義的都是,的是誰(shuí)呢這說(shuō)明所有的構(gòu)造器也都是一個(gè)普通對(duì)象,可以給構(gòu)造器添加刪除屬性等。 showImg(https://segmentfault.com/img/remote/1460000009446154); 前言 此文章為加深對(duì)...

    My_Oh_My 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

PiscesYE

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<