首页 > 代码库 > JavaScript中的this关键字
JavaScript中的this关键字
普通函数调用
function person(){ this.name="xl"; console.log(this); console.log(this.name); } person(); //输出 window xl
在这段代码中person函数作为普通函数调用,实际上person是作为全局对象window的一个方法来进行调用的,即window.person();所以这个地方是window对象调用了person方法,那么person函数当中的this即指window,同时window还拥有了另外一个属性name,值为xl.
var name="xl"; function person(){ console.log(this.name); } person(); //输出 xl
同样这个地方person
作为window
的方法来调用,在代码的一开始定义了一个全局变量name
,值为xl
,它相当于window
的一个属性,即window.name="xl"
,又因为在调用person
的时候this
是指向window
的,因此这里会输出xl
.
作为方法调用
var name="XL"; var person={ name:"xl", showName:function(){ console.log(this.name); } } person.showName(); //输出 xl //这里是person对象调用showName方法,很显然this关键字是指向person对象的,所以会输出name var showNameA=person.showName; showNameA(); //输出 XL //这里将person.showName方法赋给showNameA变量,此时showNameA变量相当于window对象的一个属性,因此showNameA()执行的时候相当于window.showNameA(),即window对象调用showNameA这个方法,所以this关键字指向window
另例
var personA={ name:"xl", showName:function(){ console.log(this.name); } } var personB={ name:"XL", sayName:personA.showName } personB.sayName(); //输出 XL //虽然showName方法是在personA这个对象中定义,但是调用的时候却是在personB这个对象中调用,因此this对象指向
作为构造函数调用
function Person(name){ this.name=name; } var personA=Person("xl"); console.log(personA.name); // 输出 undefined console.log(window.name);//输出 xl //上面代码没有进行new操作,相当于window对象调用Person("xl")方法,那么this指向window对象,并进行赋值操作window.name="xl". var personB=new Person("xl"); console.log(personB.name);// 输出 xl //这部分代码的解释见下
new操作符
//下面这段代码模拟了new操作符(实例化对象)的内部过程 function person(name){ var o={}; o.__proto__=Person.prototype; //原型继承 Person.call(o,name); return o; } var personB=person("xl"); console.log(personB.name); // 输出 xl
在person里面首先创建一个空对象o,将o的proto指向Person.prototype完成对原型的属性和方法的继承
Person.call(o,name)这里即函数Person作为apply/call调用(具体内容下方),将Person对象里的this改为o,即完成了o.name=name操作
返回对象o。
因此`person("xl")`返回了一个继承了`Person.prototype`对象上的属性和方法,以及拥有`name`属性为"xl"的对象,并将它赋给变量`personB`.所以`console.log(personB.name)`会输出"xl"
call/apply方法的调用
在JS里函数也是对象,因此函数也有方法。从Function.prototype上继承到Function.prototype.call/Function.prototype.apply
方法call/apply
方法最大的作用就是能改变this
关键字的指向.
Obj.method.apply(AnotherObj,arguments);
var name="XL"; var Person={ name:"xl", showName:function(){ console.log(this.name); } } Person.showName.call(); //输出 "XL" //这里call方法里面的第一个参数为空,默认指向window。 //虽然showName方法定义在Person对象里面,但是使用call方法后,将showName方法里面的this指向了window。因此最后会输出"XL";
funtion FruitA(n1,n2){ this.n1=n1; this.n2=n2; this.change=function(x,y){ this.n1=x; this.n2=y; } } var fruitA=new FruitA("cheery","banana"); var FruitB={ n1:"apple", n2:"orange" }; fruitA.change.call(FruitB,"pear","peach"); console.log(FruitB.n1); //输出 pear console.log(FruitB.n2);// 输出 peach
FruitB
调用fruitA
的change
方法,将fruitA
中的this
绑定到对象FruitB
上。
JavaScript中的this关键字