老司机91精品网站在线观看-老司机67194免费观看-老司国产精品视频-老熟人老女人国产老太-中文字幕日本在线-中文字幕日本一区久久

call、apply、bind 原理實現

2020-4-6 seo達人

call 的模擬實現
apply 的模擬實現
bind 的模擬實現
三者異同

學習并參考于：

JavaScript深入之call和apply的模擬實現

JS的call,apply與bind詳解，及其模擬實現

（一）call的模擬實現

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

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

call() 提供新的 this 值給當前調用的函數/方法。
call 實現主要思路：

將函數設為對象的屬性

執行該函數

刪除該函數

另外還有考慮：

call 函數還能給定參數執行函數

this 參數不傳，或者傳null，undefined， this指向window對象

函數是可以有返回值的
實現：

Function.prototype.myCall = function () {

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

throw new TypeError('error!')

}

let context = arguments[0] || window //this 參數可以傳 null，當為 null 的時候，視為指向 window

context.fn = this // 首先要獲取調用call的函數，用this可以獲取

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

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

delete context.fn

return result

}
測試：

// 測試一下上面實現的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 的模擬實現

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

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

apply 的實現跟 call 類似。
實現：

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 的模擬實現

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

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

bind是ES5新增的一個方法，不會執行對應的函數，而是返回對綁定函數的引用。
實現：

Function.prototype.customBind = function () {

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

throw new TypeError('error!')

}

const that = this // 首先要獲取調用bind的函數，用this獲取并存放在that中

let context = arguments[0] || window

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

return function() {

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

}

}

（四）三者異同
相同：

改變函數體內 this 的指向
不同：

call、apply的區別：call方法接受的是參數列表，而apply方法接受的是一個參數數組。

bind不立即執行。而call或apply會自動執行對應的函數。

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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.hk66688.com

存檔

主站蜘蛛池模板：澜沧| 延津县| 濉溪县| 剑川县| 托克逊县| 札达县| 鄂温| 呼玛县| 顺平县| 佛冈县| 井冈山市| 嘉峪关市| 洪泽县| 临沭县| 溆浦县| 达日县| 洛川县| 长兴县| 旌德县| 廊坊市| 普兰县| 景洪市| 通化市| 太保市| 大余县| 华宁县| 镇平县| 乐平市| 彭山县| 屯昌县| 平泉县| 宜昌市| 郑州市| 阿合奇县| 旌德县| 新密市| 张家港市| 德州市| 大足县| 冕宁县| 高平市|

老司机91精品网站在线观看-老司机67194免费观看-老司国产精品视频-老熟人老女人国产老太-中文字幕日本在线-中文字幕日本一区久久

call、apply、bind 原理實現

分類

日歷

鏈接

個人資料

存檔