《读 - JavaScript深入系列15篇》

[wangsiyuan0215]

这篇文章是我在读《JavaScript深入系列15篇》系列文章的过程中，关键点的总结和认知错误的纠正。

先上原文地址：JavaScript深入系列15篇。

正文开始~

《JavaScript深入之从原型到原型链》

首先纠正以前的认知错误：

prototype 并非仅属于构造函数，只要是函数那么均有 prototype 属性，指向函数的原型对象，包括 javaScript 的变量类型，如：String，Number，Object，Array 等等（均是函数）。

__proto__ 属性同样的，并非只属于实例，只要是对象（除了 null）均具有一个属性 __proto__，指向该对象的构造函数的原型。

/* 需要注意的是 */
function Person () { /.../ }
var person = new Person();

/* person 通过使用 new 关键字被创建为对象，因此只有 __proto__，没有 prototype */
/* Person 是函数，因此有 prototype */
person.__proto__ === Person.prototype; // true

/* Person 是通过函数声明的方式创建的，本质上等于 new Function，因此 Person.__proto__ 就是 Function 的原型 */
Person.__proto === Function.prototype; // true

纠正一个误区就是：Person 并不是原型，Person.prototype 才是原型。

根据文中所示，以及讨论中可以获取如下知识点：

/* 盲点 */
/* 1. 一切皆对象！对于原型链的末端必然是 Object.prototype.__proto__ === null 停止原型链的查找 */
1. Object.prototype.__proto__ === null // true

/* 2. Function.prototype 比较特殊，特殊特记就好 */
2. Function.prototype === Function.__proto__ // true

/* 3. Function.prototype 是原型对象，对象的原型是 Object.prototype */
3. Function.prototype.__proto__ === Object.prototype // true

/* 4. 前面说了，Object 是函数，那么它的构造函数是 Function 类型，那么它的 __proto__ === Function.prototype */
4. Object.__proto__ === Function.prototype // true

[wangsiyuan0215]

《JavaScript深入之词法作用域和动态作用域》

JavaScript 采用的是静态作用域（词法作用域），即在函数定义的时候就已经确定了其函数作用域[[scope]]。

在全局作用域中“定义”一个函数到时候，只会创建包含全局作用域的作用域链。只有「执行」该函数的时候，才会复制创建时的作用域，并将当前函数的局部作用域放在作用域链的顶端。

在阅读其中相关讨论时：

函数对象通过作用域链相互关联，函数体内部的变量保存在作用域链中，这在计算机的文献中称之为闭包；

在 JavaScript 程序语言范畴内理解就是，闭包就是函数把其变量的作用域也包含在这个函数的作用域内，形成一个所谓的“闭包”，导致外部函数无法访问内部变量。

[wangsiyuan0215]

《JavaScript深入之执行上下文栈》

JavaScript 引擎对于 js 代码的顺序并非是一行一行的执行和分析，而是一段一段的进行的，比如变量提升和函数提升。

对于文中最开始提及的两段代码，第一个是变量提升，第二个是函数提升。

变量提升的原则是在作用域内，优先提升变量的声明但是并不会处理赋值过程，赋值处理的时机与原来相同，因此第一段代码的打印结果是：foo1 和 foo2；

函数提升的原则相对比较简单，一刀（剪）切到作用域内的顶部，但是在变量声明的下面，因此第二段代码执行后打印的结果是：foo2 和 foo2；

那么就引申出一个问题：如何阻止函数提升？

1. 通过函数表达式，var a = function _a() {} 这种表达式的形式可以阻止；
2. 将 function 放到块里，如：{ function() { //... } }；
3. 使用 let 和 const 创建临时性死区；

这篇文章主要介绍了「执行上下文」以及函数在执行时如何将其执行的上下文入栈和出栈的：

1. JS 引擎维护执行上下文栈（ECS），这个栈用来存储函数在执行时的上下文；
2. JS 代码在执行之初，一定会对 ECS 入栈全局执行上下文 - globalContext；
3. ECS 入栈操作一定是在函数执行时，在函数执行结束后出栈；
4. 仅当应用结束时，globalContext 才会从 ECS 中出栈；

[wangsiyuan0215]

《JavaScript深入之变量对象》

JavaScript 引擎会在环境中预定义全局对象。

1. 通过全局对象，可以访问所有预定义的属性和方法；
2. 可以通过使用 this 关键字访问全局对象；
3. 在浏览器中，全局对象的 window 指向本身，即 this.window.b = this.b；
4. 在全局上下文中，变量对象就是全局对象；

接下来介绍下执行上下文，执行上下文包含三个方面：

1. 变量对象（VO）：包含参数、作用域内声明的变量和函数等；
2. 作用域链，头部插入；
3. this 指针；

本文主要介绍了变量对象（VO）。

当函数从被创建到执行，会被分为两个阶段：分析和执行，具体也可以被拆解为：

1. 分析 -> 进入函数执行上下文，此时并未执行函数，会在函数内部做变量提升、函数提升、收集变量（此时因为提升，函数内的变量都是 undefined），创建活动对象 AO，收集 [[scope]]；
2. 执行 -> 执行函数上下文，创建 Scope 属性并指向自身 AO 与 [[scope]] 合并后的新链表，对 AO 中收集到的变量赋值等等；

变量对象在函数定义时并不存在，仅在进入其所在的函数上下文时，才会被创建。

函数被执行时（准确的说应该是分析阶段），JS 引擎会创建活动对象（activition object, AO），而 AO 基本上可以认为是 VO。

[wangsiyuan0215]

《JavaScript 深入之作用域链》

我们知道，函数的作用域是在函数定义的时候就确定了下来的（词法作用域）。

也就是说，在函数创建的过程中，函数的内部 [[scope]] 就已经被确定了下来，[[scope]] 可以看做是指向作用域链的指针，当函数在全局作用域创建的时候，[[scope]] 指向仅有全局作用域的作用域链的头部（也就是指向了全局作用域链），当发生函数嵌套时，那么 [[scope]] 指向了包含由内向外的函数的 AO 的作用域链。

作者通过例子形象地描述了函数嵌套时，作用域链的表现形式：

function foo() {
    function bar() {
        ...
    }
}

复制代码函数创建时，各自的 [[scope]] 为：

foo.[[scope]] = [
  globalContext.VO
];

bar.[[scope]] = [
    fooContext.AO,
    globalContext.VO
];

可以看出，作用域链中每个节点实际上都是变量对象，以上是在函数创建阶段确定的作用域链；

此时的 bar.[[scope]] 指向的链表中，并没有自身的变量对象，那么函数自身的变量对象是在什么时候被加入到作用域链上的呢？

答案就是分析阶段（进入函数执行上下文）。

函数被 JS 引擎进入函数的执行上下文时，会创建自身的变量对象（在进入函数上下文时创建的AO），并通过创建执行上下文的 Scope 属性指向新的链表 —— 自身的 AO 与 [[scope]] 链表的合并，即：Context.Scope = [AO].concat([scope]][)。

这样就形成了一条完整的作用域链，仍然基于上述例子说明，此时 bar 函数的作用域链是：
barContext.Scope = barContext.AO -> bar.[[scope]](=> fooContext.AO -> globalContext.VO)。

[wangsiyuan0215]

《JavaScript深入之执行上下文》

函数执行时，会创建函数的执行上下文，然后进入函数执行上下文阶段（分析阶段），再进入执行阶段。

[wangsiyuan0215]

《JavaScript深入之闭包》

看当前这个例子：

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function _outer(i) {
      return function _inner(){
          console.log(i);
      }
  })(i);
}

data[0]();
data[1]();
data[2]();

使用 IIFE 时，内部函数的作用域链 [[scope]] 也是在创建函数时确认的，_inner 函数 [[scope]] 在创建时为 [_outerContext.AO, globalContext.VO] 作用域链。

而且在 _outer 函数进入函数执行上下文阶段时，会将参数放到 AO 活动对象中。

function foo(i) {
  console.log(i);
}

此时的 fooContext.AO 为：

fooContext = {
  AO: {
    arguments: {
      0: undefined,
      length: 1
    },
    i: undefined
  }
}

因此，对于例子中 data[0] 函数执行时，返回的 _inner 函数才可以根据作用域链找到 _outer 函数 AO 中的 i = 1，而不是接着向上寻找到 globalContext.VO 中的 i = 3。

通过这篇文章，可以总结出关于闭包在函数执行层面的概念：当外层函数执行完毕弹出 ECS 后，内部函数的作用域链中仍然引用了外层函数的 AO，使得外层函数的 AO 仍然在内存中活动。

[wangsiyuan0215]

《JavaScript深入之参数按值传递》

参数传递笼统地分为：按值传递 和 引用传递；
参数传递具体地分为：按值传递 和 引用传递 和 共享传递；

按值传递

如果传递参数的类型是基本类型，那么直接使用按值传递，拷贝一份副本传递给函数内部；

引用传递

如果传递参数的类型是对象、函数等类型，那么使用引用传递，将引用地址传递给内部函数；

共享传递

同#引用传递#，但是这种传递的方式是建立在，在函数内部如果修改了参数的整体，则同样是拷贝一份副本（类似于按值传递）。

var obj = {
    value: 1
};
function foo(o) {
    o = 2;
    console.log(o); //2
}
foo(obj);
console.log(obj.value) // 1

[wangsiyuan0215]

《JavaScript深入之call和apply的模拟实现》

call 的模拟

需要弄清楚 call 函数的具体流程：

1. 改变 this 的指向；
2. 将从第二个参数之后的参数传递到被执行的函数上；

// 原 call 的调用方式：

    foo.call(context, arg1, arg2, arg3, ..., argN);
//   |         |       |     |     |          |
//   |         |       |     |     |          |
//  this      ctx      |---    arguments   ---|

结合这篇文章的讲解，最终 call 的模拟则是：

Function.prototype.call2 = function (context) {
  var ctx = context ? Object(context) : window || globalObject;
  
  ctx.fn = this; // this  ---- 'foo'

  var args = [];
  for (var i = 1 ; i < arguments.length ; i++) {
    // 转换为字符串的原因是需要将参数放到字符串里通过 eval 执行。
    // 如果直接转换为具体值时，若是 string 类型，会被当做变量从而报错。
    args.push('arguments[' + i + ']'); 
  }

  var result = eval('ctx.fn(' + args.join(',') + ')'); // 这里也可以直接用 args，因为会发生隐式转换，转换时即调用 args.join(',')
  delete ctx.fn;
  return result;
}

有些需要注意的点我也同样的标注在实现里了。

apply 的模拟

apply 与 call 的唯一区别是，接收参数的类型不同，因此将上面的实现稍微修改下即可：

Function.prototype.apply2 = function (context, params) {
  var ctx = context ? Object(context) : window || globalObject;
  
  ctx.fn = this; // this  ---- 'foo'

  var result = null;
  
  if(!params) {
    result = ctx.fn();
  } else {
    var args = [];
    for (var i = 0 ; i < params.length ; i++) {
      args.push('params[' + i + ']');
    }
    var result = eval('ctx.fn(' + args.join(',') + ')');
  }
  delete ctx.fn;
  return result;
}

[wangsiyuan0215]

《JavaScript深入之bind的模拟实现》

bind 函数的主要流程是：

1. 返回一个函数；
2. 可以传入参数，可以传入全部参数，也可以传入部分参数；
3. 构造函数效果，但是 this 会失效，指向实例；

调用方法：

var foo = bar.bind(window, arg1, arg2, arg3, ..., argN);

接下来来实现下：

Function.prototype.bind2 = function _bind2(context){
  // 如果调用者不是函数需要提示错误
  if (typeof this !== 'function') {
    throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
  }
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);

  function _constructor() {
    var restArgs = Array.prototype.slice.call(arguments);
    return self.apply(this instanceof self ? this : context, args.concat(restArgs));
  }
  // 继承 prototype
  // 第一种方式 使用空函数 来继承 prototype
  // var Noop = function () {};
  // Noop.prototype = this.prototype;
  // _constructor.prototype = new Noop(); 
  // 第二种方式，利用 Object.create 基于 this.prototype 创建一个对象
  _constructor.prototype = Object.create(this.prototype);

  return _constructor;
}

[wangsiyuan0215]

《JavaScript 深入之类数组对象与 arguments》

arguments 的 callee 属性

arguments 是伪数组（也成类数组），其中有一个属性是 callee。

callee 指向自身函数，可以通过调用 callee 从而调用函数自身。

举个🌰：

var data = [];

for (var i = 0 ; i < 3; i++) {
  (data[i] = function() {
    console.log(arguments.callee.i);
  }).i = i;
}

data[0]; // 1
data[1]; // 2
data[2]; // 3

函数实参与 arguments 的共享

function foo(name, age, sex, hobbit) {

    console.log(name, arguments[0]); // name name

    // 改变形参
    name = 'new name';

    console.log(name, arguments[0]); // new name new name

    // 改变arguments
    arguments[1] = 'new age';

    console.log(age, arguments[1]); // new age new age

    // 测试未传入的是否会绑定
    console.log(sex); // undefined

    sex = 'new sex';

    console.log(sex, arguments[2]); // new sex undefined

    arguments[3] = 'new hobbit';

    console.log(hobbit, arguments[3]); // undefined new hobbit

}

foo('name', 'age')

在非严格模式下，arguments 与实参是可以共享的，当然如果没有实参传入，arguments 与实参是不会共享的。
但是在严格模式下，arguments 与实参是不共享的。