apply、call和bind的共同点,作用?
- 他们都可以去调用别人的方法
- 他们都可以改变this的指向
- 他们的第一个参数都是this对象的指向
- 后续都可以进行参数的传递
apply、call和bind的区别?
- 调用的呈现方式不一样
让我们一起先来看下代码
class Person{
name="美女"
say(){
console.log(this.name)
}}
//1.创建一个p1实例
let p1=new Person()
//2.创建一个对象
let obj={
name:'屌丝'
}
//3.借用美女的方法,喊上屌丝的名字
p1.bind(obj)()
- bind直接调用的时候,不会执行方法,而是会返回一个新的函数,新的函数里面有bind调用的方法
//如果上面那个地方看不懂,我把它解构一下
let newfunc=p1.bind(obj)
newfunc()
那我们继续来看call和apply的调用
p1.say.call(obj)
p1.say.apply(obj)
- call 和apply 调用的时候是一样的 既改变了this的指向,也会直接调用方法
- 传递参数的写法不一样
- bind可以直接在新构建的函数里面传递参数
- 也可以在传递的第二个参数里面写参数
class Person {
name = "美女"
say(b) {
console.log(this.name)
console.log(b);
}
}
let p1 = new Person()
let obj = {
name: '屌丝'
}
//这是第一种方法
p1.say.bind(obj)("abc")
//这是第二种方法
// p1.say.bind(obj, "abc")()
call 直接在第二个参数里面写需要传递的参数
p1.say.call(obj,"abc")
apply需要将传递的参数放在一个数组里面
p1.say.apply(obj,["abc"])
如果没有放在数组里面,就会出现这样子的报错
Uncaught TypeError: CreateListFromArrayLike called on non-object
小结
不同点 | bind | Value | Value |
---|---|---|---|
调用的呈现方式不一样 | 调用之后不会直接执行方法,而是重新构建出一个新的函数,在新函数里面执行方法 | 直接调用 | 直接调用 |
传递参数的写法不一样 | p1.say.bind(obj, “abc”)() // p1.say.bind(obj, “abc”)() | p1.say.call(obj,“abc”) | p1.say.apply(obj,[“abc”]) |