new,call,apply,bind方法的实现原理

javascript中new,call,apply,bind等方法是我们经常要使用到,在伪数组转数组、函数传参、继承等场景中,都离不开他们。这里就不具体讨论他们的使用方法,我们将研究他们的实现方式,重写属于我们自己的方法,让大家重新认识他们的实现过程,使我们在开发中知其然,知其所以然!

new的实现

我们用new实例化一个构造函数,生成一个实例对象,而new到底做了什么呢,主要分为以下五步:

  • 1: 获取构造函数
  • 2:创建一个新对象;
  • 3:将函数的作用域赋给新对象(这里实际上就是生产了一个新的上下文)
  • 4:执行函数中的代码(为新对象添加属性、方法)
  • 5:返回值,无返回值或者返回一个非对象值时,则将创建的新对象返回,否则会将返回值作为新对象返回。(也就是说一定会返回一个对象回来,这一步可以从下面的代码得结论)
    function MyNew() {
      let Constructor = Array.prototype.shift.call(arguments); // 1:取出构造函数

      let obj = {} // 2:执行会创建一个新对象

      obj.__proto__ = Constructor.prototype // 3:该对象的原型等于构造函数prototype

      var result = Constructor.apply(obj, arguments) // 4: 执行函数中的代码

      return typeof result === 'object' ? result : obj // 5: 返回的值必须为对象
    }
  • MyNew方法校验
    function Man(name, age) {
      this.name = name
      this.age = age
    }
    var tom = new Man('tom', 20)
    var mike = MyNew(Man, 'mike', 30)
    console.log(tom  instanceof Man, mike instanceof Man) // true true

call的实现

call方法的实现主要有以下三步,比如 fn.call(obj, a, b)

  • 1: 把调用函数fn的上下文指向obj
  • 2: 形参a,b等是以逗号分隔传进去
  • 3: 执行函数fn,并返回结果
    Function.prototype.myCall = function (context) {
      context = context ? Object(context) : window 
      context.fn = this // 重置上下文
      let args = [...arguments].slice(1) // 截取参数a,b
      let r = context.fn(...args) // 执行函数
      delete context.fn // 删除属性,避免污染
      return r // 返回结果
    }
  • myCall方法校验
    // 浏览器环境下
    var a = 1, b = 2;
    var obj ={a: 10,  b: 20}
    function test(key1, key2){
      console.log(this[key1] + this[key2]) 
    }
    test('a', 'b') // 3
    test.myCall(obj, 'a', 'b') // 30
    

apply的实现

apply方法和call方法大同小异,唯一差别就是,apply传入的参数是数组格式。

    // apply 原理
    Function.prototype.myApply = function (context) {
      context = context ? Object(context) : window
      context.fn = this
      let args = [...arguments][1]
      if (!args) {
        return context.fn()
      }
      let r = context.fn(...args)
      delete context.fn;
      return r
    }
  • apply方法校验
    // 浏览器环境下
    var a = 1, b = 2;
    var obj ={a: 10,  b: 20}
    function test(key1, key2){
      console.log(this[key1] + this[key2]) 
    }
    test('a', 'b') // 3
    test.myCall(obj, ['a', 'b']) // 30  注意这里是传入数组 ['a', 'b']

bind方法实现

bind方法和call、apply方法的差别是,他们都改变了上下文,但是bind没有立即执行函数。

    // bind 原理
    Function.prototype.Mybind = function (context) {
      let _me = this
      return function () {
        return _me.apply(context)
      }
    }
  • bind方法校验
    var a = 1, b = 2;
    var obj ={a: 10,  b: 20}
    function test(key1, key2){
      console.log(this[key1] + this[key2]) 
    }
    var fn = test.bind(obj)
    fn('a', 'b') // 30

好了,介绍完了,如果觉得对你有帮助,点个赞哈,嘿嘿!

参考文章来源:

阅读 1.1k

推荐阅读
目录