函数内部的this指向以及如何改变函数内部的this指向

一、函数内部的this指向

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象
对象的方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

1、普通函数调用

普通函数的this指向window

function fun() { 2     console.log('普通函数的this' + this); 3 } 4 fun();

2、构造函数调用

构造函数this指向ldh这个实例对象，原型对象里面的this指向的也是ldh这个对象

function Star() {}; 2 Star.prototype.sing = function() {}; 3 var ldh = new Star();

3、对象的方法调用

对象的方法的this指向的是对象o

var o = { 2     sayHi: function() { 3         console.log('对象方法的this' + this); 4  } 5 } 6 o.sayHi();

4、事件绑定方法

绑定事件函数this指向的是函数的调用者btn这个按钮对象

var btn = document.querySelector('button'); 2 btn.onclick = function() { 3     console.log('绑定事件函数的this' + this); 4 
}

5、定时器函数

定时器函数this指向的是window

setTimeout(function() { 2     console.log('定时器函数的this' + this); 3 }, 1000);

6、立即执行函数

立即执行函数this指向的是window

(function(){ 2     console.log('立即执行函数的this'+this); 3 })();

 

 

 

二、改变函数内部的this指向的三种方法

1、call方法

call()方法可以调用函数，还可以改变函数内的this指向，它的主要作用是可以实现继承

fun.call(thisArg,arg1,arg2,....)

这里将fun函数的this指向o

var o = { 2     name: 'Andy'
} 4 
function fun(a, b) { 6     console.log(this); 7     console.log(a + b); 8 } 9 fun.call(o, 1, 2);

将父构造函数里的this指向子构造函数的实例对象（构造函数的this指向它的实例对象）

function Father(uname, age, sex) {  2     this.uname = uname;  3     this.age = age;  4     this.sex = sex;  5 }  6 
function Son(uname, age, sex) {  8     Father.call(this, uname, age, sex);  9 } 10 var son = new Son('ldh', 18, 'male'); 11 console.log(son);

 

2、apply方法

fun.apply(thisArg,[argsArray])（传递的值必须包含在数组里）

apply()方法可以调用函数，还可以改变函数内的this指向，但它的参数必须是数组（伪数组）

var arr = [1, 33, 22, 44, 12]; 2 var max = Math.max.apply(Math, arr); 3 var min = Math.min.apply(Math, arr); 4 console.log(max, min);

3、bind方法（用的最多）

bind()方法不会调用函数，但是可以改变函数内部this指向

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

var o = {  2     name: 'Andy'
}  4 
function fun(a, b) {  6     console.log(this);  7     console.log(a + b);  8 }  9 var f = fun.bind(o, 1, 2); 10 f();

下面的小案例是点击按钮后按钮禁用，直到三秒后开启按钮
虽然定时器函数里的this指向window，但是bind(this)里面的this是在定时器函数的外面绑定的，这个this又在btns[i].onclick这个函数里面，所以这个this指向的就是btns对象
为什么这里的this.disabled的this不用btns[i]呢，因为定时器是在3秒后执行，而for循环立马执行，这里有三个按钮，则i为3

var btns = document.querySelectorAll('button'); 2 for (var i = 0; i < btns.length; i++) { 3     btns[i].onclick = function() { 4         this.disabled = true; 5         setTimeout(function() { 6             this.disabled = false; 7         }.bind(this), 3000); 8  } 9 }

3、call、apply、bind总结

相同点：都可以改变函数内部的this指向

区别：

1.call和apply会调用函数，并且改变函数内部的this指向

2.call和apply传递的参数不一样，apply必须以数组形式

3.bind不会调用函数，但是会改变函数内部的this指向

主要应用场景：

1.call主要用作继承

2.apply经常跟数组有关，比如借助数学对象实现数组中的最大最小值

3.bind可用于改变定时器内部的this指向