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

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

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

前言 

首先我們來看一個示例。定義一個函數(shù)，用三種不同的方式調(diào)用，會產(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")  // 生成包裝類型對象,String {'abc'}

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

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

this綁定與調(diào)用方式和調(diào)用位置有關(guān)，那么根據(jù)調(diào)用方式和調(diào)用位置，我們該怎么確定this指向呢？

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

 this四大綁定規(guī)則

一.默認綁定

獨立函數(shù)調(diào)用的就是默認綁定，簡單說就是函數(shù)沒有綁定到某個對象上進行調(diào)用，默認返回window（注意：嚴格模式返回undefined）

舉例：

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

結(jié)果都是window 

二.隱式綁定

在調(diào)用位置中，通過對象來發(fā)起的調(diào)用會返回調(diào)用它的那個對象

舉例：

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

有一種更微妙但是又更常見的情況發(fā)生在傳入回調(diào)函數(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ù)也可以當作一個構(gòu)造函數(shù)來使用，也就是通過new關(guān)鍵字

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

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

代碼示例： 

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

四.顯示綁定

相當于強制綁定，使用call,bind,apply等一系列方法進行強制綁定；

顯示綁定簡單來說就是通過一些方法來進行強制綁定，this就是強制綁定的那個對象；代碼示例：

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

call,apply,bind簡單介紹：

相同點： 

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

區(qū)別：

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

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

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

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

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

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

代碼示例：

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

 輸出：

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

1.顯示綁定傳入null和undefine

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

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

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

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

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

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

a =obj.foo 會默認返回foo() 相當于獨立調(diào)用，使用默認規(guī)則

3.箭頭函數(shù)

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

面試題

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

題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'
 
 
// {} -> 對象
// {} -> 代碼塊
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) // 第一個表達式this -> person1
    // console.log(this) // 第二個表達式this -> person2
    // console.log(this) // 第三個表達式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()(); // 默認綁定: window
person1.foo3.call(person2)(); // 默認綁定: 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)建一個空的對象
  2.將這個空的對象賦值給this
  3.執(zhí)行函數(shù)體中代碼
  4.將這個新的對象默認返回
*/
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都是對象(實例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()() // 默認綁定: window
person1.foo3.call(person2)() // 默認綁定: 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)建一個空的對象
  2.將這個空的對象賦值給this
  3.執(zhí)行函數(shù)體中代碼
  4.將這個新的對象默認返回
*/
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()() // 默認綁定: window
person1.obj.foo1.call(person2)() // 默認綁定: 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ī)則的詳細內(nèi)容，更多關(guān)于JavaScript this綁定規(guī)則的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論