JS call() apply() bind() - Kaiqisan
大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩。由于在js中的this的应用比较迷惑,有些时候,我们使用this的时候会出现很多意外,今天这三个方法拯救你的所有迷惑。
call(fun, arg1, arg2...)
,引用别的对象,动态修改this的指向。
先简单看一个例子
let demo1 = {
name: 'Kaiqisan',
uid: 10001,
doSomething: function () {
console.log(this.name, this.uid);
}
}
demo1.doSomething()
// 最终输出为 Kaiqisan 10001
在这里this指向demo1,因为这个方法是由demo1调用出来的。
但是,如果我想要使用这个方法来调用别的对象里面的其他成员,使用this就无法实现了。
于是有了call方法
let demo1 = {
name: 'Kaiqisan',
uid: 10001,
doSomething: function () {
console.log(this.name, this.uid);
}
}
let demo2 = {
name: 'Tom',
uid: 10002,
}
demo1.doSomething.call(demo2) // Tom 10002
在这里,其实this的指向就改变了本来this指向了demo1,现在指向了demo2.(可以先后打印this来验证)
PS:call方法后面可以传值,可以作为参数传入函数中
let demo1 = {
name: 'Kaiqisan',
uid: 10001,
doSomething: function (params1, params2) {
console.log(params1, params2); // 10, 20
}
}
let demo2 = {
name: 'Tom',
uid: 10002,
}
demo1.doSomething.call(demo2, 10, 20)
apply(func, arr)
: 用法与上面的方法完全一样,就是在后面的参数编写上面有差别
let demo1 = {
name: 'Kaiqisan',
uid: 10001,
doSomething: function () {
console.log(arguments[0], arguments[1]); // 10, 20
console.log(this.name, this.uid);
}
}
let demo2 = {
name: 'Tom',
uid: 10002,
}
demo1.doSomething.apply(demo2, [10, 20])
apply后面传参是数组,而不是多个参数,否则报错。
这个方法与上面的call方法比起来,可以支持不定个数的参数,建议使用arguments
,也比call更加灵活。
bind(this)
: 一般来说都是固定this指向的,至于这句话什么意思,可以看下面的代码
let demoOutside = {
params1: 100,
doMethod: function () {
console.log(this) // 这个this指向调用它的对象 demoOutside
setTimeout(function () {
console.log(this); // 在这里this输出为Window
}, 10)
}
}
demoOutside.doMethod()
这里,由于作用域的制限,外面的this无法传入里面,内部function未被任何对象调用,所以this就默认指向了Window。
为了解决这个问题,就可以选择把外面的this传入里面。bind()就可以很好地解决这个问题
let demoOutside = {
params1: 100,
doMethod: function () {
setTimeout(function () {
console.log(this);
}.bind(this), 10)
}
}
demoOutside.doMethod()
这样就可以把外面的this传入内部,内部function也会指向demoOutside
它相当于
let demoOutside = {
params1: 100,
doMethod: function () {
let _this = this // 使用参数固定this的地址
setTimeout(function () {
console.log(_this);
}, 10)
}
}
demoOutside.doMethod()
也等于
let demoOutside = {
params1: 100,
doMethod: function () {
setTimeout(() => { // 箭头函数无视作用域
console.log(this);
}.bind(this), 10)
}
}
demoOutside.doMethod()
现在ES6出了箭头函数之后,有了更加直观的方法把外层this传入内层,bind()方法就显得相形见绌,其的用途就越来越窄,但是,虽是如此,在有些时候,比如使用构造函数的时候,就不适合使用箭头函数(为了避免this指向混乱),在这里,就可以看情况使用bind()方法。
总结
都是修改this的指向,虽然平时用得比较少,但是面试笔试频频出现它,要熟记。
本文地址:https://blog.csdn.net/qq_33933205/article/details/109236121
上一篇: wps表格调整段落缩进解决单元格内容右靠齐自动换行
下一篇: 泰迪终于遇到对手了
推荐阅读
-
js中call()和apply()改变指针问题的讲解
-
js的继承方法小结(prototype、call、apply)(推荐)
-
javascript中call apply 与 bind方法详解
-
js中的call bind apply简单分析
-
javascript中apply、call和bind的使用区别
-
【THE LAST TIME】this:call、apply、bind
-
使用 js 简单的实现 bind、call 、aplly代码实例
-
Javascript中apply、call、bind的用法讲解
-
浅谈JavaScript中的apply/call/bind和this的使用
-
javascript中call,apply,bind函数用法示例