zoukankan      html  css  js  c++  java
  • 浅谈用原生 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 也就实现了。

  • 相关阅读:
    [转] 英语飙升的好方法
    jndi数据源方式配制SPY
    OJB查询
    ODP.NET应用之我所见
    C#中利用ODP实现瞬间导入百万级数据详解
    Sys.Extended.UI' is null or not an object 中文的訊息
    oracle数据库连接字符串
    seo
    宽幅FLASH产品展示代码多图带左右显示按钮 图
    网站盈利模式分类详解
  • 原文地址:https://www.cnblogs.com/xwant/p/7248139.html
Copyright © 2011-2022 走看看