1、實(shí)現(xiàn)call

步驟：

將函數(shù)設(shè)為對(duì)象的屬性； 指定this到函數(shù)，并傳入給定參數(shù)執(zhí)行函數(shù)； 執(zhí)行之后刪除這個(gè)函數(shù)； 如果不傳入?yún)?shù)，默認(rèn)指向window；

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

測(cè)試代碼：

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

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

測(cè)試代碼：

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

bind()方法主要就是將函數(shù)綁定到某個(gè)對(duì)象，bind()會(huì)創(chuàng)建一個(gè)函數(shù)，函數(shù)體內(nèi)的this對(duì)象的值會(huì)被綁定到傳入bind()中的第一個(gè)參數(shù)的值。

方法1：使用apply

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

ES6簡(jiǎn)化一下：

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

將上面的代碼和js手寫實(shí)現(xiàn)apply的代碼合并一下：

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

測(cè)試代碼：

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

以上就是原生js如何實(shí)現(xiàn)call,apply以及bind的詳細(xì)內(nèi)容，更多關(guān)于js實(shí)現(xiàn)call,apply以及bind的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！