ES5-call apply bind

最新推荐文章于 2024-09-26 09:06:15 发布

阿瑾的小窝

最新推荐文章于 2024-09-26 09:06:15 发布

阅读量200

点赞数 1

分类专栏： es5 6

本文链接：https://blog.youkuaiyun.com/weixin_42931345/article/details/106032376

版权

es5 6 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了JavaScript中用于改变函数内部`this`指向的方法：call、apply和bind。当函数执行时，若`this`不是预期的对象，可以使用这三个方法进行替换。call和apply主要用在临时替换函数的`this`，而bind则创建一个新函数，永久绑定`this`到指定的对象。此外，apply与call的区别在于传递参数的方式，apply接受一个参数数组，call则直接传递参数列表。bind除了绑定`this`，还可以预设函数的部分参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

替换函数中不想要的this!
何时：只要函数执行时，其中的this不是想要的，都要用这三个去换
如何：

1. call/apply(调用/用)

何时：在本次调用函数时，临时替换一次this!
如何：任意函数.call(任意对象，实参值列表…)
比如：

calc.call(lilei,10000,2000,3000);

调用全局函数calc时，临时将其中的this替换为lilei
this.ename，就变为lilei.ename。
在这里插入图片描述

function calc(base, bonus1, bonus2) {
    console.log(`${this.ename} 的总工资是：${base+bonus1+bonus2}`);
}
var lilei = {
    ename: "Li Lei"
}
var hmm = {
    ename: "Han Meimei"
}
calc(10000, 2000, 6000); //undefined 的总工资是：18000
//this -> window

hmm.calc(15000, 2000, 3000); //Uncaught TypeError: hmm.calc is not a function
calc.call(lilei, 18000, 3000, 4000);	//Li Lei 的总工资是：25000

2.apply

如果实参值列表是以数组形式给的，则必须将call换成apply
如何：

var arr = [10000,2000,3000]	//实参列表
calc.apply(lilei,arr);

用lilei调用calc,但是会打散数组参数为单个值

如：var arr = [10000,2000,3000]
calc.apply(lilei, arrr )
打散数组
等效于：calc.call(lilei,10000,2000,3000)
结果： this base bonus1 bonus2

function calc(base, bonus1, bonus2) {
    console.log(`${this.ename}的总工资是${base+bonus1+bonus2}`);
}
var lilei = {
    ename: "Li Lei"
}
var hmm = {
    ename: "Han Meimei"
}
var arr = [10000, 2000, 3000];
calc.apply(lilei, arr); //Li Lei的总工资是15000

3. bind

什么是：基于原函数，创建一个新函数，并永久绑定this
何时：如果函数中的this，需要反复被替换，就用bind创建一个新的专属的函数。永久绑定this.
如何：

var 新函数 = 原函数.bind(对象,要绑定的实参值...)
                      任意对象,写什么就绑死什么

创建一个和calc一模一样的新函数calc_l，并永久替换calc_l中的this为lilei对象，并久替换第一个参数base为10000。
好处：今后反复使用calc_l不用再反复传入lilei和10000
强调：bind仅创建新函数，不执行函数
要执行函数：calc_1(1000,2000)
//bonus1,bonus2
强调：用bind创建的新函数中的this，不可能再被别人用call替换。因为bind后的函数中的this已经被替换成固定的对象了。所以再用call/apply已无this可换

function calc(base, bonus1, bonus2) {
    console.log(`${this.ename}的总工资是${base+bonus1+bonus2}`);
}
var lilei = {
    ename: "Li Lei"
};
var hmm = {
    ename: "Ham Meimei"
};
var calc_l = calc.bind(lilei, 10000);
calc_l(1000, 2000); //Li Lei的总工资是13000
calc_l(2000, 3000); //Li Lei的总工资是15000
//hmm想抢李磊的计算器
calc_l.call(hmm, 10000, 2000, 3000); //Li Lei的总工资是22000
  //this->lilei     ↓     ↓
  //base->10000   bonus1 bonus2

什么时候用call/apply/bind总结：
当函数中的this不是想要的，想换成想要的，就用call/apply/bind
1.当仅临时替换本次调用函数中的this时——call
当实参值列表是数组形式时，必须将call换成apply,自动打散数组为单个值
2.如果一个函数需要反复替换this为一个指定的对象时，就用bind创建一个专属的函数，永久绑定this为指定的对象，同时可绑定部分固定的参数值。