JavaScript 中 call()、apply()、bind() 的用法

举报
青年码农 发表于 2022/08/25 22:05:15 2022/08/25
【摘要】 在JavaScript 中,call、apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数调用过程中的 this 指向 1 apply Function.apply(obj,args) apply方法接收两个参数 obj:这个对象将代替Function类里this对象...

在JavaScript 中,call、apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数调用过程中的 this 指向

1 apply

Function.apply(obj,args)
  

apply方法接收两个参数

  1. obj:这个对象将代替Function类里this对象

  2. args:这个是数组,它将作为参数传给Function(args-->arguments)

不带第一个参数


   
  1. var person = {
  2.     fullName: function() {
  3.         return this.firstName + " " + this.lastName;
  4.     }
  5. }
  6. var person1 = {
  7.     firstName: "Bill",
  8.     lastName: "Gates",
  9. }
  10. person.fullName.apply(person1);  // 将返回 "Bill Gates"

带全部参数


   
  1. var person = {
  2.   fullName: function(city, country) {
  3.     return this.firstName + " " + this.lastName + "," + city + "," + country;
  4.   }
  5. }
  6. var person1 = {
  7.   firstName:"John",
  8.   lastName: "Doe"
  9. }
  10. person.fullName.apply(person1, ["Oslo""Norway"]);

2 call

Function.call(obj[,params...])
  

call方法接收两个参数

  1. obj:这个对象将代替Function类里this对象

  2. args:这个是一个参数列表

不带第一个参数


   
  1. var person = {
  2.     fullName: function() {
  3.         return this.firstName + " " + this.lastName;
  4.     }
  5. }
  6. var person1 = {
  7.     firstName:"Bill",
  8.     lastName: "Gates",
  9. }
  10. var person2 = {
  11.     firstName:"Steve",
  12.     lastName: "Jobs",
  13. }
  14. person.fullName.call(person1);  // 将返回 "Bill Gates"

带全部参数


   
  1. var person = {
  2.   fullName: function(city, country) {
  3.     return this.firstName + " " + this.lastName + "," + city + "," + country;
  4.   }
  5. }
  6. var person1 = {
  7.   firstName:"Bill",
  8.   lastName: "Gates"
  9. }
  10. person.fullName.call(person1, "Seattle""USA");

3 bind

Function.bind(obj[,params...])
  

bind是ES5 新增的一个方法,它的传参和call类似,也是接收两个参数。

  1. obj:这个对象将代替Function类里this对象

  2. args:这个是一个参数列表

不带第一个参数


   
  1. var person = {
  2.     fullName: function() {
  3.         return this.firstName + " " + this.lastName;
  4.     }
  5. }
  6. var person1 = {
  7.     firstName:"Bill",
  8.     lastName: "Gates",
  9. }
  10. var person2 = {
  11.     firstName:"Steve",
  12.     lastName: "Jobs",
  13. }
  14. person.fullName.call(person1)();  // 将返回 "Bill Gates"

带全部参数


   
  1. var person = {
  2.   fullName: function(city, country) {
  3.     return this.firstName + " " + this.lastName + "," + city + "," + country;
  4.   }
  5. }
  6. var person1 = {
  7.   firstName:"Bill",
  8.   lastName: "Gates"
  9. }
  10. person.fullName.call(person1, "Seattle""USA")();

可以从上面看出,使用方法基本和call一致,只是后面多了(),其实是bind不会立即执行对应的函数,只是返回对函数的引用。那为什么要引入bind呢,是因为call和apply会自动执行目标函数,从而无法绑定在事件上,因为事件是我们手动触发的,而bind不会自动执行目标函数。

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/125066704

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。