浅谈javascript-this关键字
前言
JavaScript中this变量是一个令人难以摸清的关键字,当初学习javascript的时候被这个this指向问题折腾的我是惨不忍睹,漏洞百出。一度想在后面的代码过程中放弃对this的使用,但是this在javascript当中用处太广泛了。
充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余,没办法只能硬着头皮上呀。被虐多次再结合自己查阅相关文档资料,总算有一点小小心得。特分享出来,供大家参考!
this简述
关于this的清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释。例如我钟爱的《高三》对this也是简单几页翻过。最后翻阅到MDN上面的wen技术文档,上面解释深得我意。
在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,在每次函数被调用时this的值也可能会不同。
--MDN社区web技术文档
由此可以推出this的在不同的情况下,this的指向各不相同。简单来说就分为5种情况
1、全局环境
var a = "先制定一个小目标,下一顿饭加一个鸡腿";
console.log(this); // 这里this就指向 window
console.log(this.a); //控制台输出 "先制定一个小目标,下一顿饭加一个鸡腿"
这一种情况相信大家都非常好理解,在全局环境当中this默认是指向window
2、函数中调用
function foo1() {
function bar() {
console.log(this);
}
bar();
}
foo1(); // 输出window
当foo1()执行的时候 ,间接相当于window.foo1()执行函数中的this是指向window,因此控制台相应输出window结果。(foo1() 间接也等于 window.foo1(),这样就是相当于window在调用这个函数,因此this也是指向于window。)
3、对象中调用
var x = "今天交房租";
var obj = {
foo:function() {
console.log(this.x);
},
x:"房租减免";
};
obj.foo(); //控制台输出 "房租减免"
这是当对象obj调用foo()函数,this指向了这个调用对象,即this就等于obj,控制台式输出就变成了obj.最后控制台便输出 "房租减免",唉!!这要是从房东嘴巴里面输出该多好!!
4、构造函数中
var name = "hahaha";
function Obj() {
this.name = "CheDabang";
}
var person = new Obj();
console.log(person.name); //输出 CheDabang
这里通过new运算符创建一个 Obj的对象实例。
变成person{this.name}
,因此这里this的指向也随着指向这个新实例对象。因此控制台输出 CheDabang
5、apply、call中调用
当一个函数的函数体中使用了this关键字时,通过所有函数都从Function对象的原型中继承的call()方法和apply()方法调用的时候,它的值可以绑定到一个指定的对象上。
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
console.log(add.call(o, 5, 7)); //1 + 3 + 5 + 7 = 16
console.log(add.apply(o, [10, 20])); // 1 + 3 + 10 + 20 = 34
小练习
以上就是我们常常出现的5种情况,看到这么多情况的介绍。诸位看官,也晕了吧。不要着急,让我们再来几个小练习感受一下这位this大爷的指向。
题目①
Code
var a = 10;
function test(){
a = 5;
console.log(a);
console.log(this.a);
var a ;
console.log(this.a);
console.log(a);
}
test();
new test();
当调用test()的时候,控制台分别输出 5、10、10、5
当调用 new test()的时候,控制台分别输出 5、undefined、undefined、5
解析
当var a = 10
==> var window.a = 10
;
当test()调用的时候,间接也相当于window.test()调用。因此当这个函数执行的时候,这里面的this指向的是window对象,因此this.a 指向的是window = 10;
当new test() 实例化,因此this指向的是这个实例的对象,因此这个新对象的a,并没有直接定义过。所以控制台输出undefined
题目②
Code
var Funllname = "john Doe";
var obj = {
Funllname:"Colin Thrig",
prop:{
getFullname:function(){
return this.Funllname;
}
},
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());
控制台输出
undefined
john Doe
解析
控制台结果1:当obj.prop.getFullname()
在调用的时候,相当于执行了其中的函数。而由于调用这个函数的是obj.prop调用的,因此this就直接指向obj.prop,但是obj.prop这个对象当中并没有定义Fullname,因此输出undefined
。
控制台结果2:当var test = obj.prop.getFullname;
这个时候就间接相当于==>var test = function(){return this.Funllname;}
因此当test()调用的时候,就相当于 ==> window.test();,因此其中的this便指向了window对象,所以便输出了 john Doe
题目③
Code
var sex = "male";
var saySex = {
sex:"female",
saySex:function(){
function getSex(){
console.log("this.sex="+this.sex);
}
getSex();
}
}
saySex.saySex();
控制台输出
this.sex = male
解析
控制台结果:当saySex.saySex()
调用的时候,只是相当saySex的函数被调用。之后在函数中,函数getSex()被调用,此时this便指向getSex().而函数getSex()默认情况下是指向window的,因此这里输出this.sex = male
题目④
Code
var name = "chedabang";
function sayName(){
var a = {
name:"加一个鸡腿",
sayName:getName
};
function getName(){
console.log(this.name);
}
getName();
a.sayName();
getName.call(a);
}
sayName();
控制台输出
chedabang
加一个鸡腿
加一个鸡腿
解析
当sayName()运行的时候时候,先是里面的第一个函数运行,getName().因此因此其中的this,便默认指向了window,因此this.name ==> chedabang
其次a.sayName()运行,因为sayName = getName。所以即当于getName再次被调用,由于存在调用对象a。因此此时this又重新指向对象a,对象 a 当中存在name属性,因此输出加一个鸡腿
。
最后 getName.call(a).运行的时候,将对象a给绑定到上面,因此函数里面的this就不指向window,而指向的是绑定的对象a,因此输出 加一个鸡腿
题目⑤
Code
var a = {
name:"张三",
sayName:function(){
console.log("this.name="+this.name);
}
};
var name = "李四";
function sayName1(){
var sss = a.sayName;
sss();
a.sayName();
(a.sayName)();
(b = a.sayName)();
}
sayName1();
控制台输出:
this.name=李四
this.name=张三
this.name=张三
this.name=李四
解析
当sayName1()运行的时候,sayName1函数内部首先是
控制台结果1:var sss = a.sayName
==> var sss = function(){console.log("this.name="+=this.name);}
像前面我们总结的一样函数中调用,因此这里的this指向window对象,因此输出this.name=李四
控制台结果2:a.sayName();
这里a直接调用其中的匿名函数,因此此时this指向a,因此a.name = "张三",所有控制台输出this.name=张三
控制台结果3:这里(a.sayName)();
其实间接相当于 == a.sayName();
这里指的是值立即执行。不管如何始终是对象a在调用sayName这个函数。因此控制台也就跟着一起输出this.name=张三
。
控制台结果4:和控制台结果3一样,代表变量b立即执行,而b和控制台结果1中sss一样,也属于函数中调用,因此this这里指向window。即控制台输出this.name=李四