如何使用50行javaScript代码实现简单版的call,apply,bind

 更新时间:2019年08月14日 11:50:54   作者:Peter谭金杰  
这篇文章主要介绍了50行javaScript代码实现简单版的call,apply,bind过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

在实现自己的call,apply,bind前,需要复习一下this.

所谓的this其实可以理解成一根指针:

其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,这就是精髓。最关键所在

this的四种指向:

当this所在的函数被普通调用时,指向window,如果当前是严格模式,则指向undefined

function test() {
 console.log(this);
};

test();
指向window 输出下面的代码:
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}
严格模式
'use strict';
function test() {
 console.log(this);
};
test();
// undefined

当this所在当函数被以obj.fn()形式调用时,指向obj

var obj = {
 name: 'segmentFault',
 foo: function() {
  console.log(this.name);
 }
}
obj.foo();
// 'segmentFault'

还可以这么做

function test() {
 console.log(this.name);
}
var obj = {
 name: 'qiutc',
 foo: test
}
obj.foo();
// 'qiutc'

当call,apply加入后,this的指向被改变了

 function a(a,b,c) {
    console.log(this.name);
    console.log(a,b,c)
  }
  const b = {
    name: "segmentFault"
  }
  a.call(b,1,2,3)    
  //输出 segmentFault和 1,2,3
  function a(a,b,c) {
    console.log(this.name);
    console.log(a,b,c)
  }
  a.apply(b,[1,2,3])
  //输出segmentFault和1,2,3

遇到bind后 :

  function a() {
    console.log(this.name);
  }
  const b = {
    name: "segmentFault"
  }
  a.bind(b, 1, 2, 3)

此时控制台并没有代码输出,因为bind会重新生成并且返回一个函数,这个函数的this指向第一个参数

  function a() {
    console.log(this.name);
  }
  const b = {
    name: "segmentFault"
  }
  const c = a.bind(b, 1, 2, 3)
  c()
  //此时输出segmentFault

正式开始自己实现call :

在函数原型上定义自己的myCall方法:

 Function.prototype.myCall = function (context, ...arg) {
    const fn = Symbol('临时属性')
    context[fn] = this
    context[fn](...arg)
    delete context[fn]
  }

四行代码实现了简单的call,思路如下:

  • 通过对象属性的方式调用函数,这个函数里面的this指向这个对象
  • 每次调用新增一个symbol属性,调用完毕删除
  • 这个symbol属性就是调用mycall方法的函数
  • 函数形参中使用...arg是将多个形参都塞到一个数组里,在函数内部使用arg这个变量时,就是包含所有形参的数组
  • 在调用 context[fn](...arg)时候,...arg是为了展开数组,依次传入参数调用函数

为了简化,今天都不做类型判断和错误边际处理,只把原理讲清楚。

自己实现apply

在函数原型上定义自己的myApply方法:

//实现自己的myApply
  Function.prototype.myApply = function (context, arg) {
    const fn = Symbol('临时属性')
    context[fn] = this
    context[fn](...arg)
    delete context[fn]
  }
  const obj2 = {
    a: 1
  }
  test.myApply(obj2, [2, 3, 4])

同理,只是apply传递的第二个参数是数组,这里我们只需要在调用时,将参数用...把数组展开即可

自己实现bind:

bind跟apply,call的本质区别,bind不会改变原函数的this指向,只会返回一个新的函数(我们想要的那个this指向),并且不会调用。但是apply和bind会改变原函数的this指向并且直接调用

bind在编写框架源码,例如koa等中用得特别多:

 //实现自己的myBind
  Function.prototype.myBind = function (context, ...firstarg) {
    const that = this
    const bindFn = function (...secoundarg) {
      return that.myCall(context, ...firstarg, ...secoundarg)
    }
    bindFn.prototype = Object.create(that.prototype)
    return bindFn
  }

  var fnbind = test.myBind(obj, 2)
  fnbind(3)

同理 自己定义好原型上的myBind方法

this劫持 保留最初的调用mybind方法的那个对象

返回一个新的函数 这个新的函数内部this指向已经确定,使用的是我们的mycall方法

学习需要循序渐进,建议根据本文顺序去封装一遍,是比较轻松的,当然bind还需要判断是否是new调用.

完整版本bind

Function.prototype.myBind = function (objThis, ...params) {
  const thisFn = this; // 存储源函数以及上方的params(函数参数)
  // 对返回的函数 secondParams 二次传参
  let fToBind = function (...secondParams) {
    console.log('secondParams',secondParams,...secondParams)
    const isNew = this instanceof fToBind // this是否是fToBind的实例 也就是返回的fToBind是否通过new调用
    const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上
    return thisFn.call(context, ...params, ...secondParams); // 用call调用源函数绑定this的指向并传递参数,返回执行结果
  };
  fToBind.prototype = Object.create(thisFn.prototype); // 复制源函数的prototype给fToBind
  return fToBind; // 返回拷贝的函数
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js让一行页脚保持在底部

    js让一行页脚保持在底部

    所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;
    2008-04-04
  • 在子窗口中关闭父窗口的一句代码

    在子窗口中关闭父窗口的一句代码

    在子窗口中关闭父窗口在某些特殊的情况下还是有存在的必要的,其实很简单,只需一句代码便可实现,感兴趣的朋友可以了解下
    2013-10-10
  • JS中使用 after 伪类清除浮动实例

    JS中使用 after 伪类清除浮动实例

    这篇文章主要介绍了使用 after 伪类清除浮动实例,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-03-03
  • javascript读写XML实现广告轮换(兼容IE、FF)

    javascript读写XML实现广告轮换(兼容IE、FF)

    最近更新网站首页广告,ASP.NET的广告控件很容易实现这点,可首页是静态页面,联想广告控件的原理决定采用javascript+xml实现这点方面配置,更新广告时只要更新xml即可,方便了广告轮换
    2013-08-08
  • 获取JS中网页各种高宽与位置的方法总结

    获取JS中网页各种高宽与位置的方法总结

    本文详细罗列了如何在javascript获取网页各种高宽及位置,内容比较全面,有需要的可以参考一下。
    2016-07-07
  • JavaScript中concat复制数组方法浅析

    JavaScript中concat复制数组方法浅析

    在本篇文章里小编给大家总结了关于JavaScript中concat复制数组方法知识点,有需要的朋友们可以学习下。
    2019-01-01
  • DWR中各种java方法的调用

    DWR中各种java方法的调用

    DWR是一个框架,简单的说就是能够在javascript直接调用java方法,而不必去写一大堆的javascript代码。它的实现是基于ajax的,可以实现无刷新效果。不少DWR的例子,但大都只是某种方法的调用只在使用层面上介绍DWR,并不涉更多的技术与设计javascript中是如何调用的。
    2016-05-05
  • js监听鼠标点击和键盘点击事件并自动跳转页面

    js监听鼠标点击和键盘点击事件并自动跳转页面

    这篇文章主要介绍了js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,很简单的一个实现
    2014-09-09
  • js实现一个简易的计算器

    js实现一个简易的计算器

    这篇文章主要为大家详细介绍了js实现一个简易的计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • webpack几种手动实现HMR的方式

    webpack几种手动实现HMR的方式

    众所周知,在webpack中使用模块热替换(HMR),能够使得应用在运行时,本文就介绍一下如何实现HMR,感兴趣的可以了解一下
    2021-07-07

最新评论