• 浅谈用原生 js 实现函数的 bind 方法


    bind的作用是让目标函数执行时候的 this 改为指定的上下文。

    一般情况下,this 取决于调用者,谁调用函数 this 就是谁(自执行函数、定时器……之类的特殊情况除外)。

    有那么一句话,在 JavaScript 中,万物皆对象。

     1 var want = function want() {
     2     console.log(this);
     3 }
     4 
     5 var good = function good() {
     6     console.log('https://www.cnblogs.com/xwant')
     7 }
     8 
     9 good.go = want;
    10 
    11 good.go();
    12 
    13 // 控制台打印出good这个函数

    函数也是一个对象,以对象调用函数的方式执行这个函数,这个函数的指向就变为了这个调用者。

    那么现在将这个方式封装成一个方法。

    1 Function.prototype._bind = function _bind(context) {
    2      if(typeof context === 'function') return this;
    3      context.fuc = this;
    4 return function () { 5 context.fuc(...arguments) 6 } 7 };

    在这里利用 JavaScript 的这个特性,将这个函数,写到了指定上下文的一个属性下。

    由于直接返回 context.fun 的话,返回的其实是 context.fun 代表的这个函数体。

    所以在调用这个方法的时候,方法中 this 还是指向的 window ,于是这里套用了一个匿名函数来解决这个问题。

    由于不知道要修改 this 的函数是否有形参,所以在执行的时候把匿名函数中的 arguments 拉下来,在函数执行时,将 arguments 以 ES6 的新特性解构赋值的方式传进去,由此,函数的参数问题也解决了(只测试了简单的传参没有深入测试)。

    当然,这里只论方法暂且就不说性能方面的问题。

    通过 .call 或者 .apply 的方式也可以实现 bind 方法,这里不多讨论。

    把上面的代码改巴改巴, .call 和 .apply 也就实现了。

  • 相关阅读:
    172. Factorial Trailing Zeroes
    96. Unique Binary Search Trees
    95. Unique Binary Search Trees II
    91. Decode Ways
    LeetCode 328 奇偶链表
    LeetCode 72 编辑距离
    LeetCode 226 翻转二叉树
    LeetCode 79单词搜索
    LeetCode 198 打家劫舍
    LeetCode 504 七进制数
  • 原文地址:https://www.cnblogs.com/xwant/p/7248139.html
Copyright © 2020-2023  润新知