JS中this的指向问题

前几天在牛客网上做题，遇到一道关于this指向的问题，以前就对this一知半解的我瞬间懵逼，下面我们来看看这道题，顺便讲解一下js中this的指向问题。

题目：填写内容让下面代码支持a.name = “name1”; b.name = “name2”;

function obj(name){
    _______
}
obj._____ = "name2";
var a = obj("name1");
var b = new obj;

在做这道题之前，我们先来学习一下this的知识。首先我们必须要明白的是，在javascript中this的指向是在函数被调用时才能确定的，在定义时是不能够确定的this指向的，准确一点说this最终指向的是调用它的对象。下面我们举例说明：

1.作为单独的函数被调用

1    var name = "小黑";    // 全局变量name
2    function Func() {
3        var name = "大白";    // 局部变量name
    
4        console.log(this);
5        console.log(this.name);
6    }

8    Func();

9    console.log(window.Func() === Func())    //true

上面的代码中，当我们调用Func()函数时，实际上Func()是作为window对象的方法被调用的(第9行代码可以可以验证)，因此this指向的就是全局对象window，第4行代码打印出来的也就是window，第5行代码打印出来的自然也就是全局变量name(所有的全局变量都作为window的属性)。

2.作为对象的方法被调用

还是先看下面的示例代码：

1    var Obj = {
2       name: "大白",
3        getName: function() {
4            console.log(this.name)
5        }
6    }

7    Obj.getName();           // 大白
8    window.Obj.getName();    // 大白

这段代码中getName()作为对象Obj的方法被Obj调用，因此这个时候this指向的便是Obj对象，自然this.name得到的就是"大白"。那么在第8行代码中window调用了getName()为什么不是指向window呢？因为window实际上是通过调用Obj间接调用getName()的，所以this还是指向直接调用它的Obj。

3.作为构造函数被调用

function Func() {
    this.name = "大白";
}

var fn = new Func();
console.log(fn.name)    // 大白

当我们通过new关键字构造一个实例对象的过程中，构造函数中的this一般情况下指向我们构造出来的实例化对象(特殊情况后面有单独讲解)，因此在构造过程中this.name = "大白"这句代码就相当于给实例对象fn创建了一个name属性并赋值"大白"。

使用apply()/call()改变this的指向

1    function getName() {
2        console.log(this.name);
3    }

4    var Obj = {
5        name: "大白"
6    }

7    getName.apply(Obj);    // 大白
8    console.log(Obj);    //{ name: "大白" }

这里用到了apply()方法改变this的指向(不知道apply()用法的自行百度)，第7行代码中我们可以理解成将getName()函数临时绑定在Obj对象上作为Obj对象的方法，同时调用这个方法。这个时候getName()中的this就指向临时调用它的Obj对象了，自然this.name得到的就是"大白"。注意这里并没有改变Obj对象，如第8行代码所示。

最后要解决前面留下的题，我们还需要讲个知识点：当构造函数中的this遇到return时的情况。

//示例1
function Fn1() {
    this.name = "大白";
    return { name: "小黑" };    // 返回一个空对象
}
var fn1 = new Fn1();
console.log(fn1.name);    // 小黑

//示例2
function Fn2() {
    this.name = "大白";
    return true;    // 返回true
}
var fn2 = new Fn2();
console.log(fn2.name);    // 大白

你可能会奇怪，一模一样的代码为什么得到的值不一样呢？ 注意！这里两段代码是区别的，示例1中函数返回值是一个对象，示例2中的返回值是true，当构造函数中返回值是一个对象时，this指向的就是返回的那个对象，如果返回值不是对象时，返回值指向的就是构造函数的示例对象，因此实例1中的this.name得到的是小黑而不是大白。

现在我们就可以来做上面的题了：填写内容让下面代码支持a.name = “name1”; b.name = “name2”;

     //创建全局函数
1    function obj(name){
2         if(name) {        // 区分普通调用和实例化调用
            this.name = name;
          }
          return this;    // 返回this引用，调用时this指向window
3    }

4    obj.prototype.name = "name2";    // 设置原型对象
5    var a = obj("name1");    //直接调用函数，a等于window，name为window的属性。
6    var b = new obj;    //调用函数实例化对象，this指向obj的实例化对象。

上面第4行代码涉及到对象原型的知识，如果对这方面还有疑问的可以看看我总结的另一篇文章：javaScript原型及原型链详解（一）

以上内容都是我个人的理解，难免会有理解不到位的地方，希望各位不吝赐教！大家一起进步。