call apply bind总结
相同点:都可以改变函数内部的this指向
区别点:
1.call和apply会调用函数,并且改变函数内部this指向
2.call和apply传递的参数不一样,call传递参数aru1,aru2...形式 apply必须是数组形式
3.bind不会调用函数,可以改变函数内部this指向
主要应用场景
1.call经常做继承
2.apply经常跟数组又关系,比如借助于数学对象实现数组最大值最小值
3.bind不调用函数,但是还想改变this指向,比如改变定时器内部的this指向
// 改变this的指向 js常用的三种方法call(),apply(),bind()
var o={
name:'andy'
}
function fn(a,b){
console.log(this) //window
console.log(a+b)
}
fn.call(o,1,2) //this=>andy 2
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);
}
var son=new Son('刘德华',18,'男');
console.log(son) //刘德华 18 男
var o={
name:'andy'
}
function fn(arr){
console.log(this)
console.log(arr)
}
fn.call(o,['pink']) //andy pink
//Math.max()
var arr=[1,66,3,55,36]
// var max=Math.max.apply(null,arr)
var max=Math.max.apply(Math,arr)
var min=Math.min.apply(Math,arr)
console.log(max,min) //1 66
// bind()方法
// 1.不会调用原来的函数,可以改变原来函数内部的this指向
// 2.返回的是原函数改变this之后产生的新函数
// 3.如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
// 4.我们有一个按钮,当我们点击之后,就禁用这个按钮,3秒钟之后开启这个按钮
var o={
name:'andy'
};
function fn(a,b){
console.log(this);
}
var f=fn.bind(o,1,2); //新函数
fn();
//点击按钮时,我们点击之后,就禁用这个按钮,3秒钟之后开启这个按钮
// var btn=document.querySelector('bntton');
// btn.οnclick=function(){
// this.disabled=true; //这个this指向btn
// var that=this;
// setTimeout(function(){
// that.disabled=false //加上that之后,this被改变成btn
// //定时器函数里面的this指向的是window
// },3000)
// }
// 此时用bind方法更简单
// var btn=document.querySelector('bntton');
// btn.οnclick=function(){
// this.disabled=true; //这个this指向btn
// setTimeout(function(){
// disabled=false //加上that之后,this被指向btn
// //定时器函数里面的this指向的是window
// }.bind(this),3000) //改变定时器this指向,这个this指向是btn
// }
//多个按钮时
var btns=document.querySelectorAll('button')
for(var i=0;i btns[i].οnclick=function(){ this.disabled=true; setTimeout(function(){ this.disabled=false; }.bind(this),2000) } }