对象中,this 的使用
this的用法:
一. 构造函数中的this
1. 构造函数作为构造函数使用:
构造函数里的this或是函数的prototype内的this,指向的都是通过new创建出的对象
(哪个对象调用了构造函数,那么this就指向哪个对象).
例: function Person0(){
this.name = "zhangsan0";
this.age = 20;
this.sayname = function () {
console.log(this);
console.log(this.name);
};
Person0.prototype.sayage = function () {
console.log(this);
console.log(this.age);
};
}
var p0 = new Person0();
p0.name = "zhangsan1";
p0.age = 10;
p0.sayname();//返回zhangsan1,而不是zhangsan0
p0.sayage(); //返回10,而不是20
由上看出:
1. Person0通过new,创建了p0这个对象;
2. Person0里的this和prototype里的this都是指向p0;
3. p0调用了函数内的各种属性或方法,所以this指向p0;
2. 构造函数作为普通函数使用:
不用new来创建对象,而是直接调用构造函数,这就是把构造函数作为普通函数使用的方式;
普通函数内的this指向的是window对象;
例: function Person1(){
this.name = "zhangsan0";
this.age = 20;
this.sayname = function () {
console.log(this);
console.log(this.name);
};
sayname();
}
Person1(); //返回window对象;返回zhansan0
由上看出:
1. Person这个构造函数里的this指向的是window对象;
2. 因为this指向了window对象,所有Person这个构造函数里的this.name或是this.age,就相当于是给window定义了两个name和age的属性,并赋值为zhangsan0和20,所以console.log(this.name)这句返回的是zhangsan0;
二. 函数作为对象的一个属性:
1. 该函数的上一级是对象,而不是函数: 那么该函数的this指向的就是其上一级的这个对象.
例: var x = 10;
var person3 = {
x:20,
sayname: function () {
console.log(this);
console.log(this.x);
}
};
person3.sayname(); //返回person3这个对象;返回20
由上看出:
1. sayname函数的上一级是person3这个对象,所以sayname函数内的this指向的就是person3这个对象;
2. 所以console.log(this);这句返回的是window对象;
3. 所以console.log(this.x);这句返回的是person3里面的x属性的值;
2. 函数A的上一级是函数B,函数B的上一级是对象C,那么函数A内的this指向的是window对象(视其为普通函数);函数B里的this指向的是对象C.
例: var x = 10;
var person4 = {
x:20,
sayname1: function () {
console.log(this); //返回person4对象
console.log(this.x); //返回20
sayname2 = function(){
console.log(this); //返回window对象
console.log(this.x);//返回10
};
sayname2();
}
};
person4.sayname1();
返回: person4, 20; window对象,10.
由上看出:
1. sayname2函数的上一级是sayname1函数,故sayname2里的this指向window对象;
2. sayname1函数的上一级是person4对象,故sayname1里的this指向person4对象;
3. 输出见上面代码的注释
三. 全局 & 普通函数中的this: 都是指向window对象
1. 全局中的this:
例: console.log(this === window);//返回true
看出: 返回true,说明全局中的this指向的是window对象
2. 普通函数中的this:
例: var a = 20;
function person5(){
var a = 10;
console.log(this.a);
}
person5(); //返回20
由上看出:返回的是全局变量a的值,而不是函数中的变量a的值,故普通函数中的this指向的是window对象.
四. call方法的调用: 调用call方法的函数中的this指向的是传入call方法中的对象.
例: function Person6(){
console.log(this.name);
}
var p1 = {
name:"zhangsan2"
};
Person6.call(p1); //返回zhangsan2
由上看出:
1. 在Person6函数中有一条语句为console.log(this.name);
2. 在对象p1中定义了name属性,并赋值;
3. 当Person6这个构造函数调用call方法时,此时该函数中的this指向的就是传入call中的对象p1,故输出p1的name属性的值.