手写apply、call、bind（大量代码）

最近又进行了基础知识的重新学习，然后进行了call，apply，bind的this指向、参数类型以及代码的手写，然后整理了下。

this指向

// this指向
const phper = {
    name: 'php',
    getName: function(){
        console.log(this.name+'is the best language in the world');
 } }; const webfansDoLi = {  name: 'javascript', }; phper.getName(); phper.getName.call(webfansDoLi); phper.getName.apply(webfansDoLi) phper.getName.bind(webfansDoLi)()  //打印结果：javascript is the best language in the world //打印结果：javascript is the best language in the world //打印结果：javascript is the best language in the world  

结论：call、apply、bind的this都是指向他们的第一个参数。

参数类型

// 参数注入(异同比较)
const developer = {
    getSkills: function(...args){
        console.log(...args);
    },
}; const webfansDoLi = {  getSkills: ['html'], } developer.getSkills.call(webfansDoLi,'es6','计算机基础'); developer.getSkills.apply(webfansDoLi,['hBuilder','微信小程序']); developer.getSkills.bind(webfansDoLi,'vue','react')() //打印结果：es6 计算机基础 //打印结果：hBuilder 微信小程序 //打印结果：vue react 

结论：call和bind的第二个参数是开始都是实参参与，而apply则是第二个参数是参数数组（速记参数差异：apply参数是array，都是a开头）。

手写绑定

所有的绑定都是绑定在Function函数的prototype属性上的。

手写call

// 简易模拟实现--call
Function.prototype.apply = function(context){
   console.log(1)
   //重定义this
   const DoLi = context || window;
 //模拟档期那的对象的this指向  DoLi.func = this;  //获取参数  const args = Array.from(arguments).slice(1);  //绑定参数  const res = arguments.length>1?DoLi.func(...args):DoLi.func();  //清除定义的this  delete DoLi.func;  //返回结果  return res; } let a = {  name: 'I am a',  sayName: function(out){  console.log(this.name+(out?out:""));  } }; let b = {  name: 'I am b' }; a.sayName.apply(b,['我是额外参数','参数2'])  //输出结果：1 //输出结果：I am b我是额外参数,参数2 

难点：this指向和参数列表截取需要注意

手写apply

// 简易模拟实现--apply
Function.prototype.apply = function(context){
    console.log(1)
    //重定义this
    const DoLi = context || window;
 //模拟档期那的对象的this指向  DoLi.func = this;  //获取参数  const args = Array.from(arguments).slice(1,);  //绑定参数  const res = arguments.length>1?DoLi.func(args):DoLi.func();  //清除定义的this  delete DoLi.func;  //返回结果  return res; } let a = {  name: 'I am a',  sayName: function(out){  console.log(this.name+(out?out:""));  } }; let b = {  name: 'I am b' }; a.sayName.apply(b,['我是额外参数','参数2'])  //输出结果：1 //输出结果：I am b我是额外参数,参数2  

难点：能写出上面的call的话，这个只需要注意下第二个参数是数组就可以

手写bind

// 简易模拟实现--bind
Function.prototype.bind = function(context){
    console.log(1)
    //深拷贝，防止污染
    const DoLi = JSON.parse(JSON.stringify(context)) || window;
 //模拟档期那的对象的this指向  DoLi.func = this;  //获取参数  const args = Array.from(arguments).slice(1,);  // 返回一个绑定的函数，等待调用  return function() {  //返回结果  return args.length>0?DoLi.func(...args):DoLi.func();  } } let a = {  name: 'I am a',  sayName: function(out){  console.log(this.name+(out?out:""));  } }; let b = {  name: 'I am b' }; a.sayName.bind(b,['我是额外参数','参数2'])()  //输出结果：1 //输出结果：I am b我是额外参数,参数2 

难点：手写bind函数需要返回一个绑定函数，而不是一个结果。

好的，完成。

月如钩，无言独上西楼 ——煜李

本文使用 mdnice 排版