开场白:
javascript很灵活,也有很多糟粕。this的指向就够喝一壶的了。下面总结下集中函数调用情况下,this的指向问题。
javascript函数的四种调用的方式:
- 方法调用 Persion.sayName(); this指向Person对象
- 函数调用 getUsername(); 非严格模式下this指向window,严格模式下指向undefined
- 构造器调用 new Dog(); this指向实例化出的Dog对象
- call/apply方法调用 run.call(cat,arg1,arg2,...); run().apply(cat,[arg1,arg2,...]); this指向传递给call/apply方法的第一个参数,即cat
四种方式详情如下:
方法调用
方法调用,在我看来是最正常的一种调用。因为在【对象.方法】的调用过程中,【方法】中的this是指向【对象】的。例如
person.sayName();在sayName()方法的内部,this是指向person对象的。这也符合大多数编程语言的表现。而javascript中的其他情况,
this的指向却要根据实际情况和改变。-
函数调用
function foo(arg1,arg2){ console.log(this) // window function innerFoo(){ console.log(this) // window } innerFoo(); } foo();
innerFoo()在调用时,按照常理在innerFoo()的内部,this应该指向其外部函数foo。但是由于javascript语言设计上的错误,结果this指向的却是window。不过这里有个方便的解决方法,就是在父级内,子级外缓存一下父级的this指向。var _this=this; 这样在子函数中调用_this就可以了。 同样的一段代码,对比一下构造器调用。
-
构造器调用
function foo(arg1,arg2){ console.log(this) // foo{} function innerFoo(){ console.log(this) // window } innerFoo(); } new foo();
通过new关键字来调用函数的方式,就叫做构造器调用。这种方式是为了给javascript这种原型链继承的编程语言,增加类似于php,java中的class概念。只不过ECMAScript5暂时还不支持class关键词,是通过function ClassName(){}来模拟的。new foo()操作会创建一个隐藏链接到该函数的prototype成员的新对象,同时this指向这个新对象。因此可以看出,同样一个函数foo(),通过new这种构造器调用,和函数调用所得到的结果是不同的。前者this指向foo(),后者this指向window。因此为了避免困惑,通常建议在javascript的面向对象编程中,约定构造函数(也就是javacript中的类)的名字要首字母大写,提醒程序员不要以函数调用的方式调用构造函数。
-
apply/call调用
function Person(){ this.name = 'Smith'; this.getName = function(){ console.log(this.name); } } var person = new Person(); function Cat(){ this.name = 'Tomcat'; } var cat = new Cat(); person.getName.call(cat); // Tomcat
apply 和 call的异同:
相同点:都是改变一个函数被调用时的this指向
不同点:如果被调用的函数fn需要参数,apply要将fn所需参数放在一个数组中作为apply的第二个参数,call要将fn所需参数依次传进call函数,例如
fn.apply(obj,[arg1,arg2,arg3]);
fn.call(obj,arg1,arg2,arg3);
同样是三个fn的参数,却可以有两种不同的方式传进来,是多此一举吗?不是的。函数在创建的时候都会自动获得一个aguments参数,他是个类数组对象,用来存放传进来的所有参数。在类内部使用apply时,就可以fn.apply(this,arguments)这么调用,比fn.call(this,arg1,arg2,arg3)这样一个一个的罗列出参数要方便准确的多。
类数组arguments是什么?
总结:
为什么我的眼里常含泪水?因为
补充:
函数还有个bind()方法,可以在定义函数时,指定函数内部的this指向。且再调用call()或apply()也不能改变bind()过的this
var obj1 = {name:'name1'};
var obj2 = {name:'name2'};
var foo = function(){
console.log(this.name);
}.bind(obj2);
foo.call(obj1); // name