call、bind、apply:用于改变this的指向,是函数的方法。
区别:call、apply改变this的指向之后会自动调用函数,bind改变指向后会返回一个函数,不会自动调用。
样例一:
function dog() {
console.log(this.name);
}
dog(); // undefined
var item = {
name: 'ben'
}
dog.call(item) // ben
样例二:
let dog = {
name: '旺财',
sayName() {
console.log('我是', this.name);
},
eat(food1, food2) {
console.log('我喜欢吃', food1, food2);
}
}
let cat = {
name: '喵喵'
}
dog.sayName.call(cat)
dog.eat.call(cat, '鱼', '肉')
样例三:
apply的使用用法和call一样,call的第二个参数开始,就是被调用函数的参数列表,依次往后排开即可。
apply的使用,第一个参数是要改变的this指向是谁,第二个参数是个数组,将被调用函数的参数列表放入到apply的参数数组中即可。
样例四:
bind:传参的形式和call一样,使用方式也一样,call会调用这个函数,但是bind不会调用函数,只会将改变this指向的函数返回过来。
如何使用?只需要用一个参数接收bind返回的函数,然后接下来调用代码即可实现和call一样的功能。
总结:
- bind、apply、call都是函数上的方法,用于改变调用函数的this指向。
- call、apply在改变this指向的时候会自动调用函数,bind不会自动调用函数,而是返回一个改变this指向的函数。
- 当函数需要传参时,call、bind、apply的第一个参数均为需要改变的this指向对象、call、bind的第二个参数开始,后面的参数对应上被调用函数的参数,依次排开;apply的第二个参数是被调用函数的参数数组。
使用
实现继承、多重继承。
// 构造函数Animal
function Animal() {
this.eat = function () {
console.log('asdasdasd');
}
}
// 构造函数Flay
function Flay() {
this.fly = function () {
console.log('fly');
}
}
// 构造函数
// 现在让cat继承Flay and Animal
function Cat() {
/**
* Cat构造函数中,this->Cat
* Animal.this -> Cat
* 通过调用Animal的构造函数,改变了Animal中的this指向
* 则this -> Cat this.eat -> Cat.eat
* 可以实现多重继承
*/
Flay.call(this);
Animal.call(this);
}
let cat = new Cat();
cat.eat();
cat.fly()