如何将JavaScript中的call、apply和bind方法改写成长尾词？

本文共计710个文字，预计阅读时间需要3分钟。

1. 实现call步骤： - 将函数设为对象的属性，指定this指向 - 调用函数，并传入参数 - 删除该函数

2. 代码示例： javascript Function.prototype.mycall=function(cont) { cont.call(this); delete this.call; };

1、实现call

步骤：

1. 将函数设为对象的属性；
2. 指定this到函数，并传入给定参数执行函数；
3. 执行之后删除这个函数；
4. 如果不传入参数，默认指向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的资料请关注自由互联其它相关文章！