bind的模擬實(shí)現(xiàn)

wangxinarhat 發(fā)布于2019-08-23 11:32 / 3083人閱讀

摘要：那模擬實(shí)現(xiàn)這個(gè)時(shí)候的指調(diào)用的時(shí)候傳入的參數(shù)這兩點(diǎn)完成后，還有一個(gè)特點(diǎn)，就是一個(gè)綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象，提供的值被忽略，同時(shí)調(diào)用時(shí)的參數(shù)被提供給模擬函數(shù)。

apply

apply的方法和 call 方法的實(shí)現(xiàn)類(lèi)似，只不過(guò)是如果有參數(shù)，以數(shù)組形式進(jìn)行傳遞，直接上代碼：

Function.prototype.apply2 = function(context) {
    var context = context || window
    context.fn = this // this 也就是調(diào)用apply的函數(shù)
    var result
    // 判斷是否有第二個(gè)參數(shù)
    if(arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn()
    return result
}

var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}
bar.apply2(foo, ["black", "18"]) // black 18 1

bind

bind() 方法會(huì)創(chuàng)建一個(gè)新的函數(shù)。當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)，bind() 的第一個(gè)參數(shù)會(huì)作為它運(yùn)行時(shí)的this，之后的參數(shù)將會(huì)在傳遞的實(shí)參前傳入作為它的參數(shù)。

也就是說(shuō)bind可以返回一個(gè)函數(shù)，并且可以傳入?yún)?shù)。

首先根據(jù)第一點(diǎn)，需要返回一個(gè)函數(shù)：

Function.prototype.bind2 = function(context) {
    var self = this
    return function() {
        self.apply(context)
    }
}
var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

var bindFoo = bar.bind2(foo); 
bindFoo() // 1

接下來(lái)還有第二點(diǎn)，可以傳入?yún)?shù)，可是傳參數(shù)還會(huì)有兩種情況，是在bind的時(shí)候傳參數(shù)呢，還是在調(diào)用返回的函數(shù)的時(shí)候傳參數(shù)呢？

var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name);
    console.log(age);
    console.log(this.value);
}

var bindFoo = bar.bind(foo, "black");
bindFoo("18")
// black
// 18
// 1

通過(guò)上面的例子就可以明顯發(fā)現(xiàn)。兩種方式都可以傳參。那模擬實(shí)現(xiàn)：

Function.prototype.bind2 = function(context) {
    var self = this
    var args = [...arguments].slice(1)
    console.log([...arguments])
    return function() {
        // 這個(gè)時(shí)候的arguments指調(diào)用的時(shí)候傳入的參數(shù)
        self.apply(context, args.concat([...arguments]))
    }
}

var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name);
    console.log(age);
    console.log(this.value);
}

var bindFoo = bar.bind2(foo, "black");
bindFoo("18")

這兩點(diǎn)完成后，還有一個(gè)特點(diǎn)，就是一個(gè)綁定函數(shù)也能使用new操作符創(chuàng)建對(duì)象，提供的this值被忽略，同時(shí)調(diào)用時(shí)的參數(shù)被提供給模擬函數(shù)。

也就是說(shuō) bind 返回的函數(shù)作為構(gòu)造函數(shù)的時(shí)候，bind 時(shí)指定的 this 值會(huì)失效，但是傳入的參數(shù)依然生效，舉個(gè)例子來(lái)說(shuō)明：

var value = 2;
var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
}

bar.prototype.sex = "boy"
var bindFoo = bar.bind(foo, "black")
var obj = new bindFoo("18")
// black
// 18
// undefined
console.log(obj.sex) // boy

盡管在全局和 foo 中都聲明了 value 值，最后依然返回 undefined，那是因?yàn)楫?dāng)調(diào)用obj的時(shí)候，這個(gè)時(shí)候的this指向已經(jīng)指向到了 obj

所以我們要去修改一下返回函數(shù)的原型來(lái)去實(shí)現(xiàn)：

Function.prototype.bind2 = function(context) {
    var self = this;
    var args = [...arguments].slice(1)
    
    var fun = function() {
        // 當(dāng)作為構(gòu)造函數(shù)的時(shí)候，this 指向?qū)嵗?self指向綁定函數(shù)，由fun.prototype = this.prototype, 使 fun.prototype 為 綁定函數(shù)的 prototype，此時(shí)結(jié)果為true，所以this指向?qū)嵗?        // 作為普通函數(shù)時(shí)，this 指向window， self 指向綁定函數(shù)，此時(shí)結(jié)果為false，此時(shí)this指向綁定的context
        self.apply(this instanceof self ? this : context,args.concat(...arguments))
    }
    // 修改返回函數(shù)的 prototype 為綁定函數(shù)的 prototype，實(shí)例就可以繼承函數(shù)的原型中的值
    // 使用Object.create避免修改函數(shù)的prototype
    fun.prototype = Object.create(this.prototype)
    return fun
}

最后加個(gè)對(duì)調(diào)用bind是否是個(gè)函數(shù)的判斷：

Function.prototype.bind2 = function(context) {
    if(typeof this !== "function") {
        throw new TypeError("Error")
    }
    var self = this;
    var args = [...arguments].slice(1)
    
    var fun = function() {
        // 當(dāng)作為構(gòu)造函數(shù)的時(shí)候，this 指向?qū)嵗?self指向綁定函數(shù)，由fun.prototype = this.prototype, 使 fun.prototype 為 綁定函數(shù)的 prototype，此時(shí)結(jié)果為true，所以this指向?qū)嵗?        // 作為普通函數(shù)時(shí)，this 指向window， self 指向綁定函數(shù)，此時(shí)結(jié)果為false，此時(shí)this指向綁定的context
        self.apply(this instanceof self ? this : context,args.concat(...arguments))
    }
    // 修改返回函數(shù)的 prototype 為綁定函數(shù)的 prototype，實(shí)例就可以繼承函數(shù)的原型中的值
    // 使用Object.create避免修改函數(shù)的prototype
    fun.prototype = Object.create(this.prototype)
    return fun
}

云服務(wù)器 GPU云服務(wù)器模擬實(shí)現(xiàn) 實(shí)現(xiàn)模擬加載 C語(yǔ)言數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)銀行模擬安卓平臺(tái)的模擬器

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

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

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

登陸后可評(píng)論

0條評(píng)論

wangxinarhat

男|高級(jí)講師

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

TA的文章

tensorflow用gpu訓(xùn)練

閱讀 1391·2023-04-26 03:04
文字處理之二：換行及word-break和word-wrap屬性

閱讀 2325·2019-08-30 15:44
CSS布局相關(guān)基本概念

閱讀 3727·2019-08-30 14:15
Gear Data Exchange Format（GDE Format）

閱讀 3507·2019-08-27 10:56
正則表達(dá)式 - 字符匹配不以某字段開(kāi)頭或者結(jié)尾

閱讀 2703·2019-08-26 13:53
js導(dǎo)出excel

閱讀 2616·2019-08-26 13:26
JS—?jiǎng)赢?huà)緩動(dòng)—tween.js

閱讀 3075·2019-08-26 12:11
Node.js + Koa2 + MySQL + Vue.js 實(shí)戰(zhàn)開(kāi)發(fā)一套完整個(gè)人博客項(xiàng)目網(wǎng)站

閱讀 3609·2019-08-23 18:21

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

bind的模擬實(shí)現(xiàn)

相關(guān)文章

JavaScript深入之bind的模擬實(shí)現(xiàn)

**面試官問(wèn)：能否模擬實(shí)現(xiàn)JS的bind方法**

【進(jìn)階3-4期】深度解析bind原理、使用場(chǎng)景及模擬實(shí)現(xiàn)

JavaScript專(zhuān)題之模擬實(shí)現(xiàn)bind

JavaScript進(jìn)階之模擬call,apply和bind

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

0條評(píng)論

wangxinarhat

男|高級(jí)講師

TA的文章

tensorflow用gpu訓(xùn)練

文字處理之二：換行及word-break和word-wrap屬性

CSS布局相關(guān)基本概念

Gear Data Exchange Format（GDE Format）

正則表達(dá)式 - 字符匹配不以某字段開(kāi)頭或者結(jié)尾

js導(dǎo)出excel

JS—?jiǎng)赢?huà)緩動(dòng)—tween.js

Node.js + Koa2 + MySQL + Vue.js 實(shí)戰(zhàn)開(kāi)發(fā)一套完整個(gè)人博客項(xiàng)目網(wǎng)站

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

bind的模擬實(shí)現(xiàn)

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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