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

一文搞懂JavaScript中的this綁定規(guī)則

 更新時(shí)間：2022年09月26日 15:02:33   作者：十七喜歡前端  
這篇文章主要為大家詳細(xì)介紹了原生JS之this綁定規(guī)則，這樣大家再也不用擔(dān)心this指向問題了。文中的示例代碼講解詳細(xì)，需要的可以參考一下

前言 

首先我們來(lái)看一個(gè)示例。定義一個(gè)函數(shù)，用三種不同的方式調(diào)用，會(huì)產(chǎn)生三種不同的結(jié)果

function foo(){
    console.log(this);
}
foo() //window
let obj ={
   name:'sss',
   foo:foo
}
obj.foo()//{name:'sss',foo:function}
foo.call("abc")  // 生成包裝類型對(duì)象,String {'abc'}

一個(gè)函數(shù)調(diào)用方式不同this指向也不盡相同，為什么會(huì)出現(xiàn)這么令人費(fèi)解的現(xiàn)象呢？是因?yàn)樵贘avaScript中函數(shù)的this是動(dòng)態(tài)綁定的（箭頭函數(shù)除外）。經(jīng)過一段時(shí)間對(duì)this的研究，得出了以下幾個(gè)結(jié)論：

  • 函數(shù)在調(diào)用時(shí)，JavaScript會(huì)默認(rèn)給this綁定一個(gè)值。
  • this的綁定與編寫的位置沒有關(guān)系
  • this的綁定與調(diào)用的方式以及調(diào)用的位置有關(guān)
  • this的綁定是在運(yùn)行時(shí)進(jìn)行的

this綁定與調(diào)用方式和調(diào)用位置有關(guān)，那么根據(jù)調(diào)用方式和調(diào)用位置，我們?cè)撛趺创_定this指向呢？

最近這段時(shí)間閱讀了《你不知道的JavaScript》這本書，讓我對(duì)js有了更深刻的理解，里面也說到了this綁定問題，如果有興趣推薦大家去看看這本書，這里我就不過多介紹了，下面來(lái)聊聊怎么確定this指向吧，這是我從這本書還有網(wǎng)上的一些資料總結(jié)出來(lái)的，也是自己的理解，再也不用擔(dān)心搞不清this指向了，嘿嘿！

 this四大綁定規(guī)則

一.默認(rèn)綁定

獨(dú)立函數(shù)調(diào)用的就是默認(rèn)綁定，簡(jiǎn)單說就是函數(shù)沒有綁定到某個(gè)對(duì)象上進(jìn)行調(diào)用，默認(rèn)返回window（注意：嚴(yán)格模式返回undefined）

舉例：

function foo(){
    console.log(this); 
}
foo()  // 獨(dú)立函數(shù)調(diào)用 
let obj ={
    name:'sss',
     bar:function(){
         console.log(this);
    }
}
let ff = obj.bar
ff() // 函數(shù)在對(duì)象中，但是獨(dú)立函數(shù)獨(dú)立函數(shù)調(diào)用
// 高階函數(shù)
function test(fn){
     fn()
}
test(obj.bar) //相當(dāng)于fn=obj.bar fn() 所以還是獨(dú)立函數(shù)調(diào)用

結(jié)果都是window 

二.隱式綁定

在調(diào)用位置中，通過對(duì)象來(lái)發(fā)起的調(diào)用會(huì)返回調(diào)用它的那個(gè)對(duì)象

舉例：

let obj ={
    name:'sss',
     bar:function(){
         console.log(this);
    }
}
obj.bar() // 通過對(duì)象調(diào)用，結(jié)果是 obj

有一種更微妙但是又更常見的情況發(fā)生在傳入回調(diào)函數(shù)時(shí)：

function foo(){
    console.log(this);
}
setTimeout(foo,1000) //Window
let btn = document.querySelector('button')
btn.addEventListener('click',foo) //button
let ar = [1,2,3,4]
ar.forEach(item=>console.log(this)) //Window

setTimeout內(nèi)部綁定的this是window ，btn的this指向按鈕，forEach方法指向Window 

三.new綁定

 JavaScript中的函數(shù)也可以當(dāng)作一個(gè)構(gòu)造函數(shù)來(lái)使用，也就是通過new關(guān)鍵字

我們先來(lái)回憶一下new關(guān)鍵字做了什么：

  • 創(chuàng)建（構(gòu)造）一個(gè)全新的對(duì)象
  • 這個(gè)新對(duì)象執(zhí)行[[prototype]]連接
  • 將這個(gè)新對(duì)象綁定在this上
  • 沒有顯示返回其他對(duì)象時(shí)，即返回這個(gè)新對(duì)象

代碼示例： 

function person(name) {
    this.name =name
    console.log(this);
}
new person('sss') // person{name:'sss'}

四.顯示綁定

相當(dāng)于強(qiáng)制綁定，使用call,bind,apply等一系列方法進(jìn)行強(qiáng)制綁定；

顯示綁定簡(jiǎn)單來(lái)說就是通過一些方法來(lái)進(jìn)行強(qiáng)制綁定，this就是強(qiáng)制綁定的那個(gè)對(duì)象；代碼示例：

// 顯示綁定
function foo(){
    console.log(this);
}
let obj ={
    name:'sss'
}
// 此時(shí)我們希望this指向obj 如果是正常情況下該這么指向呢
// 1
obj.foo = foo
obj.foo() // obj
// 但是我們希望直接綁定 就可以通過call 來(lái)進(jìn)行顯示綁定
foo.call(obj) //obj
foo.call("123") //"123"
foo.call(123) //123
foo.call(undefine) // 特例：window

call,apply,bind簡(jiǎn)單介紹：

相同點(diǎn)： 

  • 都是改變this指向的；
  • 第一個(gè)參數(shù)都是this要指向的對(duì)象；
  • 都可以利用后續(xù)參數(shù)傳參；

區(qū)別：

  • call和bind的參數(shù)是依次傳參，一一對(duì)應(yīng)的；
  • 但apply只有兩個(gè)參數(shù)，第二個(gè)參數(shù)為數(shù)組；
  • call和apply都是對(duì)函數(shù)進(jìn)行直接調(diào)用，而bind方法返回的仍是一個(gè)函數(shù)；

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

知道了this的四種綁定規(guī)則，那么，這四種規(guī)則該怎么用呢？

就像運(yùn)算符有優(yōu)先級(jí)規(guī)則一樣，this四種綁定規(guī)則也有優(yōu)先級(jí) ，下面來(lái)介紹一下它的優(yōu)先級(jí)規(guī)則

直接上結(jié)論吧，我們可以按照下面這個(gè)順序來(lái)判斷this：

  •  函數(shù)是否在new中調(diào)用（new綁定）？如果是的話this綁定的就是新創(chuàng)建的對(duì)象；
  • 函數(shù)是否通過call、apply、bind調(diào)用（顯示綁定）？如果是的話，this綁定的是指定的對(duì)象；
  • 函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用（隱式綁定）？如果是的話，this綁定的是那個(gè)上下文對(duì)象；
  • 如果都不是的話，使用默認(rèn)綁定，綁定到全局對(duì)象（嚴(yán)格模式綁定到undefined）

代碼示例：

//優(yōu)先級(jí)
function foo(){
    console.log(this);
}
let obj = {
    name:'ss',
    foo:foo
}
obj.foo.call('nn')  // 結(jié)果是 包裝對(duì)象nn
// 顯然顯示大于隱形綁定
new obj.foo() // 結(jié)果是foo實(shí)例對(duì)象
// new綁定大于隱式綁定
 
// new 和顯示綁定綁定不能一起使用
let f = foo.bind(obj)
new f()  // 結(jié)果依然是foo實(shí)例對(duì)象  new綁定>顯示綁定
let f2 = foo.bind(obj)
 
f2.call('ss') // 結(jié)果是obj對(duì)象 bind>call

 輸出：

這個(gè)判斷順序幾乎適用所有情況，當(dāng)然也有例外，我們需要注意這些例外：

1.顯示綁定傳入null和undefine

function foo(){
    console.log(this);
}
foo.apply("ss") //"ss"
foo.apply(null) //Window
foo.apply(undefined) //Window

說明在我們傳入null和undefined時(shí)，會(huì)忽略顯示綁定，使用默認(rèn)規(guī)則

另外，在嚴(yán)格模式下則是會(huì)返回基本的數(shù)據(jù)類型

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

2.創(chuàng)建一個(gè)函數(shù)的 間接引用，這種情況也是使用默認(rèn)綁定規(guī)則

function foo(){
    console.log(this);
}
let obj = {
    foo:foo
}
(a = obj.foo)() // Window

a =obj.foo 會(huì)默認(rèn)返回foo() 相當(dāng)于獨(dú)立調(diào)用，使用默認(rèn)規(guī)則

3.箭頭函數(shù)

 箭頭函數(shù)中是沒有this的，所以它會(huì)去不斷去上一層的作用域查找this并使用

面試題

現(xiàn)在你已經(jīng)掌握了如何判斷this指向了，來(lái)幾個(gè)面試題試試手吧 

題1

let name = 'Window';
let Person = {
    name:'person',
    say:function(){
        console.log(this);
    }
};
let ss = Person.say;
ss(); // Window
Person.say(); // Person
(Person.say)(); // Person
(b = Person.say)(); // Window

題2

var name = 'window'
 
 
// {} -> 對(duì)象
// {} -> 代碼塊
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 () {
    // console.log(this) // 第一個(gè)表達(dá)式this -> person1
    // console.log(this) // 第二個(gè)表達(dá)式this -> person2
    // console.log(this) // 第三個(gè)表達(dá)式this -> person1
    
    return () => {
      console.log(this.name)
    }
  }
}
 
var person2 = { name: 'person2' }
 
 
// 開始題目:
person1.foo1(); // 隱式綁定: person1
person1.foo1.call(person2); // 顯式綁定: person2
 
person1.foo2(); // 上層作用域: window
person1.foo2.call(person2); // 上層作用域: window
 
person1.foo3()(); // 默認(rèn)綁定: window
person1.foo3.call(person2)(); // 默認(rèn)綁定: window
person1.foo3().call(person2); // 顯式綁定: person2
 
person1.foo4()(); // person1
person1.foo4.call(person2)(); // person2
person1.foo4().call(person2); // person1

題3

var name = 'window'
 
/*
  1.創(chuàng)建一個(gè)空的對(duì)象
  2.將這個(gè)空的對(duì)象賦值給this
  3.執(zhí)行函數(shù)體中代碼
  4.將這個(gè)新的對(duì)象默認(rèn)返回
*/
function Person(name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}
 
// person1/person都是對(duì)象(實(shí)例instance)
var person1 = new Person('person1')
var person2 = new Person('person2')
 
 
// 面試題目:
person1.foo1() // 隱式綁定: person1
person1.foo1.call(person2) // 顯式綁定: person2
 
person1.foo2() // 上層作用域查找: person1
person1.foo2.call(person2) // 上層作用域查找: person1
 
person1.foo3()() // 默認(rèn)綁定: window
person1.foo3.call(person2)() // 默認(rèn)綁定: window
person1.foo3().call(person2) // 顯式綁定: person2
 
person1.foo4()() // 上層作用域查找: person1(隱式綁定)
person1.foo4.call(person2)() //  上層作用域查找: person2(顯式綁定)
person1.foo4().call(person2) // 上層作用域查找: person1(隱式綁定)

題4

var name = 'window'
 
/*
  1.創(chuàng)建一個(gè)空的對(duì)象
  2.將這個(gè)空的對(duì)象賦值給this
  3.執(zhí)行函數(shù)體中代碼
  4.將這個(gè)新的對(duì)象默認(rèn)返回
*/
function Person(name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}
 
var person1 = new Person('person1')
var person2 = new Person('person2')
 
person1.obj.foo1()() // 默認(rèn)綁定: window
person1.obj.foo1.call(person2)() // 默認(rèn)綁定: window
person1.obj.foo1().call(person2) // 顯式綁定: person2
 
person1.obj.foo2()() // 上層作用域查找: obj(隱式綁定)
person1.obj.foo2.call(person2)() // 上層作用域查找: person2(顯式綁定)
person1.obj.foo2().call(person2) // 上層作用域查找: obj(隱式綁定)

以上就是一文搞懂JavaScript中的this綁定規(guī)則的詳細(xì)內(nèi)容，更多關(guān)于JavaScript this綁定規(guī)則的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論