前言
本文讲解了javascript的this指向基础和问题,如果对你有帮助话请关注小编哦,你的支持就是我更行的动力,动力的源泉!
一.This指向
this作为js语言的一个关键字,表示函数运行时自动生成的一个内部对象,只能在函数内部使用。
情况1:纯粹的函数调用
function test(){
this.x = 1;
alert(this.x);
}
test(); // 1
//为了证明this就是全局对象,对代码做一些改变
var x = 1;
function test(){
alert(this.x);
}
test(); // 1
//再变
var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0
情况2:作为对象方法调用
//函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
情况3:作为构造函数调用
//所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1
//为了证明this不是全局对象,对代码做一些改变
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2
情况4:apply/call调用
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0
//apply的参数为空时,默认调用全局对象。若有值,this指向该对象
o.m.apply(o); //1
最后看下几个较为复杂的例子,巩固下理解
例子1
var name = "the window";
var object={
name:"my object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
var func = object.getNameFunc();
console.log(func())//"the window"
例子2
var name = "the window";
var object={
name:"my object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
var func = object.getNameFunc();
console.log(func())//"my object"
例子3
var name = "the window";
var object={
name:"my object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
var obj = {};
obj.name = "obj name"
obj.func = object.getNameFunc();
console.log(obj.func());//"obj name"
这是this指向的总结:
1.函数在被直接调用的时候,其中的this指针永远指向window
2.匿名函数this总是指向window对象
3.谁执行函数,this就指向谁
4.如果函数通过new创建,则this指向新建出来的对象
二:This指针指向问题
js中的this最终指向的是那个调用它的函数**[this:谁调用它就指向谁]**
以下是案例我们一起来看一下
function aa(){
var men = "leon";
console.log(this.men);//undefined
console.log(this);//window
}
aa();
按照上面我们说的那样,this的最终指向的是调用它的对象,这里的函数aa实际上是最终指向的window,而window里面是没有men的,所以第一个是undefined,第二个则是window。
var bb ={
'men' : "leon",
fn:function(){
console.log(this.men)//leon
}
}
bb.fn();
说明:这里的this指向的是对象bb,因为你调用这个fn是通过bb.fn()执行的。所以我们可以说明一点,this的指向在对象创建的时候是决定不了的,在调用的时候才能够决定,谁调用就指向谁。
var bb ={
'men' : "leon",
fn:function(){
console.log(this.men)//leon
}
}
window.bb.fn();
案例1:
var name="The window";
var object={
name:"My object",
getNameFunc:function(){ //递归
return function(){
return this.name;
}
}
}
alert(object.getNameFunc()());
This在找到一个变量的同时就不会往下找
案例2
var name="The window";
var object={
name:"My object",
getNameFunc:function(){ //递归
var that=this;
return function (){
return that.name;
}
}
}
alert(object.getNameFunc()());
说明:
window是js中的全局对象,我们创建的变量实际上是给window添加属性,而一般情况我们经常省略window,所以这里可以用window.bb
案例3和案例2的代码执行结果是一样的,但是这里this为什么不指向window呢?
var cc = {
a:99,
b:{
a:100,
fn:function(){
console.log(this.a);//100
}
}
}
cc.b.fn();
这里的函数是由最外层的cc点出来的,但是this和上面一样并没有执行它,而是最终指向的b;所以我们可以推翻一开始说的那句话,并且总结如下:
情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window(但是这里需要说明的是js的严格版中this指向的不再是window,这个问题在这里不谈)
情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,this指向的是就是它上一级的对象。
情况3:如果一个函数中有this,这个函数包含多个对象,尽管这个函数是被最外层的对象所调用,this也只是指向的它上一级的元素
已经看到这里了记得点赞加关注0哦。