因为JavaScript 中this 是在运行期进行绑定的,因此JavaScript 中this 关键字具备多重含义。
具体在实际应用中,this的指向大致可以分为下面4种。
- 作为对象的方法调用 obj.a()
- 作为普通函数调用 a()
- 构造函数调用 var b = new a();
- function.prototype.call或function.prototype.apply调用
作为对象的方法调用 和 作为普通函数调用
window.a = 2;
var obj = {
a:1,
getA:function(){
console.log(this.a);
}
}
obj.getA(); //输出1,作为对象的方法调用,this指向当前对象
var x = obj.getA;
x(); //输出2,作为普通函数调用,this全部指向window对象。
注意,不管x之前是obj.getA,还是其他某个对象的属性,只要最后是以x(),fun()这种方式调用的,均视为普通函数调用,此时this指向window对象
但是,在ECMAScript5的strict模式下,作为函数调用的 this被规定不会指向全局对象
window.a = 2;
var obj = {
a:1,
getA:function(){
"use strict"
console.log(this.a);
}
}
var x = obj.getA;
x(); //underfined
作为构造函数调用
var Myclass = function(){
this.name = 'beidan';
}
var obj = new Myclass();
console.log(obj.name);//beidan var Myclass = function(){
this.name = 'beidan';
return{ //显示的返回一个对象,注意!既要是显示,即有return,也要是对象{}
name:'test'
}
}
var obj = new Myclass();
console.log(obj.name);//test
作为function.prototype.call或function.prototype.apply调用
- 理解call,apply
call,apply都是为了改变函数体内部 this 的指向。例如,fun1.call()或者fun1.apply() 都是为了改变fun1函数内部的this指向。
二者的作用完全一样,只是接受参数的方式不太一样。
- call,apply的用途
document.getElementById('div1').onclick = function(){
console.log(this.id); //div1
var func = function(){
console.log(this.id);
}
func(); //通过普通函数调用,this指向window,输出undefined
}
document.getElementById('div1').onclick = function(){
console.log(this.id); //div1
var func = function(){
console.log(this.id);
}
func.call(this); //使用call,使func函数内部的this指向当前的函数对象,输出div1
}
2.模拟继承(借用其他对象的方法)
- 例子一:其他对象(banana)借用apple中的say方法
function fruits() {}
fruits.prototype = {
color: "red",
say: function() {
console.log("My color is "+ this.color);
}
}
var apple = new fruits;
apple.say(); //My color is red
但是,如果我们还有其它 2个对象 banana= {color : "yellow"} ,orange = {color:‘orange’},想使用say方法,但是又不想对它们重新定义say方法。
banana = {
color: "yellow"
};
orange = {color:‘orange’};
apple.say.call(banana); //My color is yellow
apple.say.apply(orange ); //My color is orange
也就是说,当一个 object 没有某个方法(本例子中banana没有say方法),但是其他的有(本例子中apple有say方法),我们可以借助call或apply用其它对象的方法来操作。
- 例子二:获取数组中的最大值和最小值
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers), //
maxNumbers = Math.max.call(Math,5, 458 , 120 , -215, 666); //
number 本身没有 max 方法,但是 Math 有,我们就可以借助 call 或者 apply 使用其方法。
以上就是this在JavaScript中不同情况下的指向。
如果这篇文章对你有帮助,就给我一点赞赏吧~~~