原生js如何實現call,apply以及bind

1、實現call

步驟：

將函數設為對象的屬性； 指定this到函數，并傳入給定參數執行函數； 執行之后刪除這個函數； 如果不傳入參數，默認指向window；

Function.prototype.mycall = function (context, ...args) { //判斷是否為函數，如果不是函數，則報錯 if (typeof this !== 'function') {throw new Error('不是函數'); } context = context || window; context.fn = this; const res = context.fn(...args); delete context.fn; return res;}

測試代碼：

var name = '李輝', age = 25;var obj = { name: '周果', objAge: this.age, myFun: function (fm, to) {console.log(`名字：${this.name},年齡：${this.age}，來自：${fm}，去往:${to}`) }};var person = { name: '弟弟', age: 12,};Function.prototype.mycall = function (context, ...args) { //判斷是否為函數，如果不是函數，則報錯 if (typeof this !== 'function') {throw new Error('不是函數'); } context = context || window; context.fn = this; const res = context.fn(...args); delete context.fn; return res;}obj.myFun.mycall(person, '成都', '仁壽'); //名字：弟弟,年齡：12，來自：成都，去往:仁壽2、實現apply

Function.prototype.myApply = function (context, ...args) { //判斷是否為函數，如果不是函數，則報錯 if (typeof this !== 'function') {throw new Error('不是函數'); } context = context || window; context.fn = this; args = args && args[0] || []; const result = context.fn(...args); delete context.fn; return result;}

測試代碼：

obj.myFun.myApply(person, ['成都', '仁壽']); //名字：弟弟,年齡：12，來自：成都，去往:仁壽3、實現bind

bind()方法主要就是將函數綁定到某個對象，bind()會創建一個函數，函數體內的this對象的值會被綁定到傳入bind()中的第一個參數的值。

方法1：使用apply

Function.prototype.myBind = function () { let self = this; //保存原函數 let context = [].shift.call(arguments); //保存需要綁定的this上下文 let args = [...arguments]; //將傳入的剩余參數轉換成數組 return function () { //返回一個新的函數self.apply(context,[].concat.call(args,[...arguments])); }}

ES6簡化一下：

Function.prototype.myBind = function (context, ...args1) {return (...args2) => { //返回箭頭函數, this綁定調用這個方法的函數對象 context = context || window; return this.apply(context, args1.concat(args2));//合并參數} }方法2：不使用call以及apply

將上面的代碼和js手寫實現apply的代碼合并一下：

Function.prototype.myBind = function (context, ...args1) { return (...args2) => { //返回箭頭函數, this綁定調用這個方法的函數對象context = context || window;context.fn = this;const args = args1.concat(args2);const res = context.fn(...args);delete context.fn;return res; }}

測試代碼：

obj.myFun.myBind(person, '成都', '仁壽')();//名字：弟弟,年齡：12，來自：成都，去往:仁壽

以上就是原生js如何實現call,apply以及bind的詳細內容，更多關于js實現call,apply以及bind的資料請關注好吧啦網其它相關文章！