浅谈JavaScript中 this关键字

浅谈JavaScript中 this关键字

在学习JavaScript这门语言时，我们经常会接触到this关键字。可是有时候我们会对this关键字产生疑问，什么时候使用它? 为什么此处使用this更好？所以，掌握好this的使用方法对我们学习JavaScript会有很大的帮助。

1.为什么要学习this？

考虑这样一个重要问题，假设开发者，比如 Douglas Crockford （译者注：JavaScript 领域必知牛人），不再使用 new 和 this，转而使用完完全全的函数式写法来做代码复用，会怎样？

事实上，基于 JavaScript 内置的现成的原型继承功能，我们已经使用并且将继续广泛使用 new 和 this 关键词来实现代码复用。

理由一，如果只能使用自己写过的代码，你是没法工作的。现有的代码以及你读到这句话时别人正在写的代码都很有可能包含 this 关键词。那么学习怎么用好它是不是很有用呢？因此，即使你不打算在你的代码库中使用它，深入掌握 this 的原理也能让你在接手别人的代码理解其逻辑时事半功倍。

理由二，拓展你的编码视野和技能。使用不同的设计模式会加深你对代码的理解，怎么去看、怎么去读、怎么去写、怎么去理解。我们写代码不仅是给机器去解析，还是写给我们自己看的。这不仅适用于 JavaScript，对其他编程语言亦是如此。

2.什么是this？

JavaScript 的 this 关键词不同于基于类的 面向对象编程语言（比如 C#，Java，C++），因为 JavaScript 本来就不是一门基于类的面向对象编程语言。虽说 ES6 里面 JavaScript 提供了类这个特性给我们用，但它只是一个语法糖，一个基于原型继承的语法糖。

3.this的四种用法

用法1：在一般函数方法中使用 this 指代全局对象

function fn() {
    console.log( this.a );
}
var a = 2;
fn(); 
// 2 -- fn单独调用，this引用window

用法2：作为构造函数调用，this 指代new 出的对象

function test(){
　　this.x = 1;
}
　var obj = new test();
　alert(obj.x); // 1
 //运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
　var x = 2;
　function test(){
　　　this.x = 1;
　}
　var obj = new test();
　alert(x); //2

用法3：作为对象方法调用，this 指代上级对象

function test(){
　alert(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1

用法4：apply 调用 ，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数

    var x = 0;
　　function test(){
　　　　alert(this.x);
　　}
　　var obj={};
　　obj.x = 1;
　　obj.m = test;
　　obj.m.apply(); //0
//apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为

　　obj.m.apply(o); //1