序
随着最近这几年web前端的飞速发展，越来越多的人投入到前端开发的行列。前端的特点是入门简单、精通极难。很多人在刚接触前端时很容易产生一些错误的认知。大批的前端工程师中，很多开发者觉得会用jQuery的API，搜集各种jq插件，能够用这些东西构建出体验还不错的小东西就觉足矣。导致目前前端工程师两极分化严重，流弊的能流弊到让人分分钟献上膝盖、五体投地，技术比较low的让人大跌眼镜。其实，不论学习任何技术，对基础和原理的理解永远是开发者的不断成长和进步的本源，也是衡量一个人能力的关键。因此笔者打算将工作生活中研究积累的一些东西和大家分享出来，整理到#deep in JavaScript#，希望和大家共同学习研究核心的、基础的东西。
问题
该学jQuery还是该学JavaScript？事实上，我们弄清楚了它们之间的关系就觉得这个问题很可笑，但这个问题经常会被一些初入前端开发的开发者所提及。jQuery是对原生JavaScript的封装，提供了一些列方便的API，并且优化了性能，屏蔽了底层的兼容性等，确实是个不错的东西。说到这里，JavaScript的重要性十分明了。因此我们应该剖析事务的本质，深入挖掘JavaScript中的一些问题。
话题
今天我们要讨论的是JavaScript中的this，如果不专门去学习研究，很难弄清楚其本源。诚然，因为我是从Java开发转过来的，在刚接触js没多久，觉得js的某些情况下的表现和Java中的this比较类似，就自然而然归为同一类东西了。在后续的学习中，看别人的博客和总结总能发现自己之前的理解有失偏颇，就像专门话精力去深入研究、总结。直到最近看的一本《你不知道的JavaScript（上卷）》中对JavaScript中的this的讲解，才把我之前对this的理解全都打通，让我豁然开朗。
究竟什么是this，this指向？
其实很多编程语言里面都有this，大部分的面向对象的开发语言中，this都是指当前当前对象。由于JavaScript是一个非面向对象的弱类型语言，也不存在类的说法。在ES5中，function是一等公民。
在上述的背景下，很多人会联想到：this指向函数本身，指对函数本身的引用；考虑如下代码：
function sayHello () {
this.content = 'hello';
}
console.log(content); // ReferenceError: content is not defined
sayHello();
console.log(content); // hello
代码很简单，在未调用函数时，全局作用域中没有content的定义，所以报引用错误；调用函数时，这里将content定义为this的一个属性，结合最后的输出来看，这个content被定义为全局对象（浏览器中是window，Node中是global）的属性。可见，在方法定义时，this默认指向了全局对象，这种情况也是非常常见的。
既然不指向函数，看似是指向当某个对象？
前面的代码，我们更改如下：
function sayHello () {
console.log( window === this );
}
sayHello(); // true
严格相等的比较得出的结果是function内部（函数调用）的this指向了全局对象window（宿主对象为浏览器），为什么会这样呢？我们知道，直接作用域下的定义事实上都定义在了全局对象下，例如：
var a = 23;
console.log( window.a === a ); // true
function sayHello () {
......
}
console.log( window.sayHello === sayHello ); // true
因此sayHello()可以看作是window.sayHello()（事实上就是这样），因而sayHello()内部的this就指向了window，看来this真的是指向某个对象。
指向与函数调用
上面的代码，我们思考下，因为调用者是window对象，因此sayHello内部的this指向window，如果是其他的对象调用呢？思考如下代码：
function sayHello () {
console.log( this === window );
console.log( this === obj);
}
var obj = {
sayHello: sayHello
};
// 笔误：更正为obj.sayHello()，对各位造成的困惑深表歉意，以后一定 严格校稿 2017/1/23
// sayHello(); // false true
obj.sayHello(); // false true
由于调用对象更改为obj了，因此this指向发生了更改，指向了obj。综合上面所有的讨论，我们可以得出结论：this就是一个指向当前对象的引用，具体指向在运行时得以确认。
引用指向的变更
在JavaScript中，this指向通常在三种情况下发生变更：
- 创建对象
- 使用call或apply强制更改
- 对象引用
第一种很好理解，根据ECMA5+的定义，在创建new Function类别的对象时，会将对象内部this指向当前对象，因此有如下代码：
// 用以创建对象的function name首字母大写是最佳实践，这里只是作对比用
function sayHello () {
console.log( this === window );
}
new sayHello(); // false
```
这是this指向发生了改变，指向了new sayHello()语句所创建的新对象；
第二种是调用Function对象内建的call或apply方法（方法作用完全相同，只是第二个参数传参不同，apply方法以数组形式传参），这种方式会强制将当前this指向call或apply调用传参的第一个参数：
```JavaScript
var obj = {
content: 20;
};
var content = 10;
function sayHello () {
console.log( this.content );
}
sayHello.call(obj); // 20
```
第三种即下面例子提到的，体现了this由运行时调用位置的特点：
```JavaScript
function sayHello () {
console.log( this === window );
console.log( this === obj);
}
var obj = {
sayHello: sayHello
};
sayHello(); // false true
```
# 特殊情况
考虑到新版的ECMAscript6标准已经发布，其应用范围正在飞速扩大。虽然浏览器的支持度不是太好，随着babel的横空出世，众多的开发人员在日常开发中都已经在享受最新版JavaScript带来的乐趣。如果你是一名前端开发人员，我强烈建议你在日常开发中将babel加入你的工作流技术栈。
新版的JavaScript引入了箭头函数() => {};使创建匿名函数更加简洁。尤其要注意一点的是，this在这里的指向在其书写定义的时候就已经确定了：
```JavaScript
var sayHello = () => {
console.log( this === window );
console.log( this === obj );
};
var obj = {
sayHello: sayHello
};
obj.sayHello(); // true false
```
# 总结
> 技术日新月异，不变的是那些经常被脑残瞧不起的最简单、最基本的东西。
> -- Kai Zou
# 说明
本人所有文章不间断更新，除非哪天我不做前端了（基本不可能^_^）。另外本人能力有限，疏漏支出在所难免。如果你对其中某处有不同的看法，欢迎留言讨论。