call、apply、bind 原理实现

2020-4-6    seo达人

目录

  1. call 的模拟实现
  2. apply 的模拟实现
  3. bind 的模拟实现
  4. 三者异同



    学习并参考于：



    JavaScript深入之call和apply的模拟实现



    JS的call,apply与bind详解，及其模拟实现





    （一）call的模拟实现

    call 用法 ： MDN Function.prototype.call()



    call() 方法使用一个指定的 this 值和可选的参数列表来调用一个函数。



    call() 提供新的 this 值给当前调用的函数/方法。


  5. call 实现主要思路：

    将函数设为对象的属性



    执行该函数



    删除该函数



    另外还有考虑：



    call 函数还能给定参数执行函数

    this 参数不传，或者传null，undefined， this指向window对象

    函数是可以有返回值的
  6. 实现：

    Function.prototype.myCall = function () {

      if (typeof this !== 'function') {

        throw new TypeError('error!')

      }

      let context = arguments[0] || window   //this 参数可以传 null，当为 null 的时候，视为指向 window

      context.fn = this  // 首先要获取调用call的函数，用this可以获取

      let args = [...arguments].slice(1) //从 Arguments 对象中取值，取出第二个到最后一个参数   

      let result = context.fn(...args)  //函数是可以有返回值的

      delete context.fn

      return result

    }


  7. 测试：

    // 测试一下上面实现的myCall

    var value = 2;



    var obj = {

        value: 1

    }



    function bar(name, age) {

        console.log(this.value);

        return {

            value: this.value,

            name: name,

            age: age

        }

    }



    bar.call(null); // 2



    console.log(bar.myCall(obj, 'kevin', 18));

    // 1

    // Object {

    //    value: 1,

    //    name: 'kevin',

    //    age: 18

    // }



    （二）apply 的模拟实现

    apply 用法：MDN Function.prototype.apply()



    apply() 方法使用一个指定的 this 值和可选的参数数组 来调用一个函数。



    apply 的实现跟 call 类似。


  8. 实现：

    Function.prototype.myApply = function () {

      if (typeof this !== 'function') {

        throw new TypeError('error!')

      }

      let context = arguments[0] || window

      context.fn = this

      let result = arguments[1] ? context.fn(...arguments[1]) : context.fn()

      delete context.fn

      return result

    }


  9. 测试：

    var foo = {

        value: 1

    }

    function bar(name, age) {

        console.log(name)

        console.log(age)

        console.log(this.value);

    }

    bar.myApply(foo, ['black', '18']) // black 18 1



    （三）bind 的模拟实现

    bind 用法：MDN Function.prototype.bind()



    bind()方法会创建一个新函数，称为绑定函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。



    bind是ES5新增的一个方法，不会执行对应的函数，而是返回对绑定函数的引用。


  10. 实现：

    Function.prototype.customBind = function () {

      if (typeof this !== 'function') {

        throw new TypeError('error!')

      }

      const that = this   // 首先要获取调用bind的函数，用this获取并存放在that中

      let context = arguments[0] || window

      const args = [...arguments].slice(1)

      return function() {

        return that.apply(context, args.concat([...arguments]))

      }

    }



    （四）三者异同
  11. 相同：

    改变函数体内 this 的指向
  12. 不同：

    call、apply的区别：call方法接受的是参数列表，而apply方法接受的是一个参数数组。

    bind不立即执行。而call或apply会自动执行对应的函数。


分享本文至：
« TinyUI-TUIListView最简单的使用 JavaScript 的简述与基础语法 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档