真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

JavaScript中this的綁定規(guī)則是怎樣的

JavaScript中this的綁定規(guī)則是怎樣的,相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。

10年積累的做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你,你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有監(jiān)利免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

對于 JavaScript 新手來說,this 是非?;A(chǔ)同時也難以理解的知識點。

比如下面的代碼,this 指向就有三種方式。

function foo() {    console.log(this.a);  }  var a = 1;  var obj = { a: 2, foo: foo };  foo(); // 1  obj.foo(); // 2  foo.call({ a: 3 }); // 3

this 就是函數(shù)運行時所在的環(huán)境對象,它指向運行時所在的位置,而不是定義時的位置。

根據(jù) this 綁定規(guī)則,分為下面四種:

  1.  默認綁定

  2.  隱式綁定

  3.  顯式綁定

  4.  new 綁定

1. 默認綁定

默認情況下,this 指向全局對象。例如下面的代碼。

var a = 2;  console.log(this.a); // 2  // 在函數(shù)中  function foo() {    console.log(this.a);  }  foo(); // 2  // 在回調(diào)函數(shù)中  function doFoo() {    return function() {      console.log(this.a);    };  }  doFoo()(); // 2

不過,函數(shù)在嚴格模式下,this 無法指向全局對象,因此this會綁定到undefined。

function foo() {    "use strict";    console.log(this);  }  foo(); // undefined

2. 隱式綁定

當(dāng)函數(shù)作為方法被調(diào)用,需考慮運行時上下文環(huán)境。

function foo() {    console.log(this.a);  }  var obj = { a: 2, foo: foo };  obj.foo(); // 2

代碼中,foo()前面添加了obj對象的修飾,因此,obj對象就是函數(shù)的上下文。

this 會綁定到這個對象上。

另外,需要注意下面三種情況,它們會出現(xiàn)綁定對象丟失,從而把this綁定到全局對象或undefined上。

情況一

這段代碼中,雖然obj.foo()和bar()都指向同一函數(shù),但執(zhí)行結(jié)果并不一樣。

可以理解為,bar()是一個不帶任何修飾的函數(shù)調(diào)用,等價于直接調(diào)用foo(),因此應(yīng)用了默認綁定。

function foo() {    console.log(this.a);  }  var a = 3;  var obj = { a: 2, foo: foo };  var bar = obj.foo;  obj.foo(); // 2  bar(); // 3

情況二

另一種情況,發(fā)生在回調(diào)函數(shù)中。原理和上面的情況一樣。

修改上面的代碼,obj.foo作為參數(shù)傳入doFoo()函數(shù)中,實際上,引用的是foo()函數(shù)本身,因此應(yīng)用了默認綁定。

function foo() {    console.log(this.a);  }  var a = 3;  var obj = { a: 2, foo: foo };  function doFoo(fn) {    return fn();  }  doFoo(obj.foo);  // 3

情況三

在一些流行的 JavaScript 庫,進行事件處理操作時,回調(diào)函數(shù)的 this 可能會強制綁定到 DOM 元素上。

這種情況也值得注意。

3. 顯式綁定

JavaScript 提供了call()、apply()和bind()方法,可以強制綁定函數(shù)的this對象。

function fn() {    console.log(this.a);  }  fn.call({ a: 3 }); // 3

通過fn.call(obj),我們將函數(shù)運行時,this強制綁定到obj上。

call apply和bind的區(qū)別

call 和 apply 改變了函數(shù)的 this 上下文后,便執(zhí)行該函數(shù),而 bind 則是將該函數(shù)返回。

function fn() {      console.log(this.a);  }  fn.call({ a: 3 }); // 3  fn.bind({ a: 4 })(); // 4

call和apply的區(qū)別

call 和 apply 的區(qū)別在于傳入?yún)?shù)不同。

call 方法接收若干個參數(shù)列表。

apply 第一個參數(shù)和 call 一樣,第二個參數(shù)接收一個包含多個參數(shù)的數(shù)組。

let arr = [2, 5, 9]  console.log(Math.max.call(3, 2, 5, 9))  // 9  console.log(Math.max.call(3, arr))  // NaN  console.log(Math.max.apply(3, arr))  // 9

4. new 綁定

如果使用 new 構(gòu)造函數(shù),在函數(shù)內(nèi)部,this 指向新創(chuàng)建的對象。

function foo() {    console.log(this);  }  new foo(); // foo {}  foo(); // Window {...}

其他情況

需要忽略的this

若第三方庫的某個函數(shù)使用了 this,默認綁定會把this指向全局對象,從而導(dǎo)致不可預(yù)測的后果。

一個安全的做法,就是使用顯式綁定,將函數(shù)的this指向空對象。

function foo() {    console.log(this);  }  // 創(chuàng)建空對象  var ø = Object.create(null);  // 使用bind()進行柯里化(Curry)  var bar = foo.bind(ø);  bar(); // {}

這方法通常也用于對象初始化,以獲得一個干凈且高度可定制的對象。

箭頭函數(shù)

箭頭函數(shù)常用于回調(diào)函數(shù)中。

它會繼承父級作用域 this 綁定的對象,等價于ES6之前self = this的書寫方式。

const people = {      name: "Merry",      sayHi() {          console.log(this.name)      },      wait() {          setTimeout(() => {              console.log(this.name)          })      }  }  people.sayHi() // Merry  people.wait()  // Merry

此外還有軟綁定(softBind),用的不多,了解一下即可。

看完上述內(nèi)容,你們掌握JavaScript中this的綁定規(guī)則是怎樣的的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!


網(wǎng)頁名稱:JavaScript中this的綁定規(guī)則是怎樣的
當(dāng)前路徑:http://weahome.cn/article/ggsdpj.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部