this指针的理解和指向问题
一、this指向
1.什么是this
Javascript可以通过一定的设计模式来实现面向对象的编程,其中this “指针”就是实现面向对象的一个很重要的特性。this作为js语言的一个关键字,表示函数运行时自动生成的一个内部对象,只能在函数内部使用。
this指向一般有以下几种情况:
情况一:作为函数调用时
普通函数内部的this指向的是window
例如:
function contnet() {
this.x = 1;
alert(this.x);
}
contnet(); // 1
//为了证明this就是全局对象,对代码做一些改变
var y = 1;
function number() {
alert(this.y);
}
number(); //1
//再改变
var z = 1;
function otherContnet() {
this.z = 0;
}
otherContnet();
alert(z); //0
情况二:作为对象方法调用时
对象内部的this指向的是对象本身
例如:
function content() {
alert(this.x);
}
var c = {};
c.x = 1;
c.y = content;
c.y(); // 1
情况三:作为构造函数调用时
构造函数,就是通过这个函数生成一个新的对象(object)。那么这时,this就指这个新对象
例如:
function content(){
this.x = 1;
}
var c = new content();
alert(c.x); // 1
情况四:apply/call调用时
例如:
var number = 0;
function content() {
this.number = 1;
this.show = function() {
alert(this.number)
}
}
function otherContent() {
this.number = 2;
}
var c = new content();
var o = new otherContent();
c.show.apply(o); //2
c.show.apply(); //0
//apply的参数为空时,默认调用全局对象。若有值,this指向该对象
c.show.apply(c); //1
最后看几个较为复杂的例子:
例子1:
var name = "LiLei";
var schoolgirl={
name:"HanMeimei",
CheckTheName: function(){
return function(){
return this.name;
};
}
};
var ultimately= schoolgirl.CheckTheName();
console.log(ultimately())//LiLei
例子2:
var name = "LiLei";
var schoolgirl={
name:"HanMeimei",
CheckTheName: function(){
var that = this;
return function(){
return that.name;
};
}
};
var ultimately= schoolgirl.CheckTheName();
console.log(ultimately())//HanMeimei
例子3:
var name = "LiLei";
var schoolgirl={
name:"HanMeimei",
CheckTheName: function(){
return function(){
return this.name;
};
}
};
var LiHua = {};
LiHua.name = "LiHua"
LiHua.ultimately= schoolgirl.CheckTheName();
console.log(LiHua.ultimately());//LiHua
最后总结一下:
1.函数在被直接调用的时候,其中的this指针永远指向window;
2.匿名函数this总是指向window对象;
3.谁执行的函数,那么this就指向谁;
4.如果函数通过new创建,那么this就指向新建对象;
二、this指向问题
在this指向的时候,总结说了最终指向的就是那个调用它的函数。也就是谁执行的函数,那么this就指向谁。
1.那么下面先看个例子:
function basic(){
var sex="man";
console.log(this.sex);//undefined
console.log(this)//window 谁调用他就指向谁
}
basic()
按照上面我们说的那样,this的最终指向的是调用它的对象,这里的函数basic实际上是最终指向的window,而window里面是没有sex的。所以第一个是undefined,第二个则是window。
2.再看这个例子:
var basic={
'sex':'man',
lookOver:function(){
console.log(this.sex)
}
}
basic.lookOver()或者window.basic.lookOver()
这里的this指向的是对象basic,因为你调用这个lookOver是通过basic.lookOver()执行的。所以我们可以说明一点,this的指向在对象创建的时候是决定不了的,在调用的时候才能够决定,谁调用就指向谁。window是js中的全局对象,我们创建的变量实际上是给window添加属性,而一般情况我们经常省略window,所以这里可以用window.basic
3.接下来看这个例子:
var number={
x:666,
y:{
x:888,
lookOver:function(){
console.log(this.x)
}
}
}
number.y.lookOver();
这里的函数是由最外层的number点出来的,但是this并没有执行它,而是最终指向的y;所以我们可以推翻一开始说的那句话,并且总结如下
情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window(但是这里需要说明的是js的严格版中this指向的不再是window,这个问题在这里先不谈)
情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,this指向的是就是它上一级的对象。
情况3:如果一个函数中有this,这个函数包含多个对象,尽管这个函数是被最外层的对象所调用,this也只是指向的它上一级的元素
总结
以上就是我对this指针的一些理解与指向问题的想法,欢迎评论一些你的不同见解。