自定义call&apply&bind的实现

仿造原生js的call,apply,bind的原理自定义绑定this的工具函数

实现思路:大致是改变函数执行环境中this的指向,这个this的指向根据谁调用了这个函数来决定,如果将这个函数成为某个对象方法,this就和这个对象进行了绑定。
注意:在自定义的函数中记得返回被调用的函数(this发生改变)其返回值,如果传入的对象是null或者undefined,则被调用的函数this指向window。
代码实现:
function Call (Fn,obj,...argument) {

 // 如果obj是null或者undefined,Fn的this指向window,所以由window来调用

 if (obj === undefined || obj === null) {

 obj = window

 }

 // 1.给obj添加一个属性,值为Fn,目的是改变this指向

 obj.tempFun = Fn

 // 2.调用该函数,改变执行环境中this的指向

 let result = obj.tempFun(...argument)

 // 3.删除obj添加的方法

 delete obj.tempFun

 // 4.返回函数执行的返回值

 return result

 }

 function Apply (Fn,obj,argument) {

 // 两者只是传参的形式不同,在函数体里调用自定义的Call函数,参数解构赋值即可

 return Call(Fn,obj,...argument)

 }

 function Bind (Fn,obj,...argument) {

 return function(...argument2) {

 Call(Fn,obj,...argument,...argument2)

  }

 }

验证结果:
function fn (a,b) {

 console.log(a,b,this)

 }

 let person = {name:'zhangsan',age: 10}

 fn(1,2)

 Call(fn,person,1,2)

 Call(fn,undefined,1,2)

 Apply(fn,person,[1,2])

 Apply(fn,null,[1,2])

 let bindFun = Bind(fn,person)

 bindFun(3,4)

原文链接:segmentfault.com

上一篇:kindEditor中上传回调与其他问题
下一篇:js如何获取上个月第一天和最后一天

相关推荐

  • 🔥 Promise|async|Generator 实现&原理大解析 | 9k字

    笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的...

    6 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 高阶函数&&高阶组件

    高阶函数 特点: 接受函数类型的参数。 返回值是函数。 高阶函数具有可扩展性。 常见的高阶函数: 定时器 setTimeout(); setInterval() Promise(); 数组相关:...

    7 个月前
  • 面板拖拽之vue自定义指令

    前言 在指令里获取的this并不是vue对象,vnode.context才是vue对象,一般来说,指令最好不要访问vue上的data,以追求解耦,但是可以通过指令传进来的值去访问method或ref之...

    1 年前
  • 静态网站自定义与构建(一)——静态网站生成器对比

    前言 静态网站和动态网站相比,比较明显的特征就是其不需要后台服务端支持,仅包含html、js、css前端三剑客。常见的静态网站用途有博客系统,文档管理系统,不过我还看到过有老的新闻网站也用静态系统.....

    8 天前
  • 钉钉小程序 之 自定义组件的使用,以及父组件与子组件(自定义组件)传值

    目录: 本机环境 自定义组件(子组件) 页面中引入(父组件引入子组件) 父组件(使用自定义组件的页面)传值给子组件 子组件(自定义组件)传值给父组件 备注 一、本机环境 本机系统: Mac 小...

    5 个月前
  • 重磅宣布, concent 2.0发布, 依赖收集&惰性计算

    夜已经很深了,这个时间宣布2.0版本算是一个抢先预告吧,接下来的一个月里会重点开始更新文档以及铺开更多的示例了。 两个版本的差异 1.* 版本为了尽量向上兼容古老的浏览器,没有使用任何新的es特性,但...

    7 个月前
  • 采用shell自定义脚本,控制集成部署环境更加方便灵活

    Jenkins 是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变得可能。现在软件开发追求的是效率以及质量,Jenkins使得自动化成为可能! 亮点 采用shell自定义脚本,控制...

    2 年前
  • 逻辑强化系列(一):彻底搞懂自定义组件使用 v-model

    前言 阅读本文前,希望你已经彻底理解了语法糖 v-model 以及父子组件之间的通讯方法 v-model 在组件上使用 v-model 之前首先要知道,v-model 的用处以及实际操作流程,以方便理...

    4 个月前
  • 通过字符串var [复制]获得自定义对象属性

    CommunityJay-Nicolas Hackleman提出了一个问题:Getting a Custom Objects properties by string var [duplicate],...

    3 年前

官方社区

扫码加入 JavaScript 社区