为了账号安全,请及时绑定邮箱和手机立即绑定

模拟call、apply和bind方法以及new操作符的实现

标签:
JavaScript

在模拟实现 call、apply 和 bind 方法以及 new 操作符的过程中,能让我们更好的理解他们的运行原理。

1、区别

call 、apply 和 bind 方法都是为了解决改变 this 的指向。

call 、apply 方法都是在传入一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。作用都是相同的,只是传参的形式不同。
除了第一个参数外,call 接收一个参数列表,apply 接受一个参数数组。使用 call 、apply 方法该函数会被执行

bind 和其他两个方法作用也是一致的,只是该方法会返回一个函数。即使用 bind 方法该函数不会被执行(返回该函数)。并且我们可以通过 bind 实现柯里化。

let a = {    value: 1}function getValue(name, age) {    console.log(name, age)    console.log(this.value)
}
getValue.call(a, 'xql', '18')
getValue.apply(a, ['xql', '18'])

getValue.bind(a, 'xql', '18') 
// getValue.bind(a, 'xql', '18')() 执行该函数

2、模拟实现 call 和 apply

  1. 先看看call 和 apply 方法发生了什么?

  • 改变了 this 的指向,指向到 a

  • getValue 函数执行了

  1. 该怎么模拟实现这两个效果呢?

既然 call 和 apply 方法是改变了 this 指向,让新的对象可以执行该函数,那么思路是否可以变成给新的对象添加一个函数(将函数设为对象的属性),然后在执行完以后删除?

Function.prototype.myCall = function(objCtx) {    if (typeof this !== 'function') {      throw new TypeError('Error')
    }    let ctx = objCtx || window;    let args = [...arguments].slice(1);    // let args = Array.prototype.slice.call(arguments, 1)
    
    ctx.fn = this;    let result = ctx.fn(...args);    delete ctx.fn;    return result; // 函数是可以有返回值的}// 测试一下let a = {    value: 1}function getValue(name, age) {    console.log(this.value)    return {        name: name,        age: age,        value: this.value
    }
}

getValue.myCall(a, 'xql', '19')
getValue.myCall(null)console.log(a)

fn 是对象的属性名,因为最后要delete,这里可以是任意名称。

以上就是 call 方法的思路,apply 方法的实现也类似。

Function.prototype.myApply = function(objCtx) {    if (typeof this !== 'function') {      throw new TypeError('Error')
    }    let ctx = objCtx || window;
    ctx.fn = this; // 属性名fn可以任意
    
    let result;    // 需要判断是否存在第二个参数
    if (arguments[1]) {
        result = ctx.fn(...arguments[1]);
    } else {
        result = ctx.fn();
    }    delete ctx.fn;    return result;
}

3、bind 方法的模拟实现

  1. bind 函数的两个特点?

  • 可以传入参数

  • 返回一个函数

① 其中,对于 bind 函数中的传入参数有个特点

既然在使用 bind 函数的时候,是可以传参的。那么,在执行 bind 返回的函数的时候,可不可以传参呢? 类似函数柯里化。

let foo = {    value: 1};function getValue(name, age) {    console.log(this.value);    console.log(name, age);
}let bindFoo = getValue.bind(foo, 'xql');
bindFoo('18');

② 另外,因为 bind 函数返回一个新函数,所以 bind 函数还有一个特点

当 bind 返回的函数作为构造函数的时候,bind 时指定的 this 值会失效,但传入的参数依然生效。

一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数(调用 bind 方法的函数)当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

  var value = 2;  
  var foo = {      value: 1
  };  function bar(name, age) {      this.habit = 'shopping';      console.log(this.value);      console.log(name, age);
  }

  bar.prototype.friend = 'shuaige';  let bindFoo = bar.bind(foo, 'xql');  var obj = new bindFoo('18');  // undefined 这里对 bind 函数绑定的 this 失效了
  // xql 18
  console.log(obj.habit);  console.log(obj.friend);

注意:尽管在全局和 foo 中都声明了 value 值,最后依然返回了 undefind,说明绑定的 this 失效了,这里可以查看 new 的模拟实现,就会知道这个时候的 this 已经指向了 obj。

  1. 实现步骤

  • 首先实现传参;

Function.prototype.myBind = function (objCtx) {    let ctx = objCtx || window;    let _this = this;    let args = [...arguments].slice(1);    
    return function () {        // 这里的 arguments 与上面的 arguments 的值是不同的 这里是对返回函数所传入的参数  下面是将类数组 arguments 转为数组的两种方式 这里在使用的时候要记得转化为数组 
        // args.concat(arguments) 这样使用会出现问题 arguments 是个类数组对象
        // let bindArgs = [...arguments]
        // let bindArgs = Array.prototype.slice.call(arguments)
        return _this.apply(ctx, args.concat(...arguments)) // 为什么要写return 因为绑定函数(函数)是可以有返回值的
    }
}// 测试一下
  var foo = {      value: 1
  };  
  function bar(name, age) {      this.habit = 'shopping';      console.log(this.value);      console.log(name, age);
  }  
  let bindFoo = bar.myBind(foo, 'xql');
  bindFoo('1111')
  • 其次,实现绑定函数(调用 bind 方法的函数)作为构造函数进行使用的情况;

Function.prototype.myBind = function (objCtx) {    let ctx = objCtx || window;    let _this = this;    let args = [...arguments].slice(1);    
    let Fbind = function () {        // 当 Fbind 作为构造函数时,这里的 this 指向实例
        let self = this instanceof Fbind ? this : ctx;        return _this.apply(self, args.concat(...arguments));
    }
    
    Fbind.prototype = this.prototype; // // 修改返回函数的 prototype 为绑定函数的 prototype,实例就可以继承绑定函数的原型中的值
    // 不要写成 Fbind.prototype = ctx.prototype;
    
    return Fbind;
}

这里,我们直接将 Fbind.prototype = this.prototype,会导致修改 Fbind.prototype 的时候,也会直接修改绑定函数的 prototype。这个时候,我们可以通过一个空函数来进行中转( js 高程中成为原型式继承)。

  1. 最终的实现为:

Function.prototype.myBind = function (objCtx) {    if (typeof this !== 'function') {        throw new TypeError('Error');
    }    let ctx = objCtx || window;    let _this = this;    let args = [...arguments].slice(1);    
    let Fbind = function () {        let self = this instanceof Fbind ? this : ctx;        return _this.apply(self, args.concat(...arguments));        // 这里可以使用 call 方法
        // let bindArgs = args.concat(...arguments);
        // return _this.call(self, ...bindArgs);
    }    
    let f = function () {};
    f.prototype = this.prototype;
    Fbind.prototype = new f();    
    return Fbind;
} // 测试一下 
 var value = 2; var foo = {     value: 1
 }; function bar(name, age) {     this.habit = 'shopping';     console.log(this.value); // undefined
     console.log(name, age);
 }

 bar.prototype.friend = 'shuaige'; var bindFoo = bar.myBind(foo, 'xql'); var obj = new bindFoo('18'); console.log(obj.habit); console.log(obj.friend);

其中,Object.create()模拟实现为:(Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。 )

Object.create = function( o ) {    function f(){}
    f.prototype = o;    return new f;
};

4、new操作符的模拟实现

通过 new 操作符的模拟实现,来看看使用 new 获得构造函数实例的原理。

  1. 先来看看使用 new 操作符发生了什么?

  • 创建一个空对象;

  • 该空对象的原型指向构造函数(链接原型):将构造函数的 prototype 赋值给对象的 __proto__属性;

  • 绑定 this:将对象作为构造函数的 this 传进去,并执行该构造函数;

  • 返回新对象:如果构造函数返回的是一个对象,则返回该对象;否则(若没有返回值或者返回基本类型),返回第一步中新创建的对象;

举例说明:

  • 构造函数没有返回值的情况:

  function Angel (name, age) {      this.name = name;      this.age = age;      this.habit = 'Games';
  }

  Angel.prototype.strength = 60;

  Angel.prototype.sayYourName = function () {      console.log('I am ' + this.name);
  }  var person = new Angel('xql', '18');  console.log(person.name, person.habit, person.strength) // xql Games 60
  person.sayYourName(); // I am xql
  • 构造函数有返回值的情况:返回对象 or 返回基本类型(返回 null )

  function Angel (name, age) {      this.strength = 60;      this.age = age;      return {          name: name,          habit: 'Games'
      }
  }  var person = new Angel('xql', '18');  console.log(person.name, person.habit) // xql Games 60
  console.log(person.strength, person.age) // undefined undefined
  function Angel (name, age) {      this.strength = 60;      this.age = age;      return '111' // 和没有返回值以及 return null 效果是一样的
  }  var person = new Angel('xql', '18');  console.log(person.name, person.habit) // undefined undefined
  console.log(person.strength, person.age) // 60 "18"
  1. 具体实现

因为 new 是关键字, 我们只能写一个函数来模拟了,构造函数作为参数传入。

// 使用 newvar person = new Angel(……);// 使用 objectFactoryvar person = objFactory(Angel, ……)
function objFactory () {  let obj = {};  // let obj = new Object ();
  // 取出参数中的第一个参数即构造函数, 并将该参数从 arguments 中删掉
  let Con = [].shift.call(arguments); // 不要写成 [].prototype.shift.call(arguments)
  
  obj._proto_ = Con.prototype;  
  let result = Con.apply(obj, arguments);  // let result = Con.apply(obj, [...arguments]);
  // let result = Con.call(obj, ...arguments)
  
  return Object.prototype.toString.call(result) === '[object Object]' ? result : obj;  // 这里用typeof result == 'object' 进行判断会有个问题:当构造函数返回 null 时,会报错,因为 typeof null == 'object'
  // 应该是除了构造函数返回一个对象,其他的都返回新创建的对象} // 测试一下function Angel (name, age) {  this.strength = 60;  this.age = age;  return null}var person = objFactory(Angel, 'Kevin', '18');console.log(person.name, person.habit); // undefined undefinedconsole.log(person.strength, person.age) // 60 "18"

3、 小知识点

  1. 对于创建一个对象来说,更推荐使用字面量的方式创建对象(无论性能上还是可读性)。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object,但是你使用字面量的方式就没这个问题。

  2. 对于 new 来说,还需要注意下运算符优先级。

function Foo() {    return this;
}
Foo.getName = function () {    console.log('1');
};
Foo.prototype.getName = function () {    console.log('2');
};new Foo.getName();   // -> 1new Foo().getName(); // -> 2



作者:黎贝卡beka
链接:https://www.jianshu.com/p/097f995178e1


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消