call,apply,bind的总结
相同点:
都可以改变函数内部的this指向
区别点:
- call和apply会调用函数,并且改变函数内部this指向
- call和apply传递的参数不一样,call传递参数aru1,aru2…形式,apply必须数组形式[args]
- bind不会调用函数,可以改变函数内部this指向
主要应用场景
- call经常做继承
- apply经常跟数组有关系,比如借助于数学对象实改变定时器现数组最大与最小值
- bind不调用函数,但是还想改变提升指向,比如 改变定时器内部的this指向
call()的应用
var o = {
uname: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a + b);
}
fn.call(o, 1, 4);
// call第一个作用可以调用函数,第二个可以改变this的指向
// call的主要作用可以实现继承
function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son(uname, age, sex) {
Father.call(this, uname, age, sex);
// console.log(this);
}
var ldh = new Son('刘德华', 18, '男');
console.log(ldh);
apply()应用
var O = {
uname: 'andy'
}
function fn(arr) {
console.log(this);
console.log(arr);
}
var arr = ['blue', 'pink' ]
fn.apply(O, arr);
// 1.apply 第一个可以调用函数,第二个可以改变this的值
// 2.他的参数必须是数组(伪数组)
// 求数组的最大值的应用
var arr = [1, 8, 55, 88,23];
var max = Math.max.apply(Math, arr);
console.log(max);
// 把一个数组追加到另一个数组上
var arr = ['a', 'b'];
var arr1 = [1, 2, 3];
arr.push.apply(arr, arr1);
console.log(arr);
bind()应用
var o = {
uname: 'andy'
}
function fn() {
console.log(this);
}
var f = fn.bind(o);
f();
// 1.bind不能调用原函数但能改变原函数this的指向
// 2.返回的是改变this之后的新函数
// 如果有函数不需要立即调用,但需要改变this,此时可使用bind(),
// 有一个按钮点击之后就禁用,3秒之后开启
var btn = document.querySelector('button');
btn.onclick = function() {
var that = this;
this.disabled = true;
setTimeout(function() {
that.disabled = false;
// 定时器的this指向的是window
}, 3000)
}
var btn = document.querySelector('button');
btn.onclick = function() {
this.disabled = true;
setTimeout(function() {
this.disabled = false; // 定时器的this指向的是window
}.bind(this), 3000) //这个this指向btn;
}