原生js如何实现call|原生js如何实现call,apply以及bind 原生js如何实现call|apply以及b

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; }

【原生js如何实现call|原生js如何实现call,apply以及bind】测试代码：

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; }}

测试代码：