this详解

this释义

this翻译为上下文，每次我看到这个解释都会产生一种迷糊的感觉，也不知道是哪位大神第一个把this翻译成这个意思，反正，在第一次看到的时候，很难了解到this真正的意思。做了两年前端，也经常查阅一些与this有关的资料，我是赞成把this解释为指向当前执行的环境，当然，这个“当前”经常会发生不可预知的变化，不过this指代执行环境应该是没有问题的。

现在来看看this具体指向吧。

this指向

• 作为对象的方法调用
• 作为普通函数调用
• 构造器调用
• Function.prototype.call或者Function.prototype.apply调用

1.作为对象的方法调用

当函数作为对象内的一个方法被调用的时候，this指向拥有该方法的对象。

var obj = {
    a : 1,
    getA : function(){
        alert(this === obj)//输出：true
        alert(this.a)//输出：1
    }
};
obj.getA();

2.作为普通函数调用

当函数不作为对象的一个方法时，即常说的普通函数方式，这个时候，this指向全局对象window（在浏览器的javascript环境中）。

window.name = 'globalName';

var getName = function(){
    return this.name
};

console.log(getName());//输出：globalName

或者：

window.name = 'globalName';

var myObj = {
    name : 'jack',
    getName : function(){
        return this.name;
    }
}

var getName = myObj.getName;
console.log(getName());//输出：globalName
console.log(myObj.getName());//输出：jack
console.log(myObj.getName);//输出：function(){return this.name;}//this->window

3.构造器调用

javascript中没有类，不过可以从构造器中创建对象，同时也一样提供了new运算符，这样使得构造器看起来很像一个类。

除了js自带的一些内置函数，大部分js函数都可以当作构造器使用。构造器外表看起来跟普通函数一模一样，它们的区别在于被调用的方式，当用new运算符调用函数时，该函数会返回一个对象，通常情况下，构造器的this就指向返回的这个对象。如：

var MyClass = function(){
    this.name = 'jack',
};

var obj = new MyClass();
console.log(obj.name);//输出：jack //this->obj

但是，如果构造器显式的返回一个对象，this则会指向返回的这个对象，而不是我们之前期待的this：

var MyClass = function(){
    this.name = 'jack';
    return {
        name : 'lily'
    }
};

var obj = new MyClass();
console.log(obj.name);//输出：lily

如果不显式的返回任何数据，或者返回的不是一个对象，就不会出现上述的问题：

var MyClass = function(){
    this.name = 'jack';
    return 'lily';//返回的是一个string类型
};

var obj = new MyClass();
console.log(obj.name);//输出：jack

4.Function.prototype.call或者Function.prototype.apply调用

跟普通函数调用相比，使用Function.prototype.call或者Function.prototype.apply可以动态的改变this的指向：

var obj1 = {
    name : 'jack',
    getName : function(){
        return this.name;
    }
};

var obj2 = {
    name : 'lily'
};

console.log(obj1.getName());//输出：jack
console.log(obj1.getName.call(obj2));//输出：lily //改变getName()里面this

写在最后

call和apply方法是javascript的特色，作为一个真正的js程序员，熟练使用这两个方法是必要的条件之一。下次详细的说说两个方法。

ps: 大部分内容参考JavaScript设计模式与开发实践这本书，本人也正在学习这本书的知识，写下这些就当作做笔记了。