JavaScript 中 call()、applay()、bind()的用法
2022/2/24 14:21:19
本文主要是介绍JavaScript 中 call()、applay()、bind()的用法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
很多人分不清这三个的用法,其实很简单
例子一:
var name = "张三", age = 23; var obj = { name: "李四", objAge: this.age, myFun: function() { console.log(`我叫${this.name}, 今年${this.age}了`); } } console.log(obj.objAge); // 23 obj.myFun(); // 我叫李四, 今年undefined了
例子二:
var fva = "孤语"; function show () { console.log(this.fva); } show(); // 孤语
例子一和例子二的区别在于,例子一打印里面的this指向的是 obj, 例子二打印里的this指向的是 window。
call(), apply(), bind() 都是重新定义 this 指向的
var name = "张三", age = 23; var obj = { name: "李四", objAge: this.age, myFun: function() { console.log(`我叫${this.name}, 今年${this.age}了`); } } var data = { name: "赵云", age: 22 } obj.myFun.call(data); // 我叫赵云, 今年22了 obj.myFun.apply(data); // 我叫赵云, 今年22了 obj.myFun.bind(data)(); // 我叫赵云, 今年22了
上面三个方法除了bind多了个()以外,返回结果都一致;
这说明bind()返回的是一个新的函数,必须调用才会被执行。
对比call, apply, bind 传参的情况
var name = "张三", age = 23; var obj = { name: "李四", objAge: this.age, myFun: function(from, to) { console.log(`我叫${this.name}, 今年${this.age}了, 来自${from}, 去往${to}`); } } var data = { name: "赵云", age: 22 } var xa = "西安", sh = "上海" obj.myFun.call(data, xa, sh); // 我叫赵云, 今年22了, 来自西安, 去往上海 obj.myFun.apply(data, [xa, sh]); // 我叫赵云, 今年22了, 来自西安, 去往上海 obj.myFun.bind(data, xa, sh)(); // 我叫赵云, 今年22了, 来自西安, 去往上海 obj.myFun.bind(data, [xa, sh])(); // 我叫赵云, 今年22了, 来自西安,上海, 去往undefined
从上面的结果可以看出:
call, apply, bind 这三个函数的第一个参数都是this的指向对象;
第二个参数有所差异:
call的参数是直接放进去,可以理解成obj.myFun.call(data, "上海", ..., "string");
apply 的所有参数又必须放到一个数组里面,可以理解成 obj.myFun.apply(data, ["上海", ..., "string"]);
bind除了返回函数以外,传参方式和call相同。
注意:三者的参数不限定是 string 类型,允许是各种类型,包括函数、object 等等
这篇关于JavaScript 中 call()、applay()、bind()的用法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南