目录
call,apply,bind的使用
这些都是函数的原生方法,用于改变this指向,可以直接使用
call()
// 简单使用
function fn() {
console.log(this);
}
fn.call(document);// 输出 #document 对象
// 传参使用
function fn(a, b, c) {
console.log(this, a, b, c);
}
fn.call(document, 1, 2, 3);// 输出 #document, 1, 2, 3
使用call方法时,函数会立刻执行,并且修改this指向(call方法不会影响原函数)
apply()
与call()
基本一致,唯一一点不同是传参
function fn(a, b, c) {
console.log(this, a, b, c);
}
fn.apply(document, [1, 2, 3]);
fn.call(document, 1, 2, 3);
call
方法传参是一个一个传,而apply
方法中所有要传递的参数都放到一个数组中,一起传递
bind()
bind的特点是,使用bind方法后,不会立刻执行,而是返回一个新函数,等待我们手动去调用这个新函数
var name = 'window';
var obj = {
name: 'obj',
sayName: function() {
console.log(this.name);
}
};
obj.sayName();// obj
var temp1 = obj.sayName;
temp1();// window
var temp2 = obj.sayName.bind(obj);
temp2();// obj
bind不兼容IE8及以下的版本
特点:
绑定后返回的新函数,再绑定其他对象时,无效
function test() {
console.log(this);
}
test();// window
let temp = test.bind(document);
temp();// document
let temp2 = temp.bind(window);
temp2();// document
call,apply,bind的异同
不同点
call 与 apply 的区别
有且仅有一个区别,就是参数
call方法传参是一个一个传——fn.call(‘xxx’, 1, 2, 3);
apply方法传参是把所有参数放到一个数组里面,一次性传递——fn.call(‘xxx’, [1, 2, 3]);
call, apply 与 bind 的区别
call、apply 调用了以后就会立刻执行
bind 调用后会返回新的函数,等待我们自己去使用这个函数
共同点
第一个参数都是this
要指向的对象,不传值
或传null
或传undefined
的时候默认指向window
对象
后面的参数都是传参用
call,apply,bind的应用
求数组的最大 / 最小值
let arr = [45,776,23,4,13,-324,3,566];
let apply = Math.max.apply(Math, arr);
let call = Math.max.call(Math, ...arr);
console.log(apply, call);
Math.max
替换为 Math.min
就是求最小值
...
展开运算符
apply实现数组追加
var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1, arr2);
arr1.push(...arr2);// 同样的效果
call,apply实现继承
function animal(a, b) {
this.type = 'animal'
this.behavior = function(){
console.log(this.type+" is running")
}
}
function cat(a, b) {
this.name = 'cat'
//这里call的意思就是把animal的方法应用到cat这个对象身上
//所以cat就继承了animal的方法
animal.call(this);// apply同样效果
}
console.log(new cat())
TODO:源码解析