欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript?中的?this?綁定規(guī)則詳解

 更新時(shí)間:2023年02月14日 08:34:37   作者:CoderBin  
這篇文章主要介紹了JavaScript?中的?this?綁定規(guī)則詳解的相關(guān)資料,需要的朋友可以參考下

前言

大家好,我是 CoderBin,在JavaScript中,this是一個(gè)非常重要的概念,屬于進(jìn)階知識(shí),不管是在面試還是日常開發(fā)中都是非常常用的。所以本次給大家總結(jié)了關(guān)于this的綁定規(guī)則,來幫助大家更加深入的掌握這個(gè)知識(shí)點(diǎn)。希望對(duì)大家有所幫助,謝謝。

創(chuàng)作不易,你們的點(diǎn)贊收藏留言就是我最大的動(dòng)力

如果文中有不對(duì)、疑惑的地方,歡迎各位小伙伴們?cè)谠u(píng)論區(qū)留言指正

1. 關(guān)于 this 的簡單介紹

this 關(guān)鍵字是 JavaScript 中最復(fù)雜的機(jī)制之一。它是一個(gè)很特別的關(guān)鍵字,被自動(dòng)定義在所有函數(shù)的作用域中。但是即使是非常有經(jīng)驗(yàn)的 JavaScript 開發(fā)者也很難說清它到底指向什么。

任何足夠先進(jìn)的技術(shù)都和魔法無異。— Arthur C. Clarke

實(shí)際上,JavaScript 中 this 的機(jī)制并沒有那么先進(jìn),但是開發(fā)者往往會(huì)把理解過程復(fù)雜化, 毫無疑問,在缺乏清晰認(rèn)識(shí)的情況下,this 對(duì)你來說完全就是一種魔法。

2. 為什么使用 this?

const obj = {
  title: '華為云社區(qū)',
  reading() {
    console.log(this.title + ',一個(gè)幫助開發(fā)者成長的社區(qū)');
  }
}

this 提供了一種更優(yōu)雅的方式來隱式“傳遞”一個(gè)對(duì)象引用,因此可以將 API 設(shè)計(jì)得更加簡潔并且易于復(fù)用。

隨著你的使用模式越來越復(fù)雜,顯式傳遞上下文對(duì)象會(huì)讓代碼變得越來越混亂,使用 this 則不會(huì)這樣。當(dāng)我們介紹對(duì)象和原型時(shí),你就會(huì)明白函數(shù)可以自動(dòng)引用合適的上下文對(duì)象有多重要

3. 關(guān)于this 的常見的誤解

人們很容易把 this 理解成指向函數(shù)自身,JavaScript 的新手開發(fā)者通常會(huì)認(rèn)為,既然把函數(shù)看作一個(gè)對(duì)象(JavaScript 中的所有函數(shù) 都是對(duì)象),那就可以在調(diào)用函數(shù)時(shí)存儲(chǔ)狀態(tài)(屬性的值)。但結(jié)果通常讓他們大吃一驚,例如下面這段代碼

function foo() {
  // 讓新添加的 count + 1
  this.count++
}

// 向函數(shù)對(duì)象 foo 添加了一個(gè)屬性 count
foo.count = 0

foo()

console.log(foo.count);   // 0 

這段代碼看起來沒什么問題,但請(qǐng)把目光聚焦到最后一行,輸出 foo.count 的結(jié)果竟然是0 ?!

疑問:為什么會(huì)這樣?我明明向函數(shù)對(duì)象 foo 添加了一個(gè)屬性 count,并且函數(shù)內(nèi)部也寫了 this.count++,為什么最后還是0呢?

解答:因?yàn)?code>this.count 中此時(shí)的 this,根本不是指向 foo 函數(shù)自身,而是指向全局 window。再細(xì)心一點(diǎn),我們可以發(fā)現(xiàn),在 window 身上,被添加了個(gè) count 屬性,值為 NaN。
(為什么 this 指向 window 后面會(huì)闡述)


所以,單純的把 this 理解為指向函數(shù)自身是錯(cuò)誤的。

this 實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定,它指向什么完全取決于函數(shù)在哪里被調(diào)用。

4. this 的綁定規(guī)則

我們來看看在函數(shù)的執(zhí)行過程中調(diào)用位置如何決定 this 的綁定對(duì)象。

找到調(diào)用位置,然后判斷需要應(yīng)用下面四條規(guī)則中的哪一條。我首先會(huì)分別解釋 這四條規(guī)則,然后解釋多條規(guī)則都可用時(shí)它們的優(yōu)先級(jí)如何排列。

4.1 默認(rèn)綁定

首先要介紹的是最常用的函數(shù)調(diào)用類型:獨(dú)立函數(shù)調(diào)用??梢园堰@條規(guī)則看作是無法應(yīng)用其他規(guī)則時(shí)的默認(rèn)規(guī)則。

function foo() {
  console.log(this.a)
}
var a = 2
foo() // 2
  • 我們可以看到當(dāng)調(diào)用 foo() 時(shí),this.a 被解析成了全局變量 a。為什么?因?yàn)樵诒纠校?strong>函數(shù)調(diào)用時(shí)應(yīng)用了 this 的默認(rèn)綁定,因此 this 指向全局對(duì)象。

  • 那么我們?cè)趺粗肋@里應(yīng)用了默認(rèn)綁定呢?可以通過分析調(diào)用位置來看看 foo() 是如何調(diào) 用的。在代碼中,foo() 是直接使用不帶任何修飾的函數(shù)引用進(jìn)行調(diào)用的,因此只能使用默認(rèn)綁定,無法應(yīng)用其他規(guī)則

  • 這條規(guī)則也解釋了上面 count 的代碼中,為什么函數(shù)里面的this指向了window,因?yàn)?nbsp;foo 是屬于獨(dú)立函數(shù)調(diào)用的,觸發(fā)了默認(rèn)綁定,從而指向全局window。(瀏覽器中全局是 window對(duì)象,node 中是空對(duì)象{})

  • 屬于默認(rèn)綁定規(guī)則的還有:

    • 函數(shù)調(diào)用鏈(一個(gè)函數(shù)又調(diào)用另外一個(gè)函數(shù))
    • 將函數(shù)作為參數(shù),傳入到另一個(gè)函數(shù)中

(擴(kuò)展:如果使用嚴(yán)格模式(strict mode),則不能將全局對(duì)象用于默認(rèn)綁定,因此 this 會(huì)綁定到 undefined:)

結(jié)論:默認(rèn)綁定的 this,都指向全局。

4.2 隱式綁定

4.2.1 一般的對(duì)象調(diào)用

這一條需要考慮的規(guī)則是調(diào)用位置是否有上下文對(duì)象,或者說是通過某個(gè)對(duì)象發(fā)起的函數(shù)調(diào)用

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

const obj = {
  a: 2,
  foo: foo
}

// 通過 obj 對(duì)象調(diào)用 foo 函數(shù)
obj.foo() // 2
  • 調(diào)用位置會(huì)使用 obj 上下文來引用函數(shù),因此你可以說函數(shù)被調(diào)用時(shí) obj 對(duì)象“擁 有”或者“包含”它。
  • foo() 被調(diào)用時(shí),它的前面確實(shí)加上了對(duì) obj 的引用。當(dāng)函數(shù)引用有上下文對(duì)象時(shí),隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的 this 綁定到這個(gè)上下文對(duì)象。因?yàn)檎{(diào)用 foo() 時(shí) this 被綁定到 obj 上,因此 this.a 和 obj.a 是一樣的。
4.2.2 對(duì)象屬性引用鏈

對(duì)象屬性引用鏈中只有上一層或者說最后一層在調(diào)用位置中起作用。舉例來說:

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

var obj2 = {
  a: 2,
  foo: foo
}

var obj1 = {
  a: 1,
  obj2: obj2
}

obj1.obj2.foo() // 2

最終 this 指向的是 obj2

4.2.3 隱式丟失

一個(gè)最常見的 this 綁定問題就是被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象,也就是說它會(huì)應(yīng)用默認(rèn)綁定,從而把 this 綁定到全局對(duì)象或者 undefined 上(取決于是否是嚴(yán)格模式)

第一種情況:將對(duì)象里的函數(shù)賦值給一個(gè)變量

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

var obj = {
  a: 2,
  foo: foo
}

var bar = obj.foo // 函數(shù)別名!

var a = 'global' // a 是全局對(duì)象的屬性
bar() // "global"

雖然 bar 是 obj.foo 的一個(gè)引用,但是實(shí)際上,它引用的是 foo 函數(shù)本身,因此此時(shí)的 bar() 其實(shí)是一個(gè)不帶任何修飾的函數(shù)調(diào)用,因此應(yīng)用了默認(rèn)綁定。

第二種情況:傳入回調(diào)函數(shù)時(shí)

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

function doFoo(fn) {
  // fn 其實(shí)引用的是 foo
  fn() // <-- 調(diào)用位置!
}

var obj = {
  a: 2,
  foo: foo
}

var a = 'global'  // a 是全局對(duì)象的屬性
doFoo(obj.foo)    // "global"

參數(shù)傳遞其實(shí)就是一種隱式賦值,因此我們傳入函數(shù)時(shí)也會(huì)被隱式賦值,所以結(jié)果和上一 個(gè)例子一樣。

結(jié)論:隱式綁定的 this,指向調(diào)用函數(shù)的上下文對(duì)象。

4.3 顯式綁定

4.3.1 使用 call(…) 和 apply(…)

如果我們不想在對(duì)象內(nèi)部包含函數(shù)引用,而想在某個(gè)對(duì)象上強(qiáng)制調(diào)用函數(shù),該怎么做呢?
可以使用函數(shù)的 call(..) 和 apply(..) 方法

  • JavaScript 提供的絕大多數(shù)函數(shù)以及你自 己創(chuàng)建的所有函數(shù)都可以使用 call(..) 和 apply(..) 方法。

這兩個(gè)方法是如何工作的呢?它們的第一個(gè)參數(shù)是一個(gè)對(duì)象,是給 this 準(zhǔn)備的,接著在調(diào)用函數(shù)時(shí)將其綁定到 this。因?yàn)槟憧梢灾苯又付?this 的綁定對(duì)象,因此我們稱之為顯式綁定。 思考以下代碼:

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

var obj = {
  a: 2
}

foo.call(obj) // 2
  • 通過 foo.call(..),我們可以在調(diào)用 foo 時(shí)強(qiáng)制把它的 this 綁定到 obj 上。
  • 如果你傳入了一個(gè)原始值(字符串類型、布爾類型或者數(shù)字類型)來當(dāng)作 this 的綁定對(duì) 象,這個(gè)原始值會(huì)被轉(zhuǎn)換成它的對(duì)象形式(也就是 new String(…)、new Boolean(…) 或者 new Number(…))。這通常被稱為“裝箱”。

從 this 綁定的角度來說,call(…) 和 apply(…) 是一樣的,它們的區(qū)別體現(xiàn)在參數(shù)上:第一個(gè)參數(shù)是相同的,后面的參數(shù),call為參數(shù)列表,apply為數(shù)組,他們內(nèi)部的實(shí)現(xiàn)原理也不難理解,詳細(xì)請(qǐng)看以下兩個(gè)手寫方法

4.3.2 硬綁定(一個(gè)函數(shù)總是顯示的綁定到一個(gè)對(duì)象上)

由于硬綁定是一種非常常用的模式,所以 ES5 提供了內(nèi)置的方法 Function.prototype.bind, 它的用法如下

function foo(num) {
  console.log(this.a, num)
  return this.a + num
}

var obj = {
  a: 2
}

// 調(diào)用 bind() 方法,返回一個(gè)函數(shù)
var bar = foo.bind(obj)

var b = bar(3) // 2 3

console.log(b) // 5

調(diào)用 bind(...) 方法,會(huì)返回一個(gè)新函數(shù),那么這個(gè)新函數(shù)的 this,永遠(yuǎn)指向我們傳入的obj對(duì)象

關(guān)于 bind 方法的簡單實(shí)現(xiàn),可以前往: 手寫 bind 方法,超級(jí)詳細(xì) ???

4.3.3 API調(diào)用的 “上下文(內(nèi)置函數(shù))

第三方庫的許多函數(shù),以及 JavaScript 語言和宿主環(huán)境中許多新的內(nèi)置函數(shù),都提供了一個(gè)可選的參數(shù),通常被稱為“上下文”(context),其作用和 bind(..) 一樣,確保你的回調(diào)函數(shù)使用指定的 this。例如:

(1)數(shù)組方法 forEach()

function foo(el) {
  console.log(el, this.id)
}

var obj = {
  id: 'bin'
};

[1, 2, 3].forEach(foo, obj)

// 輸出:
// 1 bin 
// 2 bin 
// 3 bin
  • 調(diào)用 foo(…) 時(shí)把 this 綁定到 obj 身上

(2)setTimeout()

setTimeout(function() {
  console.log(this); // window
}, 1000);
  • 在使用 setTimeout 時(shí)會(huì)傳入一個(gè)回調(diào)函數(shù),而這個(gè)回調(diào)函數(shù)中的this一般指向 window,這個(gè)和 setTimeout 源碼的內(nèi)部調(diào)用有關(guān),這個(gè)不再展開贅述

結(jié)論:顯式綁定的 this,指向我們指定的綁定對(duì)象。

4.4 new 綁定

在 JavaScript 中,普通函數(shù)可以使用 new 操作符去調(diào)用,此時(shí)的普通函數(shù)則被稱為 “構(gòu)造函數(shù)”。沒錯(cuò),凡是由 new 操作符調(diào)用的函數(shù),都稱為 “構(gòu)造函數(shù)”

使用 new 來調(diào)用函數(shù),或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí),會(huì)自動(dòng)執(zhí)行下面的操作。

  • 在內(nèi)存中創(chuàng)建一個(gè)新對(duì)象。
  • 這個(gè)新對(duì)象內(nèi)部的[[Prototype]] 特性被賦值為構(gòu)造函數(shù)的 prototype 屬性。
  • 構(gòu)造函數(shù)內(nèi)部的this 被賦值為這個(gè)新對(duì)象(即this 指向新對(duì)象)。
  • 執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼(給新對(duì)象添加屬性)。
  • 如果構(gòu)造函數(shù)返回非空對(duì)象,則返回該對(duì)象;否則,返回剛創(chuàng)建的新對(duì)象。
function foo(a) {
  this.a = a
}

var bar = new foo(2)

console.log(bar.a) // 2

使用 new 來調(diào)用 foo(..) 時(shí),我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到 foo(..) 調(diào)用中的 this 上。new 是最后一種可以影響函數(shù)調(diào)用時(shí) this 綁定行為的方法,我們稱之為 new 綁定

結(jié)論:new 綁定的 this,都指向通過 new 調(diào)用的函數(shù)的實(shí)例對(duì)象(就是該函數(shù))

5. 綁定規(guī)則的優(yōu)先級(jí)

現(xiàn)在我們已經(jīng)了解了函數(shù)調(diào)用中 this 綁定的四條規(guī)則,你需要做的就是找到函數(shù)的調(diào)用位置并判斷應(yīng)當(dāng)應(yīng)用哪條規(guī)則。但是,如果某個(gè)調(diào)用位置可以應(yīng)用多條規(guī)則呢?所以就需要有綁定規(guī)則的優(yōu)先級(jí)。

它們之間的優(yōu)先級(jí)關(guān)系為:

默認(rèn)綁定 < 隱式綁定 < 顯示綁定(bind) < new綁定

這里提前列出優(yōu)先級(jí),想看詳細(xì)代碼解析的可以往下看,也可以直接拖到最后面的例題部分

5.1 默認(rèn)綁定的優(yōu)先級(jí)最低

毫無疑問,默認(rèn)規(guī)則的優(yōu)先級(jí)是最低的,因?yàn)榇嬖谄渌?guī)則時(shí),就會(huì)通過其他規(guī)則的方式來綁定this

5.2 隱式綁定和顯式綁定的優(yōu)先級(jí)比較

測(cè)試一下即可知道,有以下代碼:

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

var obj1 = {
  a: 1,
  foo: foo
}

var obj2 = {
  a: 2,
  foo: foo
}

// 同時(shí)使用隱式綁定和顯示綁定
obj1.foo.call(obj2) // 2

可以看到,輸出的結(jié)果為 2,說明 foo 函數(shù)內(nèi) this 指向的是 obj2,而 obj2 是通過顯示綁定調(diào)用的,所以:顯示綁定的優(yōu)先級(jí)更高

5.3 隱式綁定和 new 綁定的優(yōu)先級(jí)比較

有以下測(cè)試代碼:

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

var obj = {
  title: "juejin",
  foo: foo
}

// 同時(shí)使用隱式綁定和new綁定
new obj.foo(); // foo對(duì)象

最后 foo 函數(shù)輸出的 this 為 foo 對(duì)象,說明new綁定優(yōu)先級(jí)更高(否則應(yīng)該輸出 obj 對(duì)象),所以:new 綁定的優(yōu)先級(jí)更高

5.4 new 綁定和顯示綁定的優(yōu)先級(jí)比較

最后,new 綁定和顯式綁定誰的優(yōu)先級(jí)更高呢?

new綁定和call、apply是不允許同時(shí)使用的,只能和 bind 相比較,如下:

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

var obj = {
  title: "juejin"
}

var foo = new foo.call(obj);  // 直接報(bào)錯(cuò)

但是 new 綁定可以和 bind 方法返回后的函數(shù)一起使用

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

var obj = {
  title: "juejin"
}

var bar = foo.bind(obj);

var foo = new bar(); // foo 對(duì)象, 說明使用的是new綁定

最后 foo 函數(shù)輸出的 this 為 foo 對(duì)象,說明new綁定優(yōu)先級(jí)更高(否則應(yīng)該輸出 obj 對(duì)象),所以:new 綁定的優(yōu)先級(jí)更高

優(yōu)先級(jí)結(jié)論:默認(rèn)綁定 < 隱式綁定 < 顯示綁定(bind)< new綁定

6. 判斷this

現(xiàn)在我們可以根據(jù)優(yōu)先級(jí)來判斷函數(shù)在某個(gè)調(diào)用位置應(yīng)用的是哪條規(guī)則。可以按照下面的 順序來進(jìn)行判斷:

  • 函數(shù)是否在 new 中調(diào)用(new 綁定)?如果是的話 this 綁定的是新創(chuàng)建的對(duì)象。 var bar = new foo()
  • 函數(shù)是否通過 call、apply(顯式綁定)或者硬綁定調(diào)用?如果是的話,this 綁定的是 指定的對(duì)象。 var bar = foo.call(obj2)
  • 函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用(隱式綁定)?如果是的話,this 綁定的是那個(gè)上 下文對(duì)象。 var bar = obj1.foo()
  • 如果都不是的話,使用默認(rèn)綁定。如果在嚴(yán)格模式下,就綁定到 undefined,否則綁定 到全局對(duì)象。 var bar = foo()

就是這樣。對(duì)于正常的函數(shù)調(diào)用來說,理解了這些知識(shí)你就可以明白 this 的綁定原理了。 不過……凡事總有例外

7. 綁定例外

規(guī)則總有例外,這里也一樣。在某些場景下 this 的綁定行為會(huì)出乎意料,你認(rèn)為應(yīng)當(dāng)應(yīng)用其他綁定規(guī)則時(shí),實(shí)際上應(yīng)用的可能是默認(rèn)綁定規(guī)則。

7.1 箭頭函數(shù)

箭頭函數(shù)不使用 this 的四種標(biāo)準(zhǔn)規(guī)則,而是根據(jù)外層(函數(shù)或者全局)作用域來決定 this。

7.2 被忽略的this

如果你把 null 或者 undefined 作為 this 的綁定對(duì)象傳入 call、apply 或者 bind,這些值在調(diào)用時(shí)會(huì)被忽略,實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則:

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

var a = 2

foo.call(null) // 2
foo.call(undefined) // 2
foo.bind(null)();

最后輸出的結(jié)果都是 2,說明 this 指向的是全局 window

7.3 間接引用

另一個(gè)需要注意的是,你有可能(有意或者無意地)創(chuàng)建一個(gè)函數(shù)的間接引用,在這種情況下,調(diào)用這個(gè)函數(shù)會(huì)應(yīng)用默認(rèn)綁定規(guī)則。 間接引用最容易在賦值時(shí)發(fā)生:

function foo() {
  console.log(this.a)
}
var a = 2
var o = { a: 3, foo: foo }
var p = { a: 4 }

o.foo(); // 3

// 函數(shù)賦值
(p.foo = o.foo)()  // 2

賦值表達(dá)式 p.foo = o.foo 的返回值是目標(biāo)函數(shù)的引用,因此調(diào)用位置是 foo() 屬于獨(dú)立函數(shù)調(diào)用,而不是 p.foo() 或者 o.foo()。根據(jù)我們之前說過的,這里會(huì)應(yīng)用默認(rèn)綁定。

8. this 判斷例題

請(qǐng)說出例題中的輸出結(jié)果

8.1 例題一

var name = "window";
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
function sayName() {
  var sss = person.sayName;
  sss(); 
  person.sayName(); 
  (person.sayName)(); 
  (b = person.sayName)(); 
}
sayName();

解析:

function sayName() {
  var sss = person.sayName;
  // 獨(dú)立函數(shù)調(diào)用,沒有和任何對(duì)象關(guān)聯(lián)
  sss(); // window
  // 關(guān)聯(lián)
  person.sayName(); // person
  (person.sayName)(); // person
  (b = person.sayName)(); // window
}

8.2 例題二

var name = 'window'
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

person1.foo1(); 
person1.foo1.call(person2); 

person1.foo2();
person1.foo2.call(person2);

person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);

person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);

解析:

// 隱式綁定,肯定是person1
person1.foo1(); // person1
// 隱式綁定和顯示綁定的結(jié)合,顯示綁定生效,所以是person2
person1.foo1.call(person2); // person2

// foo2()是一個(gè)箭頭函數(shù),不適用所有的規(guī)則
person1.foo2() // window
// foo2依然是箭頭函數(shù),不適用于顯示綁定的規(guī)則
person1.foo2.call(person2) // window

// 獲取到foo3,但是調(diào)用位置是全局作用于下,所以是默認(rèn)綁定window
person1.foo3()() // window
// foo3顯示綁定到person2中
// 但是拿到的返回函數(shù)依然是在全局下調(diào)用,所以依然是window
person1.foo3.call(person2)() // window
// 拿到foo3返回的函數(shù),通過顯示綁定到person2中,所以是person2
person1.foo3().call(person2) // person2

// foo4()的函數(shù)返回的是一個(gè)箭頭函數(shù)
// 箭頭函數(shù)的執(zhí)行找上層作用域,是person1
person1.foo4()() // person1
// foo4()顯示綁定到person2中,并且返回一個(gè)箭頭函數(shù)
// 箭頭函數(shù)找上層作用域,是person2
person1.foo4.call(person2)() // person2
// foo4返回的是箭頭函數(shù),箭頭函數(shù)只看上層作用域
person1.foo4().call(person2) // person1

9. 總結(jié)

如果要判斷一個(gè)運(yùn)行中函數(shù)的 this 綁定,就需要找到這個(gè)函數(shù)的直接調(diào)用位置。找到之后就可以順序應(yīng)用下面這四條規(guī)則來判斷 this 的綁定對(duì)象。

  • 由 new 調(diào)用?綁定到新創(chuàng)建的對(duì)象。
  • 由 call 或者 apply(或者 bind)調(diào)用?綁定到指定的對(duì)象。
  • 由上下文對(duì)象調(diào)用?綁定到那個(gè)上下文對(duì)象。
  • 默認(rèn):在嚴(yán)格模式下綁定到 undefined,否則綁定到全局對(duì)象。

到此這篇關(guān)于JavaScript 中的 this 綁定規(guī)則詳解的文章就介紹到這了,更多相關(guān)JavaScript 中的 this 綁定規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 編寫更好的JavaScript條件式和匹配條件的技巧(小結(jié))

    編寫更好的JavaScript條件式和匹配條件的技巧(小結(jié))

    這篇文章主要介紹了編寫更好的JavaScript條件式和匹配條件的技巧(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • 基于原生JS封裝的Modal對(duì)話框插件的示例代碼

    基于原生JS封裝的Modal對(duì)話框插件的示例代碼

    這篇文章主要介紹了基于原生JS封裝的Modal對(duì)話框插件的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-09
  • 淺談javascript中的prototype和__proto__的理解

    淺談javascript中的prototype和__proto__的理解

    這篇文章主要介紹了淺談javascript中的prototype和__proto__的理解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • uniapp項(xiàng)目使用防抖及節(jié)流的方案實(shí)戰(zhàn)

    uniapp項(xiàng)目使用防抖及節(jié)流的方案實(shí)戰(zhàn)

    防抖就是指觸發(fā)事件后把觸發(fā)非常頻繁的事件合并成一次去執(zhí)行,節(jié)流是指頻繁觸發(fā)事件時(shí)只會(huì)在指定的時(shí)間段內(nèi)執(zhí)行事件回調(diào),即觸發(fā)事件間隔大于等于指定的時(shí)間才會(huì)執(zhí)行回調(diào)函數(shù),這篇文章主要給大家介紹了關(guān)于uniapp項(xiàng)目使用防抖及節(jié)流的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • javascript 跨瀏覽器的事件系統(tǒng)

    javascript 跨瀏覽器的事件系統(tǒng)

    從技術(shù)上講,javascript并沒有提供內(nèi)置的系統(tǒng)來實(shí)現(xiàn)這個(gè)非常重要的事件驅(qū)動(dòng)編程,不過得益于瀏覽器的DOM 事件模型,這缺點(diǎn)并沒有過多地暴露出來。
    2010-03-03
  • JavaScript獲取XML數(shù)據(jù)附示例截圖

    JavaScript獲取XML數(shù)據(jù)附示例截圖

    這篇文章主要介紹了JavaScript獲取XML數(shù)據(jù)的方法,需要的朋友可以參考下
    2014-03-03
  • parabola.js拋物線與加入購物車效果的示例代碼

    parabola.js拋物線與加入購物車效果的示例代碼

    本篇文章主要介紹了parabola.js拋物線與加入購物車效果的示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • 不使用script導(dǎo)入js文件的幾種方法

    不使用script導(dǎo)入js文件的幾種方法

    這篇文章主要介紹了不使用script導(dǎo)入js文件的方法,需要的朋友可以參考下
    2016-10-10
  • js數(shù)組Array sort方法使用深入分析

    js數(shù)組Array sort方法使用深入分析

    js中Array.sort()方法是用來對(duì)數(shù)組項(xiàng)進(jìn)行排序的,默認(rèn)是升序排列sort() 方法可以接受一個(gè) 方法為參數(shù),這個(gè)方法有兩個(gè)參數(shù),接下來本例將對(duì)sort方法進(jìn)行深入探討,感興趣的朋友可以參考下
    2013-02-02
  • Javascript 圓角div的實(shí)現(xiàn)代碼

    Javascript 圓角div的實(shí)現(xiàn)代碼

    為什么要做圓角的div: 圓角div平滑美觀,某些情況下有比較不錯(cuò)的效果。比如說要做一個(gè)報(bào)message的消息框,那么動(dòng)態(tài)的生成一個(gè)圓角div則很有意義。而對(duì)html樣式控制的css本身是不直接支持圓角div的。
    2009-10-10

最新評(píng)論