无遮挡18禁啪啪免费观看 I 秋霞成人av I brandilove欧美三区 I 激情偷乱人伦小说视频 I 人人插人人艹 I www.亚洲com I 波多野结衣av高清一区二区三区 I 精品无码国产污污污免费网站 I 美女张开腿给男人桶爽久久 I 国产精品久久久久久久免费 I 国内精品久久99 I 亚洲精品无码专区 I 亚洲免费视频一区二区 I 午夜xxx I 国产一区啪啪 I 丝袜激情网 I 日韩精品久久久久久久 I 欧美香蕉视频 I 成人片免费看 I 天天色综合2 I 寡妇被老头舔到高潮的视频 I 亚洲第一页在线 I 国产放荡av国产精品 I 在线精品视频一区二区 I 免费黄色片在线观看 I 秋霞伊人网 I www.伊人 I 久草在线91 I 女人啪啪免费av大片 I 欧美一区二区综合 I 精品久久久久久天美传媒 I 黄色工厂在线观看 I 91精品国产色综合 I 动漫美女被到爽 I 丁香午夜激情

call、apply、bind 原理實現(xiàn)

2020-4-6 seo達人

call 的模擬實現(xiàn)
apply 的模擬實現(xiàn)
bind 的模擬實現(xiàn)
三者異同

學(xué)習(xí)并參考于：

JavaScript深入之call和apply的模擬實現(xiàn)

JS的call,apply與bind詳解，及其模擬實現(xiàn)

（一）call的模擬實現(xiàn)

call 用法： MDN Function.prototype.call()

call() 方法使用一個指定的 this 值和可選的參數(shù)列表來調(diào)用一個函數(shù)。

call() 提供新的 this 值給當(dāng)前調(diào)用的函數(shù)/方法。
call 實現(xiàn)主要思路：

將函數(shù)設(shè)為對象的屬性

執(zhí)行該函數(shù)

刪除該函數(shù)

另外還有考慮：

call 函數(shù)還能給定參數(shù)執(zhí)行函數(shù)

this 參數(shù)不傳，或者傳null，undefined， this指向window對象

函數(shù)是可以有返回值的
實現(xiàn)：

Function.prototype.myCall = function () {

if (typeof this !== 'function') {

throw new TypeError('error!')

}

let context = arguments[0] || window //this 參數(shù)可以傳 null，當(dāng)為 null 的時候，視為指向 window

context.fn = this // 首先要獲取調(diào)用call的函數(shù)，用this可以獲取

let args = [...arguments].slice(1) //從 Arguments 對象中取值，取出第二個到最后一個參數(shù)

let result = context.fn(...args) //函數(shù)是可以有返回值的

delete context.fn

return result

}
測試：

// 測試一下上面實現(xiàn)的myCall

var value = 2;

var obj = {

value: 1

}

function bar(name, age) {

console.log(this.value);

return {

value: this.value,

name: name,

age: age

}

}

bar.call(null); // 2

console.log(bar.myCall(obj, 'kevin', 18));

// 1

// Object {

// value: 1,

// name: 'kevin',

// age: 18

// }

（二）apply 的模擬實現(xiàn)

apply 用法：MDN Function.prototype.apply()

apply() 方法使用一個指定的 this 值和可選的參數(shù)數(shù)組來調(diào)用一個函數(shù)。

apply 的實現(xiàn)跟 call 類似。
實現(xiàn)：

Function.prototype.myApply = function () {

if (typeof this !== 'function') {

throw new TypeError('error!')

}

let context = arguments[0] || window

context.fn = this

let result = arguments[1] ? context.fn(...arguments[1]) : 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.myApply(foo, ['black', '18']) // black 18 1

（三）bind 的模擬實現(xiàn)

bind 用法：MDN Function.prototype.bind()

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

bind是ES5新增的一個方法，不會執(zhí)行對應(yīng)的函數(shù)，而是返回對綁定函數(shù)的引用。
實現(xiàn)：

Function.prototype.customBind = function () {

if (typeof this !== 'function') {

throw new TypeError('error!')

}

const that = this // 首先要獲取調(diào)用bind的函數(shù)，用this獲取并存放在that中

let context = arguments[0] || window

const args = [...arguments].slice(1)

return function() {

return that.apply(context, args.concat([...arguments]))

}

}

（四）三者異同
相同：

改變函數(shù)體內(nèi) this 的指向
不同：

call、apply的區(qū)別：call方法接受的是參數(shù)列表，而apply方法接受的是一個參數(shù)數(shù)組。

bind不立即執(zhí)行。而call或apply會自動執(zhí)行對應(yīng)的函數(shù)。

« TinyUI-TUIListView最簡單的使用 JavaScript 的簡述與基礎(chǔ)語法 »

call、apply、bind 原理實現(xiàn)

分類

日歷

鏈接

個人資料

存檔