开场白：

image.png

javascript很灵活，也有很多糟粕。this的指向就够喝一壶的了。下面总结下集中函数调用情况下，this的指向问题。

javascript函数的四种调用的方式：

1. 方法调用 Persion.sayName(); this指向Person对象
2. 函数调用 getUsername(); 非严格模式下this指向window，严格模式下指向undefined
3. 构造器调用 new Dog(); this指向实例化出的Dog对象
4. call/apply方法调用 run.call(cat,arg1,arg2,...); run().apply(cat,[arg1,arg2,...]); this指向传递给call/apply方法的第一个参数,即cat

四种方式详情如下：

1. 方法调用
   方法调用，在我看来是最正常的一种调用。因为在【对象.方法】的调用过程中，【方法】中的this是指向【对象】的。例如
   person.sayName();在sayName()方法的内部，this是指向person对象的。这也符合大多数编程语言的表现。而javascript中的其他情况，
   this的指向却要根据实际情况和改变。

2. 函数调用

    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就可以了。 同样的一段代码，对比一下构造器调用。

3. 构造器调用

    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中的类）的名字要首字母大写，提醒程序员不要以函数调用的方式调用构造函数。

4. 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是什么？

总结：

为什么我的眼里常含泪水？因为

image

补充：

函数还有个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