【讀書筆記】你不知道的JavaScript--this

Me_Kun 發(fā)布于2019-08-21 17:50 / 3060人閱讀

摘要：但是如果某個(gè)函數(shù)確實(shí)使用了，那默認(rèn)綁定規(guī)則會(huì)把綁定到全局對(duì)象在瀏覽器中這個(gè)對(duì)象是，這將導(dǎo)致不可預(yù)計(jì)的后果比如修改全局對(duì)象。實(shí)際上并不存在所謂的構(gòu)造函數(shù)，只有對(duì)于函數(shù)的構(gòu)造調(diào)用。使用來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。

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

1. 默認(rèn)綁定

獨(dú)立函數(shù)調(diào)用時(shí)，應(yīng)用 this 的默認(rèn)綁定， this 指向全局對(duì)象
如果使用嚴(yán)格模式（strict mode），那么全局對(duì)象將無法使用默認(rèn)綁定，因此 this 會(huì)綁定到 undefined
觀察下面這段代碼

function aba () {
    console.log(this)
}
function bab () {
    "use strict"
    console.log(this)
}
var obj = {
    aba: aba,
    bab: bab
}
aba() //Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?,?…}
bab()  //undefined
obj.aba() //{aba: ?, bab: ?}
obj.bab() //{aba: ?, bab: ?}

2. 隱式綁定

在一個(gè)對(duì)象內(nèi)部包含一個(gè)指向函數(shù)的屬性，并通過這個(gè)屬性間接引用函數(shù)，從而把 this 間接（隱式）綁定到這個(gè)對(duì)象上。
當(dāng)函數(shù)引用有上下文對(duì)象時(shí)，隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的 this 綁定到這個(gè)上下文對(duì)象。
所以上個(gè)示例代碼中，調(diào)用 obj.aba()時(shí) this 被綁定到 obj，因此 this.aba 和 obj.aba 是一樣的。

對(duì)象屬性引用鏈中只有最頂層或者說最后一層會(huì)影響調(diào)用位置。

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

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

function fun1 () {
    console.log(this)
}
var obj = {
    fun1: fun1,
    fun2: function () {
        console.log(this)
    }
}
var getfun1 = obj.fun1
var getfun2 = obj.fun2
function doCallBack (cb) { //參數(shù)傳遞其實(shí)就是一種隱式賦值，因此我們傳入函數(shù)時(shí)也會(huì)被隱式賦值
    cb()
}
function testSetTimeout (fun) {
    setTimeout(fun, 0)
}
fun1()                    // Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?,?…}
obj.fun1()                // {fun1: ?, fun2: ?}
obj.fun2()                // {fun1: ?, fun2: ?}
getfun1()                 // Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?,?…}
getfun2()                 // Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?,?…}
doCallBack(obj.fun1)      // Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?,?…}
doCallBack(obj.fun2)      // Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?,?…}
testSetTimeout(obj.fun1)  // Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?,?…}
testSetTimeout(obj.fun2)  // Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?,?…}

3. 顯式綁定

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

var obj = {
    c: 33,
    fun: function (a,b) {
        console.log( "a:" + a + ", b:" + b + ", c:" + this.c )
    }
}
// 把數(shù)組“展開”成參數(shù)
obj.fun.apply( null, [2, 3] ); a:2, b:3, c:undefined
// 使用 bind(..) 進(jìn)行柯里化
var bar = obj.fun.bind( null, 2 );
bar( 3 ); // a:2, b:3, c:undefined

上面代碼中 apply 、 bind 這兩種方法都需要傳入一個(gè)參數(shù)當(dāng)作 this 的綁定對(duì)象。如果函數(shù)并不關(guān)心 this 的話，仍然需要傳入一個(gè)占位值，這時(shí) null 可能是一個(gè)不錯(cuò)的選擇。
但是如果某個(gè)函數(shù)確實(shí)使用了 this，那默認(rèn)綁定規(guī)則會(huì)把 this 綁定到全局對(duì)象（在瀏覽器中這個(gè)對(duì)象是 window），這將導(dǎo)致不可預(yù)計(jì)的后果（比如修改全局對(duì)象）。

4. new綁定

在 JavaScript 中，構(gòu)造函數(shù)只是一些被 new 操作符調(diào)用的普通函數(shù)而已。
實(shí)際上并不存在所謂的“構(gòu)造函數(shù)”，只有對(duì)于函數(shù)的“構(gòu)造調(diào)用”。
使用 new 來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。
1 創(chuàng)建（或者說構(gòu)造）一個(gè)全新的對(duì)象。
2 這個(gè)新對(duì)象會(huì)被執(zhí)行 [[ 原型 ]] 連接。
3 這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的 this。
4 如果函數(shù)沒有返回其他對(duì)象，那么 new 表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。

注意：對(duì) bind 返回的函數(shù)進(jìn)行構(gòu)造調(diào)用時(shí)，實(shí)際調(diào)用的是原函數(shù)，調(diào)用 bind 時(shí)傳入的第一個(gè)參數(shù)將被忽略，剩余參數(shù)作為構(gòu)造調(diào)用的參數(shù)傳入原函數(shù)

function test (a, b) {
    this.a = a
    this.b = b
    this.say = function () {
        console.log(`a: ${this.a}, b: ${this.b}, c: ${this.c}`)
    }
}
var bindObj = {
    c: 12
}
var bindReturn = test.bind(bindObj, 1, 2)
var newBindReturn = new bindReturn()
newBindReturn.say()  // a: 1, b: 2, c: undefined
console.log(bindObj) // {c: 12}
bindReturn()
console.log(bindObj) // {c: 12, a: 1, b: 2, say: ?}

云服務(wù)器 GPU云服務(wù)器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

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

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

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

登陸后可評(píng)論

0條評(píng)論

Me_Kun

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于javaweb+jsp的機(jī)房設(shè)備管理系統(tǒng)

閱讀 1408·2021-11-25 09:43
當(dāng)程序員被問到如何形容你的專業(yè)時(shí)，他的回答亮了摸摸頭

閱讀 1962·2021-11-12 10:36
主機(jī)ip一般是什么-主機(jī)ip地址有什么要求？

閱讀 6287·2021-09-22 15:05
浮動(dòng)元素

閱讀 3535·2019-08-30 15:55
電競(jìng)CSGO數(shù)據(jù)API接口 - 【戰(zhàn)隊(duì)數(shù)據(jù)列表】API調(diào)用示例代碼

閱讀 2091·2019-08-26 14:06
Webpack 4.X 從入門到精通 - loader（五）

閱讀 3702·2019-08-26 12:17
使用React、Electron、Dva、Webpack、Node.js、Websocket快速構(gòu)建

閱讀 568·2019-08-23 17:55
#JavaScript# IE兼容

閱讀 2512·2019-08-23 16:23

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

【讀書筆記】你不知道的JavaScript--this

相關(guān)文章

《你不知道的JS》讀書筆記---作用域及閉包

**【讀書筆記】你不知道的JavaScript--內(nèi)置類型**

**《你不知道的JavaScript》 (下) 閱讀摘要**

《你不知道的JS》讀書筆記之閉包在循環(huán)中的應(yīng)用

**你不知道的JavaScript上卷之作用域與閉包·讀書筆記**

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

0條評(píng)論

Me_Kun

男|高級(jí)講師

TA的文章

基于javaweb+jsp的機(jī)房設(shè)備管理系統(tǒng)

當(dāng)程序員被問到如何形容你的專業(yè)時(shí)，他的回答亮了摸摸頭

主機(jī)ip一般是什么-主機(jī)ip地址有什么要求？

浮動(dòng)元素

電競(jìng)CSGO數(shù)據(jù)API接口 - 【戰(zhàn)隊(duì)數(shù)據(jù)列表】API調(diào)用示例代碼

Webpack 4.X 從入門到精通 - loader（五）

使用React、Electron、Dva、Webpack、Node.js、Websocket快速構(gòu)建

#JavaScript# IE兼容

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

【讀書筆記】你不知道的JavaScript--this

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！