2016年10月 – geekman

——《你不知道的Javascript（上卷）》总结

整   理：肖雅君

时   间：2016-10-21

说   明：Javascript中的this的全面解析

this关键字的js最复杂的机制，是一个很特别的关键字，被自动定义在所有的函数作用域中，但是实际使用的时候很难说出this到底指向什么。下面将分2部分介绍this，每一部分都有各自解析的重点和主要内容。

一、this的含义和误区
1.为什么使用this
2.两种常见的对this的误解
3.this到底是什么

二、this的深入解析
1.什么是调用位置
2.绑定规则
（1）默认绑定
（2）隐式绑定
（3）显式绑定
（4）new绑定
3.this词法

【this的含义和误区】

一、为什么使用this
书中通过两段代码的对比来解释为什么要使用this，第一段代码如下：这段代码在不同的上下文对象（you和me）中重复使用函数identify()和speak()，不用针对不同的对象编写不同版本的函数：
function identify(){
return this.name.toUpperCase();
}
function speak(){
var greeting = "Hello, I am" + " " +identify.call(this);
console.log(greeting);
}
var me = {name:"Jay"};
var you = {name:"reader"};

identify.call(me);//JAY
identify.call(you);//READER
speak.call(me);//Hello, I am JAY
speak.call(you);//Hello, I am READER

如果不使用this，那就需要给identify()和speak()显示传入一个上下文对象：

identify(you);//READER2
speak(me);//Hello, I am JAY2

对比发现：this提供了一种更好的方式在隐式“传递”一个对象引用。因为随着模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱。因此，通过使用this可以将API设计的冯家简洁，并且易于复用。

二、两种常见的对于this的误解

1-误解1：指向函数本身

把this理解成指向函数本身，这种推断是按照英语语法的角度来推断的。
常见的在函数内部引用自身的情况有：递归或者是一个在第一次被调用后自己解除绑定的事件处理器。新手会认为：既然可以把函数看作一个对象，那就可以在调用函数时存储状态（属性的值）。
下面来通过记录分析函数foo被调用的次数来证明下this并不是指向的函数本身：

为什么会是0呢？
foo()函数中的console.log语句产生了4条输出，证明foo()确实被调用了4次，但是foo.count仍然是0，所以，从字面上理解，this指向函数本身是错的。那么，问题的原因是什么呢？
foo()函数是在全局作用域下执行的，this在这段代码中其实指向window，并这段代码再无意中创建了一个全局变量count,他的值是NaN。
那么为什么ths的行为和预期的不一致呢？书中提供了三种解决方法，其中前两种方法，回避了this的含义和工作原理。代码如下：

方法一：运用作用域（词法作用域）方法，该方法解决了我们遇到的问题，但是没有直面this.

function foo(num){
console.log("foo" + num);
data.count++;//记录foo被调用的次数
}
var data = {count:0};

for (var i = 0; i < 10; i++){
if(i > 5){
foo(i);
}
}
//foo6
//foo7
//foo8
//foo9
console.log(data.count);//4

===========================拓展分界线===========================

补充：这边涉及到一个作用域的问题，js中所说的词法作用域其实就是静态作用域，我随便扒了一段代码，来解释下js里的词法作用域和其他语言的作用域的区别。

比如说，在c#中有一段代码：
static void Main(string[] args)
{
if(true)
{
int num = 10;
}
Console.Write(num);
}
//报错：因为上下文中不存在num这个变量。因为这边的作用域是用花括号决定的，叫做块级作用域。

换种方式：
static void Main(string[] args)
{
if(true)
{
int num = 10;
System.Console.WriteLine(num);
}
}
而在js中：
if(true) {
var num = 10;
}
alert(num);
//10

弹出框10，所以在js中变量的作用范围是怎么限定的呢？

1.函数限定变量作用域：
在JS中，只有函数可以限定一个变量的作用范围。
也就是说，在JS中，在函数里面定义的变量，可以在函数里面被访问，但是在函数外无法访问。看如下代码：
var func = function() {
var num = 10;
};
try{
alert(num);
}catch( e ){
alert( e );
};
//抛出异常：num is not defined

这段代码再执行的时候，会抛出异常：num is not defined;因为num是在函数里面定义的，在函数外则不能使用。也就是说，在函数里面定义的变量在函数外不能使用，在函数内可随意使用，即使是在赋值之前。如下代码：(注：调试的时候在浏览器控制台调试不会抛出异常，会正常弹出10,需在本地测试。)

2.子域访问父域
之前说了，函数可以限定变量的作用域，那么在函数中的函数就可以成为该作用已的子域。在子域中的代码可以访问到父域中的变量，代码如下：
var func = function(){
var num = 10;
var sub_func = function(){
alert(num);
};
sub_func();
};
func();//10
这段代码的执行结果是10，可看出子欲可访问父域中的变量num。但是子域中访问父域的代码也是有条件的，如下：

var func = function(){
var num = 10;
var sub_func = function(){
var num = 20;
alert(num);
}
sub_func();
}
func();//20
执行结果是20，此时的num输出的是子域里的值。

由此可见js中的变量访问规律：js解释器现在当前的作用域中搜索是否有该变量的定义，如果有，则使用这个变量；如果无，则到父级中去寻找。层层往上，直到顶级作用域，如果顶级中也不存在，则抛出异常“变量未定义”。
综合如下：
(function() {
var num = 10;
(function() {
var num = 20;
(function(){
alert(num);
})()
})();
})();

//这段代码执行后打印出20. 如果将"var num = 20;"去掉，那么打印的就是10. 同样，如果再去掉"var num = 10"，那么就会出现未定义的错误。

3.变量名提升和函数名提升
变量名提升：
var num = 10;
var func = function() {
alert(num);
var num = 20;
alert(num);
};
func();
//undefined 20

像这样将代码定义在后面，而在前面使用的情况在Js中很常见，如：
var num = 10;
var func = function(){
var num;// 感觉就是这里已经定义了，但是没有赋值一样
alert(num);
var num = 20;
alert(num);
};
func();
这种现象就被称为变量名提升。

同样有函数名提升：
var func = function() {
alert("调用外面的函数");
};

var foo = function() {
func();
var func = function() {
alert("调用内部的函数");
};
func();
};

===========================拓展分界线END===========================

方法二：创建一个指向函数对象的词法标识符(变量)来引用它。同样该方法仍旧回避了this的问题。
function foo(num){
console.log("foo: " + num);
foo.count++; // foo指向它自身
}
foo.count = 0;
for(var i=0; i<10; i++){
if(i > 5){
foo(i);
}
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9
console.log(foo.count);// 4

方法三：因为this在foo函数执行时指向了别处，所以可强制this指向foo函数。
function foo(num){
console.log("foo: " + num);
this.count++;
}
foo.count = 0;
for(var i=0; i<10; i++){
if(i > 5){
foo.call(foo, i); //使用call()可以确保this指向函数本身
}
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9
console.log(foo.count);// 4

2-误解2：指向函数作用域

第二种常见的误解是：this指向函数作用域。这个问题有点复杂，因为在某种情况下它是正确的，但在其他情况下他却是错误的。
但一定要明白，this在任何情况下都不指向函数的作用域，在javascript内部作用域和对象确实很相似，可见的标识符都是他的属性，但作用域“对象”无法通过JavaScript代码访问，它存在于JavaScript引擎内部。
function foo(){
var a = 2;
this.bar();
}
function bar(){
console.log(this.a);
}
foo();
// undefined
这段代码试图通过this联通foo()和bar()的词法作用域，从而让bar()可以访问foo()作用域的变量a。这是错误的。

三、this到底是个什么鬼
排除以上的几种误解，可以得出以下结论：
1.this是在运行时进行绑定的，并不是在编写的时候绑定的。
2.this的绑定和函数的声明的位置没有关系，只取决于函数的调用方式。

具体细节是：当一个函数被调用的时候，会创建一个活动记录，这个活动记录会包含一些信息，如：函数在哪里被调用、函数的调用方式、传入的参数等等，而this就算这个记录的一个属性，会在函数执行的时候被用到。

四、总结
1.随着程序使用的模式越来越复杂，显示传递上下文对象会让代码显得很乱，因此通过this隐式传递可以将API设计的更加简洁并且利于复用。
2.this既不指向函数自身，也不指向函数的作用域。
3.this实际上是函数被调用时发生的绑定，它的指向完全取决于函数在哪里被调用。

关于变量的作用域的小结：
在js中词法作用域又叫做静态作用域，作用域的访问规则可以画成一个作用域链：
1) 作用域链就是对象的数组
2) 全部script是0级链，每个对象占一个位置
3) 凡是看到函数延伸一个链出来，一级级展开
4) 访问首先看当前函数，如果没有定义往上一级链检查
5) 如此往复，直到0级链

【this的深入解析】

调用位置
调用位置：就是函数在代码中被调用的位置（而不是声明位置）。要想回答htis到底引用的什么，只有仔细分析调用位置才能回答这个问题。
而分析条用位置最重要的就是分析调用栈。
调用栈：就是为了到达当前执行位置所调用的所有的函数。
function baz(){
//当前调用栈是:baz
//因此，当前调用位置是全局作用域
console.log("baz");
bar();//bar的调用位置
}
function bar(){
//当前的调用栈是：baz -> bar
//因此，当前的调用位置是在baz中
console.log("bar");
foo();//foo的调用位置
}
function foo(){
//当前的调用栈是baz -> bar -> foo
//因此，当前的调用位置是在baz中
console.log("foo");
}
baz();//baz的调用位置

绑定规则
思路：通过找到函数的调用位置，然后判断需要应用规则中的哪一条，便可决定this的绑定对象。关于this的绑定规则主要有一下四种：
（1）默认绑定
（2）隐式绑定
（3）显式绑定
（4）new绑定

1.默认绑定
默认绑定的典型类型是：独立函数调用。如下代码：
function foo(){
console.log(this.a);
}
var a = 2;
foo();//2
调用foo()函数的时候，函数应用了默认绑定，this指向全局对象window(这是在非严格模式下，若是在严格模式下会报错)，所以this.a被解析成了全局变量a。所以，可在不使用任何修饰的函数引用进行调用，只能使用默认绑定，无法应用其他规则。

2.隐式绑定
隐式绑定的常见形式上在调用位置具有上下文对象，或者说被某个对象拥有或者包含。如下：
function foo(){
console.log(this.a);
}
var obj = {a:2, foo:foo};

obj.foo(); //2
这里的函数是foo()是预先定义好的，然后将其添加为obj对象的引用属性。调用位置使用obj上下文对象来引用函数，因此可以说函数被调用的时候obj对象“拥有”或者“包含”它。无论你怎么称呼这种模式，当foo()被调用时，它的前面确实加上了obj的引用，当函数引用上下文对象时，隐式绑定规则就会把函数调用中的this绑定到这个上下文对象。所以,this.a和obj.a是一样的。

另一个需要注意的点是：对象属性引用链中只有最后一层或者说最顶层会影响调用位置。
function foo(){
console.log(this.a);
}
var obj1 = {a:1, obj2:obj2};
var obj2 = {a:100, foo:foo};
obj1.obj2.foo();//100

隐式丢失
隐式绑定最常见的问题就是隐式丢失 -> 隐式绑定的函数会丢失绑定对象。也就是说它会应用“默认绑定”，而把this绑定到全局对象或者undefined上，取决于是否是严格模式。【*1】
function foo(){
console.log(this.a);
}
var obj = {a:2, foo:foo}

var bar = obj.foo;//函数别名
var a = "global";//a是全局对象的属性
bar();//"global"

虽然bar是obj.foo的一个引用，但实际上，他引用的是foo函数本身，因此，此时的bar()其实是一个不带任何修饰的函数调用，因此，它应用了“默认绑定”。

===========================拓展分界线===========================
*1-备注：js中函数调用的两种方法：
function test(a){
alert("你输入的是：" + a);
}

//方法一：直接调用
test("臣妾做不到啊！");

//方法二：函数赋值给变量
var mytst = test;
mytst("贱人就是矫情");//用变量来调用函数

===========================拓展分界线END===========================

一种更微妙、更常见的并且更出乎意料的情况发生在传入回调函数时：
function foo(){
console.log(this.a);
}
function callBack(fn){
//fn其实引用的是foo
fn();//调用位置
}
var obj = {a:2, foo:foo}
var a = "global";
callBack(obj.foo);//"global"

参数传递其实就是一种隐式赋值，这句话可以用下面的两段代码来详细的讲解：
(1)代码一
var a = 1;
function fn(){
alert(a);
a = 2;
}
fn();
alert(a);
(2)代码二
var a = 1;
function fn(a){
alert(a);
a = 2;
}
fn();
alert(a);

在第一段代码中：
首先，在全局作用域中，先通过变量提升，找到了标识符a和函数fn，a此时有个默认的undefined。然后，在执行阶段，程序先将变量a赋值为1,紧接着执行函数fn(),此时在函数域中，依旧应用变量提升的规则，但是什么都没有找到，紧接着执行函数内的代码alert(a)，因为在函数中并没有找到变量a。所以，通过作用域链向上层的父级作用域中查找，我们找到了a,并且此时a的值已经被赋值为1，所以alert(a)的结果是1。下一句：a = 2,注意，a前面没有关键字var ，即：这里的a是全局的，也就说在执行a =2 时，它修改的是全局作用域中a 的值，所以alert(a)时，值自然为2。

在第二段代码中：
同样通过变量提升，找到标识符a和函数fn,a此时的默认值也是undefined。开始执行，a 先被赋值1，然后函数执行，这里与第一段代码的不同处在于，在函数fn中传入了参数a，那么这么做的结果就是：在函数域先运用变量提升的规则的时候，不会像第一段代码中那样，什么都找不到，而相当于定义了一个值为undefined（调用的时候没有传入参数）的变量a，所以执行函数中的alert(a)时，结果为undefined,而不会像第一种情况听过作用域链向上查找。因为本函数中已经找到了a，只不过是以参数的形式传入的。同理代码(a = 2)会修改a的值，即在函数域中，a的值现在为2（可以去尝试在函数中最后面alert一下a的值）。而在函数外执行alert(a),我们得到的结果便是1，因为该句代码是在全局中执行的，即会在全局中去查找变量a,而不会去访问函数域中的a。这也是因为，在JavaSceipt中子作用域可以访问父作用域而反过来却不行的规则。

回到this绑定丢失的话题上，上面讲这么多，其实就是想说明：参数传递其实就是一种隐式赋值，参数传递其实就是一种隐式赋值，参数传递其实就是一种隐式赋值。重要的事情三遍。
按照上面的方式来解析代码：在执行callBack(obj.foo)时，在函数作用域通过变量提升，找到了参数fn,它的默认值是undefined,然后将参数传入，其实相当于（var fn = obj.foo）,这就是与前面的将其直接赋值给一个变量对等上了，然后再执行fn(),应用“默认绑定”，此时的this已经不指向obj了，而是指向window(严格模式)。

如果把函数传入内置的函数而不是传入自己声明的函数，会发生什么呢？
function foo(){
console.log(this.a);
}
var objg = {a:2, foo:foo};
var a = "global";

setTimeout(obj.foo, 1000);//"global"

结果还是一样的。
因为javascript环境中内置的setTimeout()函数实现和下面的伪代码类似：
function setTimeout(fn,dalay){
//等待delay秒
fn();//调用位置
}
回调函数丢失this绑定的情况是非常常见的，并且还有一种情况this的行为会出乎我们意料：调用回调函数的函数可能会修改this。由于无法控制回调函数的执行方式，因此就没有办法控制调用位置得到期望的绑定。

那么如何通过固定this来“修复”这个问题呢？
即：如何解决this的丢失问题。

显示绑定
在隐式绑定中，我们必须在一个对象的内部包含一个指向函数的属性，并通过这个属性间接引用函数，从而把this间接绑定到这个对象上。那么，如果我们不想在每个对象内部包含函数引用，而想在每个对象上强制调用函数，该怎么做呢？

这时就需要call(绑定this,其他参数...)和apply(绑定this,其他参数...) 这两个方法了。这两个方法的第一个参数都是给this准备的，不同之处在于其他参数的形式上，他们两的其他参数对比如下：
call(绑定this,"参数1","参数2","参数3","参数4");
apply(绑定this,["参数1","参数2","参数3","参数4"]);

===========================拓展分界线===========================
注：跑题之apply和call
apply的其他参数是以数组序列形式存在的，它会在执行时将其解析成单个的参数再依次的传递到调用的函数中，这有什么用处呢？加入我们有一个数组：
var arr = [1,2,3,4,5,6];
现在我要找到其中的最大值，当然这里有很多方法了。既然这里讲到apply那么我们就用apply方法来解决这个问题。如果想要找到一组数中最大的一个，有一个简单的方法,使用Math.max(...)。但是，该方法并不能找出一个数组中的最大值，也就是说：
Math.max(1,2,3,4,5); // 可以找到最大值5
Math.max([1,2,3,4,5]); // NAN这就不行了，因为不接受以数组作为参数

我们的做法就是通过：
Math.max.apply(null, [1,2,3,4,5]); //得到数组中的最大值5

===========================拓展分界线END===========================

通过call()和apply()这两种方法我们可以显式的绑定this到指定的对象：
function foo(){
console.log(this.a);
}
var obj = {a: 2}
foo.call(obj);//2

这两个方法是如何工作的呢？它们的第一个参数是一个obj对象，它们会把这个对象obj绑定到this，接着在调用函数foo时指定这个this。因为你可以直接指定this 的绑定对象，也就是obj, 因此我们称之为显式绑定。也就是说：在调用 foo 时强制把它的 this 绑定到 obj 上

但是，显式绑定仍旧无法解决this丢失绑定的问题。

1.硬绑定
显式绑定的一个变种可以解决这个问题。
function foo(){
console.log(this.a);
}
var obj = {a: 2}
var bar = function(){
foo.call(obj);
}
bar();// 2

setTimeout(bar, 100); // 2

// 硬绑定的 bar 不可能再修改它的 this
bar.call(window); // 2

看看它是如何工作的：我们创建了一个函数bar(),并在他的内部手动调用foo.call(obj)。因此，强制把foo的this绑定到了obj，无论之后如何调用函数bar，它总会手动在obj上调用foo。这样的形式我们称之为硬绑定。

硬绑定的典型应用场景就是创建一个包裹函数，负责接收参数并返回值：
function foo(something){
console,log(this.a, something);
return this.a + something;
}
var obj = {a: 2}

var bar = function(){
return foo.apply(obj, arguments);
}
var b = bar(3); //2, 3
console.log(b); //5

硬绑定是一种非常常用的模式，所以ES5提供了内置的方法Function.prototype.bind,它的用法如下：
function foo(something){
console,log(this.a, something);
return this.a + something;
}
var obj = {
a:2
}
var bar = foo.bind(obj);
var b = bar(3); //2, 3
console.log(b); //5

bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数。

2. API调用的“上下文”
第三方库的许多函数，以及 JavaScript 语言和宿主环境中许多新的内置函数，都提供了一
个可选的参数，通常被称为“ 上下文”（ context），其作用和 bind(..) 一样，确保你的回调
函数使用指定的 this。
举例来说；
function foo(el){
console.log(el, this.id);
}
var obj = {id: "awesome"};
// 调用 foo(..)时把this绑定到obj
[1, 2, 3].forEach(foo, obj ); // 1 awesome 2 awesome 3 awesome

这些函数实际上就是通过 call(..) 或者 apply(..) 实现了显式绑定，这样你可以少些一些代码。

new 绑定
第四条规则，也是最后一条规则，在讲解他之前我们首先要澄清一个非常常见的关于javascript中函数和对象的误解。在传统的面向类的语言中，“构造函数”是类中的一些特殊方法，使用new初始化类是会调用类中的构造函数。通常的形式是这样：
someThinges = new MyClass(...)
javascript中也有个new操作符，但javascript中的new操作符的机制与面向类的语言完全不同。

首先我们重新定义一下JavaScrit中的“构造函数”。
在Javascript中，构造函数只是一些使用new操作符时被调用的函数。它并不会属于某个类，也不会实例化一个类。实际上它甚至都不能说是一种特殊的函数类型，它们只是被new操作符调用的普通函数而已。

举例来说，思考一下Number()作为构造函数时的行为，ES5.1中这样描述它：

Number构造函数
当Number在new表达式中被调用时，它是一个构造函数：它会初始化新建的对象。
所以，包括内置对象函数在内的所有函数都可以用new来调用，这种函数被称为构造函数调用，这有个非常细微的区别：实际上并不存在所为的“构造函数”，只有对于函数的“构造调用”。使用new来调用函数，会自动执行下面的操作：
（1）创建一个全新的对象
（2）这个新对象会被执行[[原型]]连接（之后会细说）
（3）这个新对象会绑定到函数调用的this
（4）如果函数没有返回其他对象，那么new表达式中的函数会自动返回这个对象。

如下代码：
function foo(a){
this.a = a
}
var bar = new foo(2);
console.log(bar) // foo {a: 2}
console.log(bar.a); //2

使用new 来调用foo(...)时，我们会构造一个新的对象，并把它绑定到foo(...)调用中的this上。new是最后一种可以影响函数调用时this绑定行为的方法。我们称之为new绑定。

箭头函数
我们之前介绍的四条规则已经可以包含所有正常是有的函数。但是在ES6中介绍了一种无法使用这些规则的特殊函数类型：箭头函数
箭头函数不是使用function关键字定义的，而是使用“ => ”定义。箭头函数不使用this的四种标准规则，而是根据外层作用域(函数或全局)来决定this。

最终小结：
如果要判断一个运行中函数的this绑定，就需要找到这个函数的直接调用位置。找到后就可以顺序应用下面这四条规则来判断this的绑定对象：
判断this:
1. 函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。
var bar = new foo()
2. 函数是否通过call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。
var bar = foo.call(obj2)
3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this绑定的是那个上下文对象。
var bar = obj1.foo()
4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。
var bar = foo()

另：ES6中的箭头函数不会使用四条标准的绑定规则，而是根据词法作用域来决定this,具体来说，箭头函数会继承外层函数调用的this绑定(无论this绑定到了什么)，这其实和ES6之前代码中的self = this 机制一样。