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指向
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
// 改变this的指向 js常用的三种方法call(),apply(),bind()
// 1.call() 第一个作用可以调用函数，第二个作用可以改变函数内的this指向
var o={
name:'andy'
}
function fn(a,b){
console.log(this) //window
console.log(a+b)
}
fn.call(o,1,2) //this=>andy 2
// 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);
}
var son=new Son('刘德华',18,'男');
console.log(son) //刘德华 18 男
// apply(）1.也是调用函数，第二个可以改变函数改变函数内部this指向,
// 2.它的第二个参数必须是伪数组
var o={
name:'andy'
}
function fn(arr){
console.log(this)
console.log(arr)
}
fn.call(o,['pink']) //andy pink
// 3.apply的主要应用 比如我们可以利用apply借助于数学的内置对象求最大值
//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.length;i++){
btns[i].οnclick=function(){
this.disabled=true;
setTimeout(function(){
this.disabled=false;
}.bind(this),2000)
}
}