函数的不同调用方式决定了this的指向不同
一、函数的不同调用方式决定了this的指向不同，一般指向调用者
1.普通函数 this指向window的调用者
function fn(){
console.log('普通函数的this'+this);
}
window.fn();
2.对象的方法 this指向的是对象o (object)
var o={
sayHi:function(){
console.log('对象方法this:'+this);
}
}
o.sayHi();
3.构造函数 this指向ldh这个实例
原型对象里面的this指向的是ldh这个实例对象
function Star(){}
Star.prototype.sing=function(){ }
var ldh=new Star();
4.绑定事件函数this指向的是函数调用者 btn这个按钮对象
var btn=document.querySelector('button');
btn.onclick=function(){
console.log('绑定事件函数的this:'+this);
}
5.定时器函数 this 指向的也是window
window.setTimeout(function(){
console.log('定时器的this'+this);
},1000);
6.立即执行函数 this指向window
(function(){
console.log('立即执行函数的this'+this);
})();
二、改变函数内部的this指向
JavaScript为我们专门提供了一些函数方法帮我们处理函数内部this的指向问题，常用方法有
bind()、call()、apply()三种方法 ,call()方法调用一个对象，简单理解为调用函数的方式，但是
它可以改变函数的this指向
fun.call(thisArg,arg1,arg2);
1.call()
var o={
name:'any'
}
function fn(a,b){
console.log(this);
console.log(a+b);
}
fn.call(o,1,2);
//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);
}
var son=new Son('刘德华',19,'男');
console.log(son);
2.apply() 应用
var o={
name:'any'
}
function fn(arr){
console.log(this);
console.log(arr);//'pink'
}
fn.apply(o,['pink']);
//1.也是调用函数 第二个可以改变函数内部的this指向
//2.但是他的参数必须是数组(伪数组)
//3.apply的主要应用 比如说我们可以利用apply借助于
//数学内置对象求最大值
//Math.max();
var arr=[1,32,56,88];
//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);
3.bind() 绑定
<button>点击</button>
<button>点击</button>
<button>点击</button>
var o={
name:'andy'
};
function fn(a,b){
console.log(this);
console.log(a+b);
};
var f= fn.bind(o,1,2);
f();
//1.不会调用原来的函数 可以改变原来函数内部的this指向
//2.返回的是原函数改变this之后产生的函数
//3.如果有的函数我们不需要立即调用，但是又想改变这个函数内部
//的this指向，此时用bind
var btn =document.querySelector('button');
btn.onclick=function(){
this.disabled=true;//this指向的是btn
//var that=this;
setTimeout(function(){
// that.disabled=false;//定时器函数里面的this指向window
this.disabled=false;//此时定时器函数里面的this指向的是btn
}.bind(this),3000)//这个this指向的是btn这个对象
}
var btns=document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
this.disabled=true;
setTimeout(function(){
this.disabled=false;
}.bind(this),3000)
}
}
三、call apply bind总结
相同点：
都可以改变函数内部的this指向
区别点：
1.call和apply会调用函数并且改变函数内部的this指向
2.call和apply传递的参数不一样,call传递参数aru1、aru2形式
apply必须数组形式[arg]
3.bind不会调用函数,可以改变函数内部的this指向。
主要应用场景：
1.call经常做继承
2.apply经常跟数组有关系,比如借助数学对象实现数组最大值和最小值
3.bind不调用函数，但是还是想改变this指向，比如改变定时器内部的this指向。
