原生js如何实现call,apply以及bind
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要介绍了原生js实现call,apply以及bind,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下
1、实现call
步骤:
- 将函数设为对象的属性;
- 指定this到函数,并传入给定参数执行函数;
- 执行之后删除这个函数;
- 如果不传入参数,默认指向window;
Function.prototype.mycall = function (context, ...args) { //判断是否为函数,如果不是函数,则报错 if (typeof this !== "function") { throw new Error("不是函数"); } context = context || window; context.fn = this; const res = context.fn(...args); delete context.fn; return res; }
测试代码:
var name = "李辉", age = 25; var obj = { name: "周果", objAge: this.age, myFun: function (fm, to) { console.log(`名字:${this.name},年龄:${this.age},来自:${fm},去往:${to}`) } }; var person = { name: "弟弟", age: 12, }; Function.prototype.mycall = function (context, ...args) { //判断是否为函数,如果不是函数,则报错 if (typeof this !== "function") { throw new Error("不是函数"); } context = context || window; context.fn = this; const res = context.fn(...args); delete context.fn; return res; } obj.myFun.mycall(person, "成都", "仁寿"); //名字:弟弟,年龄:12,来自:成都,去往:仁寿
2、实现apply
Function.prototype.myApply = function (context, ...args) { //判断是否为函数,如果不是函数,则报错 if (typeof this !== "function") { throw new Error("不是函数"); } context = context || window; context.fn = this; args = args && args[0] || []; const result = context.fn(...args); delete context.fn; return result; }
测试代码:
obj.myFun.myApply(person, ["成都", "仁寿"]); //名字:弟弟,年龄:12,来自:成都,去往:仁寿
3、实现bind
bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值。
方法1:使用apply
Function.prototype.myBind = function () { let self = this; //保存原函数 let context = [].shift.call(arguments); //保存需要绑定的this上下文 let args = [...arguments]; //将传入的剩余参数转换成数组 return function () { //返回一个新的函数 self.apply(context,[].concat.call(args,[...arguments])); } }
ES6简化一下:
Function.prototype.myBind = function (context, ...args1) { return (...args2) => { //返回箭头函数, this绑定调用这个方法的函数对象 context = context || window; return this.apply(context, args1.concat(args2));//合并参数 } }
方法2:不使用call以及apply
将上面的代码和js手写实现apply的代码合并一下:
Function.prototype.myBind = function (context, ...args1) { return (...args2) => { //返回箭头函数, this绑定调用这个方法的函数对象 context = context || window; context.fn = this; const args = args1.concat(args2); const res = context.fn(...args); delete context.fn; return res; } }
测试代码:
obj.myFun.myBind(person, "成都", "仁寿")();//名字:弟弟,年龄:12,来自:成都,去往:仁寿
以上就是原生js如何实现call,apply以及bind的详细内容,更多关于js实现call,apply以及bind的资料请关注狼蚁SEO其它相关文章!
上一篇:vue实现图形验证码
下一篇:vue项目实现图形验证码
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程