javaScript 中this 的指向及改变this指向

函数内this指向

this的指向是在函数调用的时候决定的，调用方式不同决定了指向不同，一般都指向调用者。

• 普通函数 指向window，window为普通函数的调用者，window.fun();
• 对象方法的调用指向该对象。
• 构造函数调用指向实例对象，原型对象里面的方法也指向实例对象
• 事件绑定函数指向绑定事件对象
• 定时器函数和立即执行函数 都指向window

改变函数内部this的指向

javaScript 提供了一些方法能改变this的指向，常用的有bind(),call(),apply()

• call()
  call() 可以调用函数，也可以改变函数this的指向

call(thisArg,age,age....)
var o = {
  name : '对象'
}
function fn (){
  
}
fn.call(o)

call()用于继承

function Father(name,age,sex){
  this.name=name;
  this.age=age;
  this.sex=sex;
}
function Son(name,age,sex){
  father.call(this,name,age,sex)
}
var son = new Son(‘成龙’，20，'男');

• apply()
  可以调用函数，可以改变this指向

fun.apply(thisArg,[argsArray]);

thisArg，函数运行时的this值
argsArray ,传递参数必须在数组内
例子如借助数学内置对象求最大值

var arr = [12,22,55,6,88,10,189]
var max = Math.max.apply(Math,arr);

• bind() 方法
  不会调用函数，但是能改变this指向。返回的是原函数this指向改变之后的新函数

fun.bind(thisArg,arg1,arg2....);

var o ={
  name:'中国'
}
function fn(a,b){
  console.log(this)
  console.log(a + b)
}
var newFn = fn.bind(o,2,5);
newFn();

应用 如函数不想立即执行，但是想改变this指向。
例子：按钮点击之后，禁用按钮，3秒钟之后开启

var btn = document.querySelector('button');
btn.onclick = function(){
  this.disabled = true;
  setTimeout(function(){
     this.disabled = false;
  }.bind(this),3000);
}