函数的调用方式决定了 this的指向不同:
1. 普通函数调用,此时this 指向window
function fn(){
console.log(this);// window
}
fn();// window.fn(),此处默认省略window
2. 构造函数调用, 此时this 指向实例对象
function Person(age, name){
this.age = age;
this.name = name
console.log(this)// 此处 this 分别指向 Person 的实例对象 p1 p2
}
varp1 =newPerson(18,'zs')
varp2 =newPerson(18,'ww')
3. 对象方法调用, 此时this指向该方法所属的对象
var obj = {
fn:function(){
console.log(this);// obj
}
}
obj.fn();
4.通过事件绑定的方法, 此时 this指向绑定事件的对象
btn.onclick =function(){
console.log(this);// btn
}
5. 定时器函数, 此时this指向window
setInterval(function(){
console.log(this);// window
},1000);
以上五个方面 就是对函数内部 this指向的基本整理
关于this 的终极总结 :函数内部的 this 是由调用时确定其指向,匿名函数的this指向window。
二. 接下来一起来看一下如何使用bind,call,apply改变this的指向,以及他们各自一些小的应用
1.bind()会创建一个新的函数(称为绑定函数),与被调用函数有相同的函数体,当目标函数被调用时this的值绑定到bind()的第一个参数上,如下面demo 此时this指向对象o
语法: fn.bind(thisArg[, arg1[, arg2[, ...]]])
参数:thisArg 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时,该参数无效。
arg1,arg2.. 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法
返回值:返回由指定的this值和初始化参数改造的原函数拷贝。
var obj = {name:'obj'};
obj.fn =function(){
console.log(this)
};
var o = {name:'o'};
var rel = obj.fn.bind(o);
rel();// 等价 obj.fn.bind(o)()
2.call() 方法调用一个函数, 其具有一个指定的this 值和分别地提供的参数(参数的列表)。
语法: fn.call(thisArg[, arg1[, arg2[, ...]]])
参数:thisArg 该参数会作为函数运行时的this指向。(如果指定了 null 或者 undefined 则内部 this 指向 window)
arg1,arg2.. 指定的参数列表
var obj = {name:'obj'};
obj.fn =function(){
console.log(this)
};
var o = {name:'o'};
obj.fn.call(o)// 与bind的区别是,call直接调用函数
3.apply() 方法调用一个函数, 其具有一个指定的 this 值,以及作为一个数组(或类似数组的对象)提供的参数。
语法: fn.apply(thisArg[argArray])
参数:thisArg argArray
apply() 与call()非常相似,不同之处在于提供参数的方式,apply()使用参数数组,而不是参数列表
var obj = {name:'obj'};
obj.fn =function(a, b){
a = b;
console.log(this)
};
var o = {name:'o'};
obj.fn.apply(o, [1,3])
相信已经对 bind,call,apply 有一定的认识了,接下来看几个案例
案例一 :
需求: 调用该对象 fun 方法时 改变其 this指向 打印出 obj 的 name
var obj = {
name:'zs',
fun:function(){
setInterval(function(){
console.log(this.name);
}.bind(this),1000);// 利用 bind 不调用函数特性此处this指向 obj
}
};
obj.fun();
案例二:
var obj = {
0:10,
1:20,
2:30,
length:3
};
Array.prototype.push.call(obj,40);
console.dir(obj);//0:10,1:20,2:30,3:40,length:4
案例三:
var arr = [4,5,6,8,11,44];
Math.max.apply(Math, arr);// 可以利用apply 第二个参数是数组。