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


Posted in Javascript onAugust 14, 2019

在实现自己的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; // 返回拷贝的函数
};

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

Javascript 相关文章推荐
Angular Module声明和获取重载实例代码
Sep 14 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
微信小程序实现录音功能
Nov 22 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
微信小程序之数据绑定原理解析
Aug 14 #Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 #Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 #Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 #Javascript
vue filter 完美时间日期格式的代码
Aug 14 #Javascript
如何对react hooks进行单元测试的方法
Aug 14 #Javascript
vue 中 命名视图的用法实例详解
Aug 14 #Javascript
You might like
PHP网站备份程序代码分享
2011/06/10 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php单例模式示例分享
2015/02/12 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
js的event详解。
2006/09/06 Javascript
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
Javascript中Eval函数的使用说明
2008/10/11 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
20岁生日感言
2014/01/13 职场文书
高一历史教学反思
2014/01/13 职场文书
商业活动邀请函
2014/02/04 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书