用过React的读者知道，我们经常用extends继承React.Component。

// 部分源码
function Component(props, context, updater) {
  // ...
}
Component.prototype.setState = function(partialState, callback){
    // ...
}
const React = {
    Component,
    // ...
}
// 使用
class index extends React.Component{
    // ...
}

点击这里查看 React GitHub 源码

面试官可以顺着这个问JS继承的相关问题，比如：ES6的class继承用 ES5 如何实现？据说很多人答得不好。

构造函数、原型对象和实例之间的关系

要弄懂 extends 继承之前，我们先来复习一下构造函数、原型对象和实例之间的关系。 代码表示：

function F(){}
var f = new F();
// 构造器
F.prototype.constructor === F; // true
F.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

// 实例
f.__proto__ === F.prototype; // true
F.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

笔者画了一张图表示：

ES6 extends 继承做了什么操作

我们先看看这段包含静态方法的ES6继承代码：

// ES6
class Parent{
    constructor(name){
        this.name = name;
    }
    static sayHello(){
        console.log('hello');
    }
    sayName(){
        console.log('my name is ' + this.name);
        return this.name;
    }
}
class Child extends Parent{
    constructor(name, age){
        super(name);
        this.age = age;
    }
    sayAge(){
        console.log('my age is ' + this.age);
        return this.age;
    }
}
let parent = new Parent('Parent');
let child = new Child('Child', 18);
console.log('parent: ', parent); // parent:  Parent {name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child:  Child {name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18

其中这段代码里有两条原型链，不信看具体代码。

// 1、构造器原型链
Child.__proto__ === Parent; // true
Parent.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true
// 2、实例原型链
child.__proto__ === Child.prototype; // true
Child.prototype.__proto__ === Parent.prototype; // true
Parent.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

一图胜千言，笔者也画了一张图表示，如图所示：

结合代码和图可以知道。 ES6 extends 继承，主要就是：

1. 把子类构造函数(Child)的原型(__proto__)指向了父类构造函数(Parent)，
2. 把子类实例child的原型对象(Child.prototype) 的原型(__proto__)指向了父类parent的原型对象(Parent.prototype)。

这两点也就是图中用不同颜色标记的两条线。

1. 子类构造函数Child继承了父类构造函数Preant的里的属性。使用super调用的(ES5则用call或者apply调用传参)。 也就是图中用不同颜色标记的两条线。

看过《JavaScript高级程序设计-第3版》 章节6.3继承的读者应该知道，这2和3小点，正是寄生组合式继承，书中例子没有第1小点。 1和2小点都是相对于设置了__proto__链接。那问题来了，什么可以设置了__proto__链接呢。

new、Object.create和 Object.setPrototypeOf可以设置__proto__

说明一下，__proto__这种写法是浏览器厂商自己的实现。 再结合一下图和代码看一下的new，new出来的实例的__proto__指向构造函数的prototype，这就是new做的事情。 摘抄一下之前写过文章的一段。面试官问：能否模拟实现JS的new操作符，有兴趣的读者可以点击查看。

new做了什么：

1. 创建了一个全新的对象。
2. 这个对象会被执行[[Prototype]]（也就是__proto__）链接。
3. 生成的新对象会绑定到函数调用的this。
4. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
5. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。

Object.create ES5提供的

Object.create(proto, [propertiesObject])方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 它接收两个参数，不过第二个可选参数是属性描述符（不常用，默认是undefined）。对于不支持ES5的浏览器，MDN上提供了ployfill方案。 MDN Object.create()

// 简版：也正是应用了new会设置__proto__链接的原理。
if(typeof Object.create !== 'function'){
    Object.create = function(proto){
        function F() {}
        F.prototype = proto;
        return new F();
    }
}

Object.setPrototypeOf ES6提供的

Object.setPrototypeOf MDN

Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或  null。 Object.setPrototypeOf(obj, prototype)

`ployfill`
// 仅适用于Chrome和FireFox，在IE中不工作：
Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
  obj.__proto__ = proto;
  return obj; 
}

nodejs源码就是利用这个实现继承的工具函数的。 nodejs utils inherits

function inherits(ctor, superCtor) {
  if (ctor === undefined || ctor === null)
    throw new ERR_INVALID_ARG_TYPE('ctor', 'Function', ctor);

  if (superCtor === undefined || superCtor === null)
    throw new ERR_INVALID_ARG_TYPE('superCtor', 'Function', superCtor);

  if (superCtor.prototype === undefined) {
    throw new ERR_INVALID_ARG_TYPE('superCtor.prototype',
                                   'Object', superCtor.prototype);
  }
  Object.defineProperty(ctor, 'super_', {
    value: superCtor,
    writable: true,
    configurable: true
  });
  Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
}

ES6的extends的ES5版本实现

知道了ES6 extends继承做了什么操作和设置__proto__的知识点后，把上面ES6例子的用ES5就比较容易实现了，也就是说实现寄生组合式继承，简版代码就是：

// ES5 实现ES6 extends的例子
function Parent(name){
    this.name = name;
}
Parent.sayHello = function(){
    console.log('hello');
}
Parent.prototype.sayName = function(){
    console.log('my name is ' + this.name);
    return this.name;
}

function Child(name, age){
    // 相当于super
    Parent.call(this, name);
    this.age = age;
}
// new
function object(){
    function F() {}
    F.prototype = proto;
    return new F();
}
function _inherits(Child, Parent){
    // Object.create
    Child.prototype = Object.create(Parent.prototype);
    // __proto__
    // Child.prototype.__proto__ = Parent.prototype;
    Child.prototype.constructor = Child;
    // ES6
    // Object.setPrototypeOf(Child, Parent);
    // __proto__
    Child.__proto__ = Parent;
}
_inherits(Child,  Parent);
Child.prototype.sayAge = function(){
    console.log('my age is ' + this.age);
    return this.age;
}
var parent = new Parent('Parent');
var child = new Child('Child', 18);
console.log('parent: ', parent); // parent:  Parent {name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child:  Child {name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18

我们完全可以把上述ES6的例子通过babeljs转码成ES5来查看，更严谨的实现。

// 对转换后的代码进行了简要的注释
"use strict";
// 主要是对当前环境支持Symbol和不支持Symbol的typeof处理
function _typeof(obj) {
    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
        _typeof = function _typeof(obj) {
            return typeof obj;
        };
    } else {
        _typeof = function _typeof(obj) {
            return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
        };
    }
    return _typeof(obj);
}
// _possibleConstructorReturn 判断Parent。call(this, name)函数返回值 是否为null或者函数或者对象。
function _possibleConstructorReturn(self, call) {
    if (call && (_typeof(call) === "object" || typeof call === "function")) {
        return call;
    }
    return _assertThisInitialized(self);
}
// 如何 self 是void 0 （undefined） 则报错
function _assertThisInitialized(self) {
    if (self === void 0) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return self;
}
// 获取__proto__
function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
}
// 寄生组合式继承的核心
function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function");
    }
    // Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 
    // 也就是说执行后 subClass.prototype.__proto__ === superClass.prototype; 这条语句为true
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            writable: true,
            configurable: true
        }
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
}
// 设置__proto__
function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
        o.__proto__ = p;
        return o;
    };
    return _setPrototypeOf(o, p);
}
// instanceof操作符包含对Symbol的处理
function _instanceof(left, right) {
    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
        return right[Symbol.hasInstance](left);
    } else {
        return left instanceof right;
    }
}

function _classCallCheck(instance, Constructor) {
    if (!_instanceof(instance, Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}
// 按照它们的属性描述符 把方法和静态属性赋值到构造函数的prototype和构造器函数上
function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
    }
}
// 把方法和静态属性赋值到构造函数的prototype和构造器函数上
function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
}

// ES6
var Parent = function () {
    function Parent(name) {
        _classCallCheck(this, Parent);
        this.name = name;
    }
    _createClass(Parent, [{
        key: "sayName",
        value: function sayName() {
            console.log('my name is ' + this.name);
            return this.name;
        }
    }], [{
        key: "sayHello",
        value: function sayHello() {
            console.log('hello');
        }
    }]);
    return Parent;
}();

var Child = function (_Parent) {
    _inherits(Child, _Parent);
    function Child(name, age) {
        var _this;
        _classCallCheck(this, Child);
        // Child.__proto__ => Parent
        // 所以也就是相当于Parent.call(this, name); 是super(name)的一种转换
        // _possibleConstructorReturn 判断Parent.call(this, name)函数返回值 是否为null或者函数或者对象。
        _this = _possibleConstructorReturn(this, _getPrototypeOf(Child).call(this, name));
        _this.age = age;
        return _this;
    }
    _createClass(Child, [{
        key: "sayAge",
        value: function sayAge() {
            console.log('my age is ' + this.age);
            return this.age;
        }
    }]);
    return Child;
}(Parent);

var parent = new Parent('Parent');
var child = new Child('Child', 18);
console.log('parent: ', parent); // parent:  Parent {name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child:  Child {name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18

如果对 JS 继承相关还是不太明白的读者，推荐阅读以下书籍的相关章节，可以自行找到相应的pdf版本。

推荐阅读JS继承相关的书籍章节

《JavaScript 高级程序设计第 3 版》-第 6 章 面向对象的程序设计，6种继承的方案，分别是原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。图灵社区本书地址，后文放出GitHub链接，里面包含这几种继承的代码demo。

《JavaScript 面向对象编程第2版》-第6章 继承，12种继承的方案。1.原型链法（仿传统）、2.仅从原型继承法、3.临时构造器法、4.原型属性拷贝法、5.全属性拷贝法（即浅拷贝法）、6.深拷贝法、7.原型继承法、8.扩展与增强模式、9.多重继承法、10.寄生继承法、11.构造器借用法、12.构造器借用与属性拷贝法。

ES6 标准入门-第 21 章 class 的继承

《深入理解ES6》-第9章 JavaScript中的类

《你不知道的JavaScript-上卷》第6章 行为委托和附录 A ES6中的class

总结

继承对于 JS 来说就是父类拥有的方法和属性、静态方法等，子类也要拥有。子类中可以利用原型链查找，也可以在子类调用父类，或者从父类拷贝一份到子类等方案。 继承方法可以有很多，重点在于必须理解并熟 悉这些对象、原型以及构造器的工作方式，剩下的就简单了。寄生组合式继承是开发者使用比较多的。 回顾寄生组合式继承。主要就是三点：

• 子类构造函数的__proto__指向父类构造器，继承父类的静态方法
• 子类构造函数的prototype的__proto__指向父类构造器的prototype，继承父类的方法。
• 子类构造器里调用父类构造器，继承父类的属性。 行文到此，文章就基本写完了。文章代码和图片等资源放在这里 GitHub inhert 和demo展示es6-extends，结合console、source面板查看更佳。

阅读本文，你将学到：

1. 如何学习调试 vue2 源码
2. data 中的数据为什么可以用 this 直接获取到
3. methods 中的方法为什么可以用 this 直接获取到
4. 学习源码中优秀代码和思想，投入到自己的项目中

本文不难，用过 Vue 的都看得懂，希望大家动手调试和学会看源码。

看源码可以大胆猜测，最后小心求证。

2. 示例：this 能够直接获取到 data 和 methods

众所周知，这样是可以输出我是若川的。好奇的人就会思考为啥 this 就能直接访问到呢。

const vm = new Vue({
    data: {
        name: '我是若川',
    },
    methods: {
        sayName(){
            console.log(this.name);
        }
    },
});
console.log(vm.name); // 我是若川
console.log(vm.sayName()); // 我是若川

那么为什么 this.xxx 能获取到data里的数据，能获取到 methods 方法。

我们自己构造写的函数，如何做到类似Vue的效果呢。

function Person(options){

}

const p = new Person({
    data: {
        name: '若川'
    },
    methods: {
        sayName(){
            console.log(this.name);
        }
    }
});

console.log(p.name);
// undefined
console.log(p.sayName());
// Uncaught TypeError: p.sayName is not a function

如果是你，你会怎么去实现呢？带着问题，我们来调试 Vue2源码学习。

3. 准备环境调试源码一探究竟

可以在本地新建一个文件夹examples，新建文件index.html文件。 在<body></body>中加上如下js。

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
    const vm = new Vue({
        data: {
            name: '我是若川',
        },
        methods: {
            sayName(){
                console.log(this.name);
            }
        },
    });
    console.log(vm.name);
    console.log(vm.sayName());
</script>

再全局安装npm i -g http-server启动服务。

npm i -g http-server
cd examples
http-server .
// 如果碰到端口被占用，也可以指定端口
http-server -p 8081 .

这样就能在http://localhost:8080/打开刚写的index.html页面了。

对于调试还不是很熟悉的读者，可以看这篇文章《前端容易忽略的 debugger 调试技巧》，截图标注的很详细。

调试：在 F12 打开调试，source 面板，在例子中const vm = new Vue({打上断点。

刷新页面后按F11进入函数，这时断点就走进了 Vue 构造函数。

3.1 Vue 构造函数

function Vue (options) {
    if (!(this instanceof Vue)
    ) {
        warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
}
// 初始化
initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);

值得一提的是：if (!(this instanceof Vue)){} 判断是不是用了 new 关键词调用构造函数。 一般而言，我们平时应该不会考虑写这个。

当然看源码库也可以自己函数内部调用 new 。但 vue 一般一个项目只需要 new Vue() 一次，所以没必要。

而 jQuery 源码的就是内部 new ，对于使用者来说就是无new构造。

jQuery = function( selector, context ) {
  // 返回new之后的对象
  return new jQuery.fn.init( selector, context );
};

因为使用 jQuery 经常要调用。 其实 jQuery 也是可以 new 的。和不用 new 是一个效果。

如果不明白 new 操作符的用处，可以看我之前的文章：《如何模拟实现 JS 的 new 操作符》。

调试：继续在this._init(options);处打上断点，按F11进入函数。

3.2 _init 初始化函数

进入 _init 函数后，这个函数比较长，做了挺多事情，我们猜测跟data和methods相关的实现在initState(vm)函数里。

// 代码有删减
function initMixin (Vue) {
    Vue.prototype._init = function (options) {
      var vm = this;
      // a uid
      vm._uid = uid$3++;

      // a flag to avoid this being observed
      vm._isVue = true;
      // merge options
      if (options && options._isComponent) {
        // optimize internal component instantiation
        // since dynamic options merging is pretty slow, and none of the
        // internal component options needs special treatment.
        initInternalComponent(vm, options);
      } else {
        vm.$options = mergeOptions(
          resolveConstructorOptions(vm.constructor),
          options || {},
          vm
        );
      }

      // expose real self
      vm._self = vm;
      initLifecycle(vm);
      initEvents(vm);
      initRender(vm);
      callHook(vm, 'beforeCreate');
      initInjections(vm); // resolve injections before data/props
      //  初始化状态
      initState(vm);
      initProvide(vm); // resolve provide after data/props
      callHook(vm, 'created');
    };
}

调试：接着我们在initState(vm)函数这里打算断点，按F8可以直接跳转到这个断点，然后按F11接着进入initState函数。

3.3 initState 初始化状态

从函数名来看，这个函数主要实现功能是：

初始化 props
初始化 methods
监测数据
初始化 computed
初始化 watch

function initState (vm) {
    vm._watchers = [];
    var opts = vm.$options;
    if (opts.props) { initProps(vm, opts.props); }
    // 有传入 methods，初始化方法
    if (opts.methods) { initMethods(vm, opts.methods); }
    // 有传入 data，初始化 data
    if (opts.data) {
      initData(vm);
    } else {
      observe(vm._data = {}, true /* asRootData */);
    }
    if (opts.computed) { initComputed(vm, opts.computed); }
    if (opts.watch && opts.watch !== nativeWatch) {
      initWatch(vm, opts.watch);
    }
}

我们重点来看初始化 methods，之后再看初始化 data。

调试：在 initMethods 这句打上断点，同时在initData(vm)处打上断点，看完initMethods函数后，可以直接按F8回到initData(vm)函数。 继续按F11，先进入initMethods函数。

3.4 initMethods 初始化方法

function initMethods (vm, methods) {
    var props = vm.$options.props;
    for (var key in methods) {
      {
        if (typeof methods[key] !== 'function') {
          warn(
            "Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " +
            "Did you reference the function correctly?",
            vm
          );
        }
        if (props && hasOwn(props, key)) {
          warn(
            ("Method \"" + key + "\" has already been defined as a prop."),
            vm
          );
        }
        if ((key in vm) && isReserved(key)) {
          warn(
            "Method \"" + key + "\" conflicts with an existing Vue instance method. " +
            "Avoid defining component methods that start with _ or $."
          );
        }
      }
      vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
    }
}

initMethods函数，主要有一些判断。

判断 methods 中的每一项是不是函数，如果不是警告。
判断 methods 中的每一项是不是和 props 冲突了，如果是，警告。
判断 methods 中的每一项是不是已经在 new Vue实例 vm 上存在，而且是方法名是保留的 _ $ （在JS中一般指内部变量标识）开头，如果是警告。

除去这些判断，我们可以看出initMethods函数其实就是遍历传入的methods对象，并且使用bind绑定函数的this指向为vm，也就是new Vue的实例对象。

这就是为什么我们可以通过this直接访问到methods里面的函数的原因。

我们可以把鼠标移上 bind 变量，按alt键，可以看到函数定义的地方，这里是218行，点击跳转到这里看 bind 的实现。

3.4.1 bind 返回一个函数，修改 this 指向

function polyfillBind (fn, ctx) {
    function boundFn (a) {
      var l = arguments.length;
      return l
        ? l > 1
          ? fn.apply(ctx, arguments)
          : fn.call(ctx, a)
        : fn.call(ctx)
    }

    boundFn._length = fn.length;
    return boundFn
}

function nativeBind (fn, ctx) {
  return fn.bind(ctx)
}

var bind = Function.prototype.bind
  ? nativeBind
  : polyfillBind;

简单来说就是兼容了老版本不支持 原生的bind函数。同时兼容写法，对参数多少做出了判断，使用call和apply实现，据说是因为性能问题。

如果对于call、apply、bind的用法和实现不熟悉，可以查看我之前的文章：《模拟实现 JavaScript 的 call 和 apply 方法》、《如何模拟实现 JS 的 bind 方法》。

调试：看完了initMethods函数，按F8回到上文提到的initData(vm)函数断点处。

3.5 initData 初始化 data

initData 函数也是一些判断。主要做了如下事情：

先给 _data 赋值，以备后用。
最终获取到的 data 不是对象给出警告。
遍历 data ，其中每一项：
如果和 methods 冲突了，报警告。
如果和 props 冲突了，报警告。
不是内部私有的保留属性，做一层代理，代理到 _data 上。
最后监测 data，使之成为响应式的数据。

function initData (vm) {
    var data = vm.$options.data;
    data = vm._data = typeof data === 'function'
      ? getData(data, vm)
      : data || {};
    if (!isPlainObject(data)) {
      data = {};
      warn(
        'data functions should return an object:\n' +
        'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
        vm
      );
    }
    // proxy data on instance
    var keys = Object.keys(data);
    var props = vm.$options.props;
    var methods = vm.$options.methods;
    var i = keys.length;
    while (i--) {
      var key = keys[i];
      {
        if (methods && hasOwn(methods, key)) {
          warn(
            ("Method \"" + key + "\" has already been defined as a data property."),
            vm
          );
        }
      }
      if (props && hasOwn(props, key)) {
        warn(
          "The data property \"" + key + "\" is already declared as a prop. " +
          "Use prop default value instead.",
          vm
        );
      } else if (!isReserved(key)) {
        proxy(vm, "_data", key);
      }
    }
    // observe data
    observe(data, true /* asRootData */);
}

3.5.1 getData 获取数据

是函数时调用函数，执行获取到对象。

function getData (data, vm) {
    // #7573 disable dep collection when invoking data getters
    pushTarget();
    try {
      return data.call(vm, vm)
    } catch (e) {
      handleError(e, vm, "data()");
      return {}
    } finally {
      popTarget();
    }
}

3.5.2 proxy 代理

其实就是用 Object.defineProperty 定义对象

这里用处是：this.xxx 则是访问的 this._data.xxx。

/**
   * Perform no operation.
   * Stubbing args to make Flow happy without leaving useless transpiled code
   * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).
   */
function noop (a, b, c) {}
var sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: noop,
    set: noop
};

function proxy (target, sourceKey, key) {
    sharedPropertyDefinition.get = function proxyGetter () {
      return this[sourceKey][key]
    };
    sharedPropertyDefinition.set = function proxySetter (val) {
      this[sourceKey][key] = val;
    };
    Object.defineProperty(target, key, sharedPropertyDefinition);
}

3.5.3 Object.defineProperty 定义对象属性

Object.defineProperty 算是一个非常重要的API。还有一个定义多个属性的API：Object.defineProperties(obj, props) (ES5)

Object.defineProperty 涉及到比较重要的知识点，面试也常考。

value——当试图获取属性时所返回的值。
writable——该属性是否可写。
enumerable——该属性在for in循环中是否会被枚举。
configurable——该属性是否可被删除。
set()——该属性的更新操作所调用的函数。
get()——获取属性值时所调用的函数。

详细举例见此链接。

3.6 文中出现的一些函数，最后统一解释下

3.6.1 hasOwn 是否是对象本身拥有的属性

调试模式下，按alt键，把鼠标移到方法名上，可以看到函数定义的地方。点击可以跳转。

/**
   * Check whether an object has the property.
   */
var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn (obj, key) {
  return hasOwnProperty.call(obj, key)
}

hasOwn({ a: undefined }, 'a') // true
hasOwn({}, 'a') // false
hasOwn({}, 'hasOwnProperty') // false
hasOwn({}, 'toString') // false
// 是自己的本身拥有的属性，不是通过原型链向上查找的。

3.6.2 isReserved 是否是内部私有保留的字符串$ 和 _ 开头

/**
   * Check if a string starts with $ or _
   */
function isReserved (str) {
  var c = (str + '').charCodeAt(0);
  return c === 0x24 || c === 0x5F
}
isReserved('_data'); // true
isReserved('$options'); // true
isReserved('data'); // false
isReserved('options'); // false

4. 最后用60余行代码实现简化版

function noop (a, b, c) {}
var sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: noop,
    set: noop
};
function proxy (target, sourceKey, key) {
    sharedPropertyDefinition.get = function proxyGetter () {
      return this[sourceKey][key]
    };
    sharedPropertyDefinition.set = function proxySetter (val) {
      this[sourceKey][key] = val;
    };
    Object.defineProperty(target, key, sharedPropertyDefinition);
}
function initData(vm){
  const data = vm._data = vm.$options.data;
  const keys = Object.keys(data);
  var i = keys.length;
  while (i--) {
    var key = keys[i];
    proxy(vm, '_data', key);
  }
}
function initMethods(vm, methods){
  for (var key in methods) {
    vm[key] = typeof methods[key] !== 'function' ? noop : methods[key].bind(vm);
  }
}

function Person(options){
  let vm = this;
  vm.$options = options;
  var opts = vm.$options;
  if(opts.data){
    initData(vm);
  }
  if(opts.methods){
    initMethods(vm, opts.methods)
  }
}

const p = new Person({
    data: {
        name: '若川'
    },
    methods: {
        sayName(){
            console.log(this.name);
        }
    }
});

console.log(p.name);
// 未实现前： undefined
// '若川'
console.log(p.sayName());
// 未实现前：Uncaught TypeError: p.sayName is not a function
// '若川'

5. 总结

本文涉及到的基础知识主要有如下：

构造函数
this 指向
call、bind、apply
Object.defineProperty
等等基础知识。

本文源于解答源码共读群友的疑惑，通过详细的描述了如何调试 Vue 源码，来探寻答案。

解答文章开头提问：

通过this直接访问到methods里面的函数的原因是：因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)。

通过 this 直接访问到 data 里面的数据的原因是：data里的属性最终会存储到new Vue的实例（vm）上的 _data对象中，访问 this.xxx，是访问Object.defineProperty代理后的 this._data.xxx。

Vue的这种设计，好处在于便于获取。也有不方便的地方，就是props、methods 和 data三者容易产生冲突。

文章整体难度不大，但非常建议读者朋友们自己动手调试下。调试后，你可能会发现：原来 Vue 源码，也没有想象中的那么难，也能看懂一部分。

启发：我们工作使用常用的技术和框架或库时，保持好奇心，多思考内部原理。能够做到知其然，知其所以然。就能远超很多人。

你可能会思考，为什么模板语法中，可以省略this关键词写法呢，内部模板编译时其实是用了with。有余力的读者可以探究这一原理。

最后，欢迎加我微信 ruochuan12 交流，参与源码共读活动，大家一起学习源码，共同进步。

本文涉及到的 koa-compose 仓库文件，整个index.js文件代码行数虽然不到 50 行，而且测试用例test/test.js文件 300 余行，但非常值得我们学习。

歌德曾说：读一本好书，就是在和高尚的人谈话。同理可得：读源码，也算是和作者的一种学习交流的方式。

阅读本文，你将学到：

1. 熟悉 koa-compose 中间件源码、可以应对面试官相关问题
2. 学会使用测试用例调试源码
3. 学会 jest 部分用法

2. 环境准备

2.1 克隆 koa-compose 项目

本文仓库地址 koa-compose-analysis，求个star~

# 可以直接克隆我的仓库，我的仓库保留的 compose 仓库的 git 记录
git clone https://github.com/lxchuan12/koa-compose-analysis.git
cd koa-compose/compose
npm i

顺带说下：我是怎么保留 compose 仓库的 git 记录的。

# 在 github 上新建一个仓库 `koa-compose-analysis` 克隆下来
git clone https://github.com/lxchuan12/koa-compose-analysis.git
cd koa-compose-analysis
git subtree add --prefix=compose https://github.com/koajs/compose.git main
# 这样就把 compose 文件夹克隆到自己的 git 仓库了。且保留的 git 记录

关于更多 git subtree，可以看这篇文章用 Git Subtree 在多个 Git 项目间双向同步子项目，附简明使用手册。

接着我们来看怎么根据开源项目中提供的测试用例调试源码。

2.2 根据测试用例调试 compose 源码

用VSCode（我的版本是 1.60 ）打开项目，找到 compose/package.json，找到 scripts 和 test 命令。

// compose/package.json
{
    "name": "koa-compose",
    // debug （调试）
    "scripts": {
        "eslint": "standard --fix .",
        "test": "jest"
    },
}

在scripts上方应该会有debug或者调试字样。点击debug(调试)，选择 test。

接着会执行测试用例test/test.js文件。终端输出如下图所示。

接着我们调试 compose/test/test.js 文件。 我们可以在 45行 打上断点，重新点击 package.json => srcipts => test 进入调试模式。 如下图所示。

接着按上方的按钮，继续调试。在compose/index.js文件中关键的地方打上断点，调试学习源码事半功倍。

更多 nodejs 调试相关 可以查看官方文档。

顺便提一下几个调试相关按钮。

1. 继续（F5）

1. 单步跳过（F10）

1. 单步调试（F11）

1. 单步跳出（Shift + F11）

1. 重启（Ctrl + Shift + F5）

1. 断开链接（Shift + F5）

接下来，我们跟着测试用例学源码。

3. 跟着测试用例学源码

分享一个测试用例小技巧：我们可以在测试用例处加上only修饰。

// 例如
it.only('should work', async () => {})

这样我们就可以只执行当前的测试用例，不关心其他的，不会干扰调试。

3.1 正常流程

打开 compose/test/test.js 文件，看第一个测试用例。

// compose/test/test.js
'use strict'

/* eslint-env jest */

const compose = require('..')
const assert = require('assert')

function wait (ms) {
  return new Promise((resolve) => setTimeout(resolve, ms || 1))
}
// 分组
describe('Koa Compose', function () {
  it.only('should work', async () => {
    const arr = []
    const stack = []

    stack.push(async (context, next) => {
      arr.push(1)
      await wait(1)
      await next()
      await wait(1)
      arr.push(6)
    })

    stack.push(async (context, next) => {
      arr.push(2)
      await wait(1)
      await next()
      await wait(1)
      arr.push(5)
    })

    stack.push(async (context, next) => {
      arr.push(3)
      await wait(1)
      await next()
      await wait(1)
      arr.push(4)
    })

    await compose(stack)({})
    // 最后输出数组是 [1,2,3,4,5,6]
    expect(arr).toEqual(expect.arrayContaining([1, 2, 3, 4, 5, 6]))
  })
}

大概看完这段测试用例，context是什么，next又是什么。

在koa的文档上有个非常代表性的中间件 gif 图。

而compose函数作用就是把添加进中间件数组的函数按照上面 gif 图的顺序执行。

3.1.1 compose 函数

简单来说，compose 函数主要做了两件事情。

1. 接收一个参数，校验参数是数组，且校验数组中的每一项是函数。

1. 返回一个函数，这个函数接收两个参数，分别是context和next，这个函数最后返回Promise。

/**
 * Compose `middleware` returning
 * a fully valid middleware comprised
 * of all those which are passed.
 *
 * @param {Array} middleware
 * @return {Function}
 * @api public
 */
function compose (middleware) {
  // 校验传入的参数是数组，校验数组中每一项是函数
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch(i){
      // 省略，下文讲述
    }
  }
}

接着我们来看 dispatch 函数。

3.1.2 dispatch 函数

function dispatch (i) {
  // 一个函数中多次调用报错
  // await next()
  // await next()
  if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  index = i
  // 取出数组里的 fn1, fn2, fn3...
  let fn = middleware[i]
  // 最后 相等，next 为 undefined
  if (i === middleware.length) fn = next
  // 直接返回 Promise.resolve()
  if (!fn) return Promise.resolve()
  try {
    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
  } catch (err) {
    return Promise.reject(err)
  }
}

值得一提的是：bind函数是返回一个新的函数。第一个参数是函数里的this指向（如果函数不需要使用this，一般会写成null）。 这句fn(context, dispatch.bind(null, i + 1)，i + 1 是为了 let fn = middleware[i] 取middleware中的下一个函数。 也就是 next 是下一个中间件里的函数。也就能解释上文中的 gif图函数执行顺序。 测试用例中数组的最终顺序是[1,2,3,4,5,6]。

3.1.3 简化 compose 便于理解

自己动手调试之后，你会发现 compose 执行后就是类似这样的结构（省略 try catch 判断）。

// 这样就可能更好理解了。
// simpleKoaCompose
const [fn1, fn2, fn3] = stack;
const fnMiddleware = function(context){
    return Promise.resolve(
      fn1(context, function next(){
        return Promise.resolve(
          fn2(context, function next(){
              return Promise.resolve(
                  fn3(context, function next(){
                    return Promise.resolve();
                  })
              )
          })
        )
    })
  );
};

也就是说koa-compose返回的是一个Promise，从中间件（传入的数组）中取出第一个函数，传入context和第一个next函数来执行。
第一个next函数里也是返回的是一个Promise，从中间件（传入的数组）中取出第二个函数，传入context和第二个next函数来执行。
第二个next函数里也是返回的是一个Promise，从中间件（传入的数组）中取出第三个函数，传入context和第三个next函数来执行。
第三个...
以此类推。最后一个中间件中有调用next函数，则返回Promise.resolve。如果没有，则不执行next函数。 这样就把所有中间件串联起来了。这也就是我们常说的洋葱模型。

不得不说非常惊艳，“玩还是大神会玩”。

3.2 错误捕获

it('should catch downstream errors', async () => {
  const arr = []
  const stack = []

  stack.push(async (ctx, next) => {
    arr.push(1)
    try {
      arr.push(6)
      await next()
      arr.push(7)
    } catch (err) {
      arr.push(2)
    }
    arr.push(3)
  })

  stack.push(async (ctx, next) => {
    arr.push(4)
    throw new Error()
  })

  await compose(stack)({})
  // 输出顺序 是 [ 1, 6, 4, 2, 3 ]
  expect(arr).toEqual([1, 6, 4, 2, 3])
})

相信理解了第一个测试用例和 compose 函数，也是比较好理解这个测试用例了。这一部分其实就是对应的代码在这里。

try {
    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
} catch (err) {
  return Promise.reject(err)
}

3.3 next 函数不能调用多次

it('should throw if next() is called multiple times', () => {
  return compose([
    async (ctx, next) => {
      await next()
      await next()
    }
  ])({}).then(() => {
    throw new Error('boom')
  }, (err) => {
    assert(/multiple times/.test(err.message))
  })
})

这一块对应的则是：

index = -1
dispatch(0)
function dispatch (i) {
  if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  index = i
}

调用两次后 i 和 index 都为 1，所以会报错。

compose/test/test.js文件中总共 300余行，还有很多测试用例可以按照文中方法自行调试。

4. 总结

虽然koa-compose源码 50行 不到，但如果是第一次看源码调试源码，还是会有难度的。其中混杂着高阶函数、闭包、Promise、bind等基础知识。

通过本文，我们熟悉了 koa-compose 中间件常说的洋葱模型，学会了部分 jest 用法，同时也学会了如何使用现成的测试用例去调试源码。

相信学会了通过测试用例调试源码后，会觉得源码也没有想象中的那么难。

开源项目，一般都会有很全面的测试用例。除了可以给我们学习源码调试源码带来方便的同时，也可以给我们带来的启发：自己工作中的项目，也可以逐步引入测试工具，比如 jest

此外，读开源项目源码是我们学习业界大牛设计思想和源码实现等比较好的方式。

看完本文，非常希望能自己动手实践调试源码去学习，容易吸收消化。另外，如果你有余力，可以继续看我的 koa-compose 源码文章：《学习 koa 源码的整体架构，浅析koa洋葱模型原理和co原理》。

欢迎在我的网站查看更多内容。

2. 对象中的this指向

var person = {
  name: '若川',
  say: function(text){
    console.log(this.name + ', ' + text);
  }
}
console.log(person.name);
console.log(person.say('在写文章')); // 若川, 在写文章
var say = person.say;
say('在写文章'); // 这里的this指向就丢失了，指向window了。(非严格模式)

3. 类中的this指向

3.1 ES5

// ES5
var Person = function(){
  this.name = '若川';
}
Person.prototype.say = function(text){
  console.log(this.name + ', ' + text);
}
var person = new Person();
console.log(person.name); // 若川
console.log(person.say('在写文章'));
var say = person.say;
say('在写文章'); // 这里的this指向就丢失了，指向 window 了。

3.2 ES6

// ES6
class Person{
  construcor(name = '若川'){
     this.name = name;
  }
  say(text){
    console.log(`${this.name}, ${text}`);
  }
}
const person = new Person();
person.say('在写文章')
// 解构
const { say } = person;
say('在写文章'); // 报错 this ，因为ES6 默认启用严格模式，严格模式下指向 undefined

4. 尤大在Vuex源码中是怎么处理的

先看代码：

class Store{
  constructor(options = {}){
     this._actions = Object.create(null);
  // bind commit and dispatch to self
      // 给自己 绑定 commit 和 dispatch
      const store = this
      const { dispatch, commit } = this
      // 为何要这样绑定 ?
      // 说明调用commit和dispach 的 this 不一定是 store 实例
      // 这是确保这两个函数里的this是store实例
      this.dispatch = function boundDispatch (type, payload) {
        return dispatch.call(store, type, payload)
      }
      this.commit = function boundCommit (type, payload, options) {
        return commit.call(store, type, payload, options)
      }
  }
  dispatch(){
     console.log('dispatch', this);
  }
  commit(){
     console.log('commit', this);
  }
}
const store = new Store();
store.dispatch(); // 输出结果 this 是什么呢？

const { dispatch, commit } = store;
dispatch(); // 输出结果 this 是什么呢？
commit();  // 输出结果 this 是什么呢？

结论：非常巧妙的用了call把dispatch和commit函数的this指向强制绑定到store实例对象上。如果不这么绑定就报错了。

4.1 actions 解构 store

其实Vuex源码里就有上面解构const { dispatch, commit } = store;的写法。想想我们平时是如何写actions的。actions中自定义函数的第一个参数其实就是 store 实例。

这时我们翻看下actions文档：https://vuex.vuejs.org/zh/guide/actions.html

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

也可以用解构赋值的写法。

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

有了Vuex源码构造函数里的call绑定，这样this指向就被修正啦~不得不说祖师爷就是厉害。这一招，大家可以免费学走~

接着我们带着问题，为啥上文中的context就是store实例，有dispatch、commit这些方法呢。继续往下看。

4.2 为什么 actions 对象里的自定义函数 第一个参数就是 store 实例。

以下是简单源码，有缩减，感兴趣的可以看我的Vuex源码文章。

class Store{
 construcor(){
    // 初始化 根模块
    // 并且也递归的注册所有子模块
    // 并且收集所有模块的 getters 放在 this._wrappedGetters 里面
    installModule(this, state, [], this._modules.root)
 }
}

接着我们看installModule函数中的遍历注册 actions 实现

function installModule (store, rootState, path, module, hot) {
    // 省略若干代码
    // 循环遍历注册 action
    module.forEachAction((action, key) => {
      const type = action.root ? key : namespace + key
      const handler = action.handler || action
      registerAction(store, type, handler, local)
    })
}

接着看注册 actions 函数实现 registerAction

/**
* 注册 mutation
* @param {Object} store 对象
* @param {String} type 类型
* @param {Function} handler 用户自定义的函数
* @param {Object} local local 对象
*/
function registerAction (store, type, handler, local) {
  const entry = store._actions[type] || (store._actions[type] = [])
  // payload 是actions函数的第二个参数
  entry.push(function wrappedActionHandler (payload) {
    /**
     * 也就是为什么用户定义的actions中的函数第一个参数有
     *  { dispatch, commit, getters, state, rootGetters, rootState } 的原因
     * actions: {
     *    checkout ({ commit, state }, products) {
     *        console.log(commit, state);
     *    }
     * }
     */
    let res = handler.call(store, {
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload)
    // 源码有删减
}

比较容易发现调用顺序是 new Store() => installModule(this) => registerAction(store) => let res = handler.call(store)。

其中handler 就是 用户自定义的函数，也就是对应上文的例子increment函数。store实例对象一路往下传递，到handler执行时，也是用了call函数，强制绑定了第一个参数是store实例对象。

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

这也就是为什么 actions 对象中的自定义函数的第一个参数是 store 对象实例了。

好啦，文章到这里就基本写完啦~相对简短一些。应该也比较好理解。

5. 最后再总结下 this 指向

摘抄下面试官问：this 指向文章结尾。

如果要判断一个运行中函数的 this 绑定， 就需要找到这个函数的直接调用位置。 找到之后 就可以顺序应用下面这四条规则来判断 this 的绑定对象。

1. new 调用：绑定到新创建的对象，注意：显示return函数或对象，返回值不是新创建的对象，而是显式返回的函数或对象。
   
2. call 或者 apply（ 或者 bind） 调用：严格模式下，绑定到指定的第一个参数。非严格模式下，null和undefined，指向全局对象（浏览器中是window），其余值指向被new Object()包装的对象。
   
3. 对象上的函数调用：绑定到那个对象。
   
4. 普通函数调用： 在严格模式下绑定到 undefined，否则绑定到全局对象。

ES6 中的箭头函数：不会使用上文的四条标准的绑定规则， 而是根据当前的词法作用域来决定this， 具体来说， 箭头函数会继承外层函数，调用的 this 绑定（ 无论 this 绑定到什么），没有外层函数，则是绑定到全局对象（浏览器中是window）。 这其实和 ES6 之前代码中的 self = this 机制一样。

欢迎在我的博客阅读更多文章。

本文通过学习Vue3源码中的工具函数模块的源码，学习源码为自己所用。

歌德曾说：读一本好书，就是在和高尚的人谈话。同理可得：读源码，也算是和作者的一种学习交流的方式。

阅读本文，你将学到：

• 如何学习 JavaScript 基础知识，会推荐很多学习资料
• 如何学习调试 vue 3 源码
• 如何学习源码中优秀代码和思想，投入到自己的项目中
• Vue 3 源码 shared 模块中的几十个实用工具函数
• 我的一些经验分享

shared模块中57个工具函数，本次阅读其中的30余个。

2. 环境准备

2.1 读开源项目 贡献指南

打开 vue-next，开源项目一般都能在 README.md 或者 .github/contributing.md 找到贡献指南。

而贡献指南写了很多关于参与项目开发的信息。比如怎么跑起来，项目目录结构是怎样的。怎么投入开发，需要哪些知识储备等。

我们可以在项目目录结构描述中，找到shared模块。

shared: Internal utilities shared across multiple packages (especially environment-agnostic utils used by both runtime and compiler packages).

README.md 和 contributing.md 一般都是英文的。可能会难倒一部分人。其实看不懂，完全可以可以借助划词翻译，整页翻译和百度翻译等翻译工具。再把英文加入后续学习计划。

本文就是讲shared模块，对应的文件路径是：vue-next/packages/shared/src/index.ts

也可以用github1s访问，速度更快，github1s packages/shared/src/index.ts

2.2 按照项目指南 打包构建代码

为了降低文章难度，我按照贡献指南中方法打包把ts转成了js。如果你需要打包，也可以参考下文打包构建。

你需要确保 Node.js 版本是 10+, 而且 yarn 的版本是 1.x Yarn 1.x。

你安装的 Node.js 版本很可能是低于 10。最简单的办法就是去官网重新安装。也可以使用 nvm等管理Node.js版本。

node -v
# v14.16.0
# 全局安装 yarn
# 克隆项目
git clone https://github.com/vuejs/vue-next.git
cd vue-next

# 或者克隆我的项目
git clone https://github.com/lxchuan12/vue-next-analysis.git
cd vue-next-analysis

npm install --global yarn
yarn # install the dependencies of the project
# yarn —ignore-scripts 忽略一些安装，更快速
yarn build

可以得到 vue-next/packages/shared/dist/shared.esm-bundler.js，文件也就是纯js文件。也接下就是解释其中的一些方法。

当然，前面可能比较啰嗦。我可以直接讲 3. 工具函数。但通过我上文的介绍，即使是初学者，都能看懂一些开源项目源码，也许就会有一定的成就感。 另外，面试问到被类似的问题或者笔试题时，你说看Vue3源码学到的，面试官绝对对你刮目相看。

2.3 如何生成 sourcemap 调试 vue-next 源码

熟悉我的读者知道，我是经常强调生成sourcemap调试看源码，所以顺便提一下如何配置生成sourcemap，如何调试。这部分可以简单略过，动手操作时再仔细看。

其实贡献指南里描述了。

Build with Source Maps Use the --sourcemap or -s flag to build with source maps. Note this will make the build much slower.

所以在 vue-next/package.json 追加 "dev:sourcemap": "node scripts/dev.js --sourcemap"，yarn dev:sourcemap执行，即可生成sourcemap，或者直接 build。

// package.json
{
    "version": "3.2.1",
    "scripts": {
        "dev:sourcemap": "node scripts/dev.js --sourcemap"
    }
}

会在控制台输出类似vue-next/packages/vue/src/index.ts → packages/vue/dist/vue.global.js的信息。

其中packages/vue/dist/vue.global.js.map 就是sourcemap文件了。

我们在 Vue3官网找个例子，在 vue-next/examples/index.html。其内容引入packages/vue/dist/vue.global.js。

// vue-next/examples/index.html
<script src="../../packages/vue/dist/vue.global.js"></script>
<script>
    const Counter = {
        data() {
            return {
                counter: 0
            }
        }
    }

    Vue.createApp(Counter).mount('#counter')
</script>

然后我们新建一个终端窗口，yarn serve，在浏览器中打开http://localhost:5000/examples/，如下图所示，按F11等进入函数，就可以愉快的调试源码了。

3. 工具函数

本文主要按照源码 vue-next/packages/shared/src/index.ts 的顺序来写。也省去了一些从外部导入的方法。

我们也可以通过ts文件，查看使用函数的位置。同时在VSCode运行调试JS代码，我们比较推荐韩老师写的code runner插件。

3.1 babelParserDefaultPlugins babel 解析默认插件

/**
 * List of @babel/parser plugins that are used for template expression
 * transforms and SFC script transforms. By default we enable proposals slated
 * for ES2020. This will need to be updated as the spec moves forward.
 * Full list at https://babeljs.io/docs/en/next/babel-parser#plugins
 */
const babelParserDefaultPlugins = [
    'bigInt',
    'optionalChaining',
    'nullishCoalescingOperator'
];

这里就是几个默认插件。感兴趣看英文注释查看。

3.2 EMPTY_OBJ 空对象

const EMPTY_OBJ = (process.env.NODE_ENV !== 'production')
    ? Object.freeze({})
    : {};

// 例子：
// Object.freeze 是 冻结对象
// 冻结的对象最外层无法修改。
const EMPTY_OBJ_1 = Object.freeze({});
EMPTY_OBJ_1.name = '若川';
console.log(EMPTY_OBJ_1.name); // undefined

const EMPTY_OBJ_2 = Object.freeze({ props: { mp: '若川视野' } });
EMPTY_OBJ_2.props.name = '若川';
EMPTY_OBJ_2.props2 = 'props2';
console.log(EMPTY_OBJ_2.props.name); // '若川'
console.log(EMPTY_OBJ_2.props2); // undefined
console.log(EMPTY_OBJ_2);
/**
 * 
 * { 
 *  props: {
     mp: "若川视野",
     name: "若川"
    }
 * }
 * */

process.env.NODE_ENV 是 node 项目中的一个环境变量，一般定义为：development 和production。根据环境写代码。比如开发环境，有报错等信息，生产环境则不需要这些报错警告。

3.3 EMPTY_ARR 空数组

const EMPTY_ARR = (process.env.NODE_ENV !== 'production') ? Object.freeze([]) : [];

// 例子：
EMPTY_ARR.push(1) // 报错，也就是为啥生产环境还是用 []
EMPTY_ARR.length = 3;
console.log(EMPTY_ARR.length); // 0

3.4 NOOP 空函数

const NOOP = () => { };

// 很多库的源码中都有这样的定义函数，比如 jQuery、underscore、lodash 等
// 使用场景：1. 方便判断， 2. 方便压缩
// 1. 比如：
const instance = {
    render: NOOP
};

// 条件
const dev = true;
if(dev){
    instance.render = function(){
        console.log('render');
    }
}

// 可以用作判断。
if(instance.render === NOOP){
 console.log('i');
}
// 2. 再比如：
// 方便压缩代码
// 如果是 function(){} ，不方便压缩代码

3.5 NO 永远返回 false 的函数

/**
 * Always return false.
 */
const NO = () => false;

// 除了压缩代码的好处外。
// 一直返回 false

3.6 isOn 判断字符串是不是 on 开头，并且 on 后首字母不是小写字母

const onRE = /^on[^a-z]/;
const isOn = (key) => onRE.test(key);

// 例子：
isOn('onChange'); // true
isOn('onchange'); // false
isOn('on3change'); // true

onRE 是正则。^符号在开头，则表示是什么开头。而在其他地方是指非。

与之相反的是：$符合在结尾，则表示是以什么结尾。

[^a-z]是指不是a到z的小写字母。

同时推荐一个正则在线工具。

regex101

另外正则看老姚的迷你书就够用了。

老姚：《JavaScript 正则表达式迷你书》问世了！

3.7 isModelListener 监听器

判断字符串是不是以onUpdate:开头

const isModelListener = (key) => key.startsWith('onUpdate:');

// 例子：
isModelListener('onUpdate:change'); // true
isModelListener('1onUpdate:change'); // false
// startsWith 是 ES6 提供的方法

ES6入门教程：字符串的新增方法

很多方法都在《ES6入门教程》中有讲到，就不赘述了。

3.8 extend 继承 合并

说合并可能更准确些。

const extend = Object.assign;

// 例子：
const data = { name: '若川' };
const data2 = extend(data, { mp: '若川视野', name: '是若川啊' });
console.log(data); // { name: "是若川啊", mp: "若川视野" }
console.log(data2); // { name: "是若川啊", mp: "若川视野" }
console.log(data === data2); // true

3.9 remove 移除数组的一项

const remove = (arr, el) => {
    const i = arr.indexOf(el);
    if (i > -1) {
        arr.splice(i, 1);
    }
};

// 例子：
const arr = [1, 2, 3];
remove(arr, 3);
console.log(arr); // [1, 2]

splice 其实是一个很耗性能的方法。删除数组中的一项，其他元素都要移动位置。

引申：axios InterceptorManager 拦截器源码中，拦截器用数组存储的。但实际移除拦截器时，只是把拦截器置为 null 。而不是用splice移除。最后执行时为 null 的不执行，同样效果。axios 拦截器这个场景下，不得不说为性能做到了很好的考虑。

看如下 axios 拦截器代码示例：

// 代码有删减
// 声明
this.handlers = [];

// 移除
if (this.handlers[id]) {
    this.handlers[id] = null;
}

// 执行
if (h !== null) {
    fn(h);
}

3.10 hasOwn 是不是自己本身所拥有的属性

const hasOwnProperty = Object.prototype.hasOwnProperty;
const hasOwn = (val, key) => hasOwnProperty.call(val, key);

// 例子：

// 特别提醒：__proto__ 是浏览器实现的原型写法，后面还会用到
// 现在已经有提供好几个原型相关的API
// Object.getPrototypeOf
// Object.setPrototypeOf
// Object.isPrototypeOf

// .call 则是函数里 this 显示指定以为第一个参数，并执行函数。

hasOwn({__proto__: { a: 1 }}, 'a') // false
hasOwn({ a: undefined }, 'a') // true
hasOwn({}, 'a') // false
hasOwn({}, 'hasOwnProperty') // false
hasOwn({}, 'toString') // false
// 是自己的本身拥有的属性，不是通过原型链向上查找的。

对象API可以看我之前写的一篇文章 JavaScript 对象所有 API 解析，写的还算全面。

3.11 isArray 判断数组

const isArray = Array.isArray;

isArray([]); // true
const fakeArr = { __proto__: Array.prototype, length: 0 };
isArray(fakeArr); // false
fakeArr instanceof Array; // true
// 所以 instanceof 这种情况 不准确

3.12 isMap 判断是不是 Map 对象

const isMap = (val) => toTypeString(val) === '[object Map]';

// 例子：
const map = new Map();
const o = { p: 'Hello World' };

map.set(o, 'content');
map.get(o); // 'content'
isMap(map); // true

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

3.13 isSet 判断是不是 Set 对象

const isSet = (val) => toTypeString(val) === '[object Set]';

// 例子：
const set = new Set();
isSet(set); // true

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构。

3.14 isDate 判断是不是 Date 对象

const isDate = (val) => val instanceof Date;

// 例子：
isDate(new Date()); // true

// `instanceof` 操作符左边是右边的实例。但不是很准，但一般够用了。原理是根据原型链向上查找的。

isDate({__proto__ : new Date()); // true
// 实际上是应该是 Object 才对。
// 所以用 instanceof 判断数组也不准确。
// 再比如
({__proto__: [] }) instanceof Array; // true
// 实际上是对象。
// 所以用 数组本身提供的方法 Array.isArray 是比较准确的。

3.15 isFunction 判断是不是函数

const isFunction = (val) => typeof val === 'function';
// 判断数组有多种方法，但这个是比较常用也相对兼容性好的。

3.16 isString 判断是不是字符串

const isString = (val) => typeof val === 'string';

// 例子：
isString('') // true

3.17 isSymbol 判断是不是 Symbol

const isSymbol = (val) => typeof val === 'symbol';

// 例子：
let s = Symbol();

typeof s;
// "symbol"
// Symbol 是函数，不需要用 new 调用。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。

3.18 isObject 判断是不是对象

const isObject = (val) => val !== null && typeof val === 'object';

// 例子：
isObject(null); // false
isObject({name: '若川'}); // true
// 判断不为 null 的原因是 typeof null 其实 是 object

3.19 isPromise 判断是不是 Promise

const isPromise = (val) => {
    return isObject(val) && isFunction(val.then) && isFunction(val.catch);
};

// 判断是不是Promise对象
const p1 = new Promise(function(resolve, reject){
  resolve('若川');
});
isPromise(p1); // true

// promise 对于初学者来说可能比较难理解。但是重点内容，JS异步编程，要着重掌握。
// 现在 web 开发 Promise 和 async await 等非常常用。

可以根据文末推荐的书籍看Promise相关章节掌握。同时也推荐这本迷你书 JavaScript Promise 迷你书（中文版）。

3.20 objectToString 对象转字符串

const objectToString = Object.prototype.toString;

// 对象转字符串

3.21 toTypeString 对象转字符串

const toTypeString = (value) => objectToString.call(value);

// call 是一个函数，第一个参数是 执行函数里面 this 指向。
// 通过这个能获得 类似  "[object String]" 其中 String 是根据类型变化的

3.22 toRawType 对象转字符串 截取后几位

const toRawType = (value) => {
    // extract "RawType" from strings like "[object RawType]"
    return toTypeString(value).slice(8, -1);
};

// 截取到
toRawType('');  'String'

可以 截取到 String Array 等这些类型

是 JS 判断数据类型非常重要的知识点。

JS 判断类型也有 typeof ，但不是很准确，而且能够识别出的不多。

这些算是基础知识

mdn typeof 文档，文档比较详细，也实现了一个很完善的type函数，本文就不赘述了。

// typeof 返回值目前有以下8种 
'undefined'
'object'
'boolean'
'number'
'bigint'
'string'
'symobl'
'function'

3.23 isPlainObject 判断是不是纯粹的对象

const objectToString = Object.prototype.toString;
const toTypeString = (value) => objectToString.call(value);
// 
const isPlainObject = (val) => toTypeString(val) === '[object Object]';

// 前文中 有 isObject 判断是不是对象了。
// isPlainObject 这个函数在很多源码里都有，比如 jQuery 源码和 lodash 源码等，具体实现不一样
// 上文的 isObject([]) 也是 true ，因为 type [] 为 'object'
// 而 isPlainObject([]) 则是false
const Ctor = function(){
    this.name = '我是构造函数';
}
isPlainObject({}); // true
isPlainObject(new Ctor()); // true

3.24 isIntegerKey 判断是不是数字型的字符串 key 值

const isIntegerKey = (key) => isString(key) &&
    key !== 'NaN' &&
    key[0] !== '-' &&
    '' + parseInt(key, 10) === key;

// 例子:
isIntegerKey('a'); // false
isIntegerKey('0'); // true
isIntegerKey('011'); // false
isIntegerKey('11'); // true
// 其中 parseInt 第二个参数是进制。
// 字符串能用数组取值的形式取值。
//  还有一个 charAt 函数，但不常用 
'abc'.charAt(0) // 'a'
// charAt 与数组形式不同的是 取不到值会返回空字符串''，数组形式取值取不到则是 undefined

3.25 makeMap && isReservedProp

传入一个以逗号分隔的字符串，生成一个 map(键值对)，并且返回一个函数检测 key 值在不在这个 map 中。第二个参数是小写选项。

/**
 * Make a map and return a function for checking if a key
 * is in that map.
 * IMPORTANT: all calls of this function must be prefixed with
 * \/\*#\_\_PURE\_\_\*\/
 * So that rollup can tree-shake them if necessary.
 */
function makeMap(str, expectsLowerCase) {
    const map = Object.create(null);
    const list = str.split(',');
    for (let i = 0; i < list.length; i++) {
        map[list[i]] = true;
    }
    return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];
}
const isReservedProp = /*#__PURE__*/ makeMap(
// the leading comma is intentional so empty string "" is also included
',key,ref,' +
    'onVnodeBeforeMount,onVnodeMounted,' +
    'onVnodeBeforeUpdate,onVnodeUpdated,' +
    'onVnodeBeforeUnmount,onVnodeUnmounted');

// 保留的属性
isReservedProp('key'); // true
isReservedProp('ref'); // true
isReservedProp('onVnodeBeforeMount'); // true
isReservedProp('onVnodeMounted'); // true
isReservedProp('onVnodeBeforeUpdate'); // true
isReservedProp('onVnodeUpdated'); // true
isReservedProp('onVnodeBeforeUnmount'); // true
isReservedProp('onVnodeUnmounted'); // true

3.26 cacheStringFunction 缓存

const cacheStringFunction = (fn) => {
    const cache = Object.create(null);
    return ((str) => {
        const hit = cache[str];
        return hit || (cache[str] = fn(str));
    });
};

这个函数也是和上面 MakeMap 函数类似。只不过接收参数的是函数。《JavaScript 设计模式与开发实践》书中的第四章 JS单例模式也是类似的实现。

var getSingle = function(fn){ // 获取单例
    var result;
    return function(){
        return result || (result = fn.apply(this, arguments));
    }
};

以下是一些正则，系统学习正则推荐老姚：《JavaScript 正则表达式迷你书》问世了！看过的都说好。所以本文不会过多描述正则相关知识点。

// \w 是 0-9a-zA-Z_ 数字 大小写字母和下划线组成
// () 小括号是 分组捕获
const camelizeRE = /-(\w)/g;
/**
 * @private
 */
// 连字符 - 转驼峰  on-click => onClick
const camelize = cacheStringFunction((str) => {
    return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
});
// \B 是指 非 \b 单词边界。
const hyphenateRE = /\B([A-Z])/g;
/**
 * @private
 */

const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, '-$1').toLowerCase());

// 举例：onClick => on-click
const hyphenateResult = hyphenate('onClick');
console.log('hyphenateResult', hyphenateResult); // 'on-click'

/**
 * @private
 */
// 首字母转大写
const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));
/**
 * @private
 */
// click => onClick
const toHandlerKey = cacheStringFunction((str) => (str ? `on${capitalize(str)}` : ``));

const result = toHandlerKey('click');
console.log(result, 'result'); // 'onClick'

3.27 hasChanged 判断是不是有变化

// compare whether a value has changed, accounting for NaN.
const hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
// 例子：
// 认为 NaN 是不变的
hasChanged(NaN, NaN); // false
hasChanged(1, 1); // false
hasChanged(1, 2); // true
hasChanged(+0, -0); // false
// Obect.is 认为 +0 和 -0 不是同一个值
Object.is(+0, -0); // false           
// Object.is 认为  NaN 和 本身 相比 是同一个值
Object.is(NaN, NaN); // true
// 场景
// watch 监测值是不是变化了

// (value === value || oldValue === oldValue)
// 为什么会有这句 因为要判断 NaN 。认为 NaN 是不变的。因为 NaN === NaN 为 false

根据 hasChanged 这个我们继续来看看：Object.is API。

Object.is(value1, value2) (ES6)

该方法用来比较两个值是否严格相等。它与严格比较运算符（===）的行为基本一致。 不同之处只有两个：一是+0不等于-0，而是 NaN 等于自身。

Object.is('若川', '若川'); // true
Object.is({},{}); // false
Object.is(+0, -0); // false
+0 === -0; // true
Object.is(NaN, NaN); // true
NaN === NaN; // false

ES5可以通过以下代码部署Object.is。

Object.defineProperty(Object, 'is', {
    value: function() {x, y} {
        if (x === y) {
           // 针对+0不等于-0的情况
           return x !== 0 || 1 / x === 1 / y;
        }
        // 针对 NaN的情况
        return x !== x && y !== y;
    },
    configurable: true,
    enumerable: false,
    writable: true
});

根据举例可以说明。

3.28 invokeArrayFns 执行数组里的函数

const invokeArrayFns = (fns, arg) => {
    for (let i = 0; i < fns.length; i++) {
        fns[i](arg);
    }
};

// 例子：
const arr = [
    function(val){
        console.log(val + '的博客地址是：https://lxchuan12.gitee.io');
    },
    function(val){
        console.log('百度搜索 若川 可以找到' + val);
    },
    function(val){
        console.log('微信搜索 若川视野 可以找到关注' + val);
    },
]
invokeArrayFns(arr, '我');

为什么这样写，我们一般都是一个函数执行就行。

数组中存放函数，函数其实也算是数据。这种写法方便统一执行多个函数。

3.29 def 定义对象属性

const def = (obj, key, value) => {
    Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: false,
        value
    });
};

Object.defineProperty 算是一个非常重要的API。还有一个定义多个属性的API：Object.defineProperties(obj, props) (ES5)

Object.defineProperty 涉及到比较重要的知识点。
在ES3中，除了一些内置属性（如：Math.PI），对象的所有的属性在任何时候都可以被修改、插入、删除。在ES5中，我们可以设置属性是否可以被改变或是被删除——在这之前，它是内置属性的特权。ES5中引入了属性描述符的概念，我们可以通过它对所定义的属性有更大的控制权。这些属性描述符（特性）包括：

value——当试图获取属性时所返回的值。
writable——该属性是否可写。
enumerable——该属性在for in循环中是否会被枚举。
configurable——该属性是否可被删除。
set()——该属性的更新操作所调用的函数。
get()——获取属性值时所调用的函数。

另外，数据描述符（其中属性为：enumerable，configurable，value，writable）与存取描述符（其中属性为enumerable，configurable，set()，get()）之间是有互斥关系的。在定义了set()和get()之后，描述符会认为存取操作已被 定义了，其中再定义value和writable会引起错误。

以下是ES3风格的属性定义方式：

var person = {};
person.legs = 2;

以下是等价的ES5通过数据描述符定义属性的方式：

var person = {};
Object.defineProperty(person, 'legs', {
    value: 2,
    writable: true,
    configurable: true,
    enumerable: true
});

其中， 除了value的默认值为undefined以外，其他的默认值都为false。这就意味着，如果想要通过这一方式定义一个可写的属性，必须显示将它们设为true。 或者，我们也可以通过ES5的存储描述符来定义：

var person = {};
Object.defineProperty(person, 'legs', {
    set:function(v) {
        return this.value = v;
    },
    get: function(v) {
        return this.value;
    },
    configurable: true,
    enumerable: true
});
person.legs = 2;

这样一来，多了许多可以用来描述属性的代码，如果想要防止别人篡改我们的属性，就必须要用到它们。此外，也不要忘了浏览器向后兼容ES3方面所做的考虑。例如，跟添加Array.prototype属性不一样，我们不能再旧版的浏览器中使用shim这一特性。 另外，我们还可以（通过定义nonmalleable属性），在具体行为中运用这些描述符：

var person = {};
Object.defineProperty(person, 'heads', {value: 1});
person.heads = 0; // 0
person.heads; // 1  (改不了)
delete person.heads; // false
person.heads // 1 (删不掉)

其他本文就不过多赘述了。更多对象 API 可以查看这篇文章 JavaScript 对象所有 API 解析。

3.30 toNumber 转数字

const toNumber = (val) => {
    const n = parseFloat(val);
    return isNaN(n) ? val : n;
};

toNumber('111'); // 111
toNumber('a111'); // 'a111'
parseFloat('a111'); // NaN
isNaN(NaN); // true

其实 isNaN 本意是判断是不是 NaN 值，但是不准确的。 比如：isNaN('a') 为 true。 所以 ES6 有了 Number.isNaN 这个判断方法，为了弥补这一个API。

Number.isNaN('a')  // false
Number.isNaN(NaN); // true

3.31 getGlobalThis 全局对象

let _globalThis;
const getGlobalThis = () => {
    return (_globalThis ||
        (_globalThis =
            typeof globalThis !== 'undefined'
                ? globalThis
                : typeof self !== 'undefined'
                    ? self
                    : typeof window !== 'undefined'
                        ? window
                        : typeof global !== 'undefined'
                            ? global
                            : {}));
};

获取全局 this 指向。

初次执行肯定是 _globalThis 是 undefined。所以会执行后面的赋值语句。

如果存在 globalThis 就用 globalThis。MDN globalThis

如果存在self，就用self。在 Web Worker 中不能访问到 window 对象，但是我们却能通过 self 访问到 Worker 环境中的全局对象。

如果存在window，就用window。

如果存在global，就用global。Node环境下，使用global。

如果都不存在，使用空对象。可能是微信小程序环境下。

下次执行就直接返回 _globalThis，不需要第二次继续判断了。这种写法值得我们学习。

4. 最后推荐一些文章和书籍

先推荐我认为不错的JavaScript API的几篇文章和几本值得读的书。

JavaScript字符串所有API全解密

【深度长文】JavaScript数组所有API全解密

正则表达式前端使用手册

老姚：《JavaScript 正则表达式迷你书》问世了！

JavaScript 对象所有API解析 https://lxchuan12.gitee.io/js-object-api/

MDN JavaScript

《JavaScript高级程序设计》第4版

《JavaScript 权威指南》第7版

《JavaScript面向对象编程2》 面向对象讲的很详细。

阮一峰老师：《ES6 入门教程》

《现代 JavaScript 教程》

《你不知道的JavaScript》上中卷

《JavaScript 设计模式与开发实践》

我也是从小白看不懂书经历过来的。到现在写文章分享。

我看书的方法：多本书同时看，看相同类似的章节，比如函数。看完这本可能没懂，看下一本，几本书看下来基本就懂了，一遍没看懂，再看几遍，可以避免遗忘，巩固相关章节。当然，刚开始看书很难受，看不进。这些书大部分在微信读书都有，如果习惯看纸质书，那可以买来看。

这时可以看些视频和动手练习一些简单的项目。

比如：可以自己注册一个github账号，分章节小节，抄写书中的代码，提交到github，练习了才会更有感觉。

再比如 freeCodeCamp 中文在线学习网站。看书是系统学习非常好的方法。后来我就是看源码较多，写文章分享出来给大家。

5. 总结

文中主要通过学习 shared 模块下的几十个工具函数，比如有：isPromise、makeMap、cacheStringFunction、invokeArrayFns、def、getGlobalThis等等。

同时还分享了vue源码的调试技巧，推荐了一些书籍和看书籍的方法。

欢迎在我的个人网站阅读更多。

不知道你们有没有碰到这样的场景，打开你自己（或者你同事）开发的页面，却短时间难以找到对应的源文件。

这时你可能会想要是能有点击页面按钮自动用编辑器打开对应文件的功能，那该多好啊。

而vue-devtools提供了这样的功能，也许你不知道。我觉得很大一部分人都不知道，因为感觉很多人都不常用vue-devtools。

你也许会问，我不用vue，我用react有没有类似功能啊，有啊，请看 react-dev-inspector。

本文就是根据学习尤大写的 launch-editor 源码，本着知其然，知其所以然的宗旨，探究 vue-devtools「在编辑器中打开组件」功能实现原理。

一句话简述其原理

code path/to/file

一句话简述原理：利用nodejs中的child_process，执行了类似code path/to/file命令，于是对应编辑器就打开了相应的文件，而对应的编辑器则是通过在进程中执行ps x（Window则用Get-Process）命令来查找的，当然也可以自己指定编辑器。

打开编辑器无法打开组件的报错解决方法

而你真正用这个功能时，你可能碰到报错，说不能打开这个文件。

Could not open App.vue in the editor.

To specify an editor, specify the EDITOR env variable or add "editor" field to your Vue project config.

这里说明下写这篇文章时用的是 Windows 电脑，在Ubuntu子系统下使用的终端工具。同时推荐我的文章使用 ohmyzsh 打造 windows、ubuntu、mac 系统高效终端命令行工具，用过的都说好。

解决办法也简单，就是这句英文的意思。具体说明编辑器，在环境变量中说明指定编辑器。在vue项目的根目录下，对应本文则是：vue3-project，添加.env.delelopment文件，其内容是EDITOR=code。

# .env.development
# 当然，我的命令行终端已经有了code这个命令。
EDITOR=code

不用指定编辑器的对应路径（c/Users/lxchu/AppData/Local/Programs/Microsoft VS Code/bin/code），因为会报错。为什么会报错，因为我看了源码且试过。因为会被根据空格截断，变成c/Users/lxchu/AppData/Local/Programs/Microsoft，当然就报错了。

接下来我们从源码角度探究「在编辑器中打开组件」功能的实现原理。

vue-devtools Open component in editor 文档

探究原理之前，先来看看vue-devtools官方文档。

vuejs/vue-devtools 文档

Open component in editor
To enable this feature, follow this guide.

这篇指南中写了在Vue CLI 3中是开箱即用。

Vue CLI 3 supports this feature out-of-the-box when running vue-cli-service serve.

也详细写了如何在Webpack下使用。

# 1. Import the package:
var openInEditor = require('launch-editor-middleware')
# 2. In the devServer option, register the /__open-in-editor HTTP route:
devServer: {
  before (app) {
    app.use('/__open-in-editor', openInEditor())
  }
}
# 3. The editor to launch is guessed. You can also specify the editor app with the editor option. See the supported editors list.
# 用哪个编辑器打开会自动猜测。你也可以具体指明编辑器。这里显示更多的支持编辑器列表
openInEditor('code')
# 4. You can now click on the name of the component in the Component inspector pane (if the devtools knows about its file source, a tooltip will appear).
# 如果`vue-devtools`开发者工具有提示点击的组件的显示具体路径，那么你可以在编辑器打开。

同时也写了如何在Node.js中使用等。

Node.js
You can use the launch-editor package to setup an HTTP route with the /__open-in-editor path. It will receive file as an URL variable.

查看更多可以看这篇指南。

环境准备工作

熟悉我的读者，都知道我都是推荐调试看源码的，正所谓：哪里不会点哪里。而且调试一般都写得很详细，是希望能帮助到一部分人知道如何看源码。于是我特意新建一个仓库 open-in-editor git clone https://github.com/lxchuan12/open-in-editor.git，便于大家克隆学习。

安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

node -V
# v14.16.0
vue -V 
# @vue/cli 4.5.12
vue create vue3-project
# 这里选择的是vue3、vue2也是一样的。
# Please pick a preset: Default (Vue 3 Preview) ([Vue 3] babel, eslint)
npm install
# OR
yarn install

这里同时说明下我的vscode版本。

code -v
1.55.2

前文提到的Vue CLI 3中开箱即用和Webpack使用方法。

vue3-project/package.json中有一个debug按钮。

选择第一项，serve vue-cli-service serve。

我们来搜索下'launch-editor-middleware'这个中间件，一般来说搜索不到node_modules下的文件，需要设置下。当然也有个简单做法。就是「排除的文件」右侧旁边有个设置图标「使用“排查设置”与“忽略文件”」，点击下。

其他的就不赘述了。可以看这篇知乎回答：vscode怎么设置可以搜索包含node_modules中的文件？

这时就搜到了vue3-project/node_modules/@vue/cli-service/lib/commands/serve.js中有使用这个中间件。

vue-devtools 开箱即用具体源码实现

接着我们来看Vue CLI 3中开箱即用具体源码实现。

// vue3-project/node_modules/@vue/cli-service/lib/commands/serve.js
// 46行
const launchEditorMiddleware = require('launch-editor-middleware')
// 192行
before (app, server) {
    // launch editor support.
    // this works with vue-devtools & @vue/cli-overlay
    app.use('/__open-in-editor', launchEditorMiddleware(() => console.log(
        `To specify an editor, specify the EDITOR env variable or ` +
        `add "editor" field to your Vue project config.\n`
    )))
    // 省略若干代码...
}

点击vue-devtools中的时，会有一个请求，http://localhost:8080/__open-in-editor?file=src/App.vue，不出意外就会打开该组件啦。

接着我们在launchEditorMiddleware的具体实现。

launch-editor-middleware

看源码时，先看调试截图。

在launch-editor-middleware中间件中作用在于最终是调用 launch-editor 打开文件。

// vue3-project/node_modules/launch-editor-middleware/index.js
const url = require('url')
const path = require('path')
const launch = require('launch-editor')

module.exports = (specifiedEditor, srcRoot, onErrorCallback) => {
  // specifiedEditor => 这里传递过来的则是 () => console.log() 函数
  // 所以和 onErrorCallback 切换下，把它赋值给错误回调函数
  if (typeof specifiedEditor === 'function') {
    onErrorCallback = specifiedEditor
    specifiedEditor = undefined
  }

  // 如果第二个参数是函数，同样把它赋值给错误回调函数
  // 这里传递过来的是undefined
  if (typeof srcRoot === 'function') {
    onErrorCallback = srcRoot
    srcRoot = undefined
  }

  // srcRoot 是传递过来的参数，或者当前node进程的目录
  srcRoot = srcRoot || process.cwd()

  // 最后返回一个函数， express 中间件
  return function launchEditorMiddleware (req, res, next) {
    // 省略 ...
  }
}

上一段中，这种切换参数的写法，在很多源码中都很常见。为的是方便用户调用时传参。虽然是多个参数，但可以传一个或者两个。

可以根据情况打上断点。比如这里我会在launch(path.resolve(srcRoot, file), specifiedEditor, onErrorCallback)打断点。

// vue3-project/node_modules/launch-editor-middleware/index.js
module.exports = (specifiedEditor, srcRoot, onErrorCallback) => {
  // 省略上半部分
  return function launchEditorMiddleware (req, res, next) {
    // 根据请求解析出file路径
    const { file } = url.parse(req.url, true).query || {}
    // 如果没有文件路径，则报错
    if (!file) {
      res.statusCode = 500
      res.end(`launch-editor-middleware: required query param "file" is missing.`)
    } else {
      // 否则拼接路径，用launch打开。
      launch(path.resolve(srcRoot, file), specifiedEditor, onErrorCallback)
      res.end()
    }
  }
}

launch-editor

跟着断点来看，走到了launchEditor函数。

// vue3-project/node_modules/launch-editor/index.js
function launchEditor (file, specifiedEditor, onErrorCallback) {
  // 解析出文件路径和行号列号等信息
  const parsed = parseFile(file)
  let { fileName } = parsed
  const { lineNumber, columnNumber } = parsed

  // 判断文件是否存在，不存在，直接返回。
  if (!fs.existsSync(fileName)) {
    return
  }
  // 所以和 onErrorCallback 切换下，把它赋值给错误回调函数
  if (typeof specifiedEditor === 'function') {
    onErrorCallback = specifiedEditor
    specifiedEditor = undefined
  }
  // 包裹一层函数
  onErrorCallback = wrapErrorCallback(onErrorCallback)

  // 猜测当前进程运行的是哪个编辑器
  const [editor, ...args] = guessEditor(specifiedEditor)
  if (!editor) {
    onErrorCallback(fileName, null)
    return
  }
  // 省略剩余部分，后文再讲述...
}

wrapErrorCallback 包裹错误函数回调

onErrorCallback = wrapErrorCallback(onErrorCallback)

这段的代码，我相信读者朋友能看懂，我单独拿出来讲述，主要是因为这种包裹函数的形式在很多源码里都很常见。 这里也就是文章开头终端错误图Could not open App.vue in the editor.输出的代码位置。

// vue3-project/node_modules/launch-editor/index.js
function wrapErrorCallback (cb) {
  return (fileName, errorMessage) => {
    console.log()
    console.log(
      chalk.red('Could not open ' + path.basename(fileName) + ' in the editor.')
    )
    if (errorMessage) {
      if (errorMessage[errorMessage.length - 1] !== '.') {
        errorMessage += '.'
      }
      console.log(
        chalk.red('The editor process exited with an error: ' + errorMessage)
      )
    }
    console.log()
    if (cb) cb(fileName, errorMessage)
  }
}

guessEditor 猜测当前正在使用的编辑器

这个函数主要做了如下四件事情：

1. 如果具体指明了编辑器，则解析下返回。
   
2. 找出当前进程中哪一个编辑器正在运行。macOS 和 Linux 用 ps x 命令
   windows 则用 Get-Process 命令
   
3. 如果都没找到就用 process.env.VISUAL或者process.env.EDITOR。这就是为啥开头错误提示可以使用环境变量指定编辑器的原因。
   
4. 最后还是没有找到就返回[null]，则会报错。

const [editor, ...args] = guessEditor(specifiedEditor)
if (!editor) {
    onErrorCallback(fileName, null)
    return
}

// vue3-project/node_modules/launch-editor/guess.js
const shellQuote = require('shell-quote')

module.exports = function guessEditor (specifiedEditor) {
  // 如果指定了编辑器，则解析一下，这里没有传入。如果自己指定了路径。
  // 比如 c/Users/lxchu/AppData/Local/Programs/Microsoft VS Code/bin/code 
  //   会根据空格切割成 c/Users/lxchu/AppData/Local/Programs/Microsoft
  if (specifiedEditor) {
    return shellQuote.parse(specifiedEditor)
  }
  // We can find out which editor is currently running by:
  // `ps x` on macOS and Linux
  // `Get-Process` on Windows
  try {
    //  省略...
  } catch (error) {
    // Ignore...
  }

  // Last resort, use old skool env vars
  if (process.env.VISUAL) {
    return [process.env.VISUAL]
  } else if (process.env.EDITOR) {
    return [process.env.EDITOR]
  }

  return [null]
}

看完了 guessEditor 函数，我们接着来看 launch-editor 剩余部分。

launch-editor 剩余部分

以下这段代码不用细看，调试的时候细看就行。

// vue3-project/node_modules/launch-editor/index.js
function launchEditor(){
  //  省略上部分...
  if (
    process.platform === 'linux' &&
    fileName.startsWith('/mnt/') &&
    /Microsoft/i.test(os.release())
  ) {
    // Assume WSL / "Bash on Ubuntu on Windows" is being used, and
    // that the file exists on the Windows file system.
    // `os.release()` is "4.4.0-43-Microsoft" in the current release
    // build of WSL, see: https://github.com/Microsoft/BashOnWindows/issues/423#issuecomment-221627364
    // When a Windows editor is specified, interop functionality can
    // handle the path translation, but only if a relative path is used.
    fileName = path.relative('', fileName)
  }

  if (lineNumber) {
    const extraArgs = getArgumentsForPosition(editor, fileName, lineNumber, columnNumber)
    args.push.apply(args, extraArgs)
  } else {
    args.push(fileName)
  }

  if (_childProcess && isTerminalEditor(editor)) {
    // There's an existing editor process already and it's attached
    // to the terminal, so go kill it. Otherwise two separate editor
    // instances attach to the stdin/stdout which gets confusing.
    _childProcess.kill('SIGKILL')
  }

  if (process.platform === 'win32') {
    // On Windows, launch the editor in a shell because spawn can only
    // launch .exe files.
    _childProcess = childProcess.spawn(
      'cmd.exe',
      ['/C', editor].concat(args),
      { stdio: 'inherit' }
    )
  } else {
    _childProcess = childProcess.spawn(editor, args, { stdio: 'inherit' })
  }
  _childProcess.on('exit', function (errorCode) {
    _childProcess = null

    if (errorCode) {
      onErrorCallback(fileName, '(code ' + errorCode + ')')
    }
  })

  _childProcess.on('error', function (error) {
    onErrorCallback(fileName, error.message)
  })
}

这一大段中，主要的就是以下代码，用子进程模块。简单来说子进程模块有着执行命令的能力。

const childProcess = require('child_process')

if (process.platform === 'win32') {
    // On Windows, launch the editor in a shell because spawn can only
    // launch .exe files.
    _childProcess = childProcess.spawn(
        'cmd.exe',
        ['/C', editor].concat(args),
        { stdio: 'inherit' }
    )
    } else {
    _childProcess = childProcess.spawn(editor, args, { stdio: 'inherit' })
}

行文至此，就基本接近尾声了。

总结

这里总结一下：首先文章开头通过提出「短时间找不到页面对应源文件的场景」，并针对容易碰到的报错情况给出了解决方案。 其次，配置了环境跟着调试学习了vue-devtools中使用的尤大写的 yyx990803/launch-editor。

一句话简述其原理

我们回顾下开头的原理内容。

code path/to/file

一句话简述原理：利用nodejs中的child_process，执行了类似code path/to/file命令，于是对应编辑器就打开了相应的文件，而对应的编辑器则是通过在进程中执行ps x（Window则用Get-Process）命令来查找的，当然也可以自己指定编辑器。

最后还能做什么呢？

可以再看看 umijs/launch-editor 和 react-dev-utils/launchEditor.js，它们的代码几乎类似。

也可以利用Node.js做一些提高开发效率等工作，同时可以学习child_process等模块。

欢迎阅读我的更多文章。

用过React的同学都知道，经常会使用bind来绑定this。

import React, { Component } from 'react';
class TodoItem extends Component{
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        console.log('handleClick');
    }
    render(){
        return  (
            <div onClick={this.handleClick}>点击</div>
        );
    };
}
export default TodoItem;

那么面试官可能会问是否想过bind到底做了什么，怎么模拟实现呢？

附上之前写文章写过的一段话：已经有很多模拟实现bind的文章，为什么自己还要写一遍呢。学习就好比是座大山，人们沿着不同的路登山，分享着自己看到的风景。你不一定能看到别人看到的风景，体会到别人的心情。只有自己去登山，才能看到不一样的风景，体会才更加深刻。

先看一下bind是什么。从上面的React代码中，可以看出bind执行后是函数，并且每个函数都可以执行调用它。 眼见为实，耳听为虚。读者可以在控制台一步步点开例子1中的obj:

var obj = {};
console.log(obj);
console.log(typeof Function.prototype.bind); // function
console.log(typeof Function.prototype.bind());  // function
console.log(Function.prototype.bind.name);  // bind
console.log(Function.prototype.bind().name);  // bound

因此可以得出结论1：

1、bind是Functoin原型链中Function.prototype的一个属性，每个函数都可以调用它。
2、bind本身是一个函数名为bind的函数，返回值也是函数，函数名是bound。（打出来就是bound加上一个空格）。 知道了bind是函数，就可以传参，而且返回值'bound '也是函数，也可以传参，就很容易写出例子2：
后文统一 bound 指原函数original bind之后返回的函数，便于说明。

var obj = {
    name: '若川',
};
function original(a, b){
    console.log(this.name);
    console.log([a, b]);
    return false;
}
var bound = original.bind(obj, 1);
var boundResult = bound(2); // '若川', [1, 2]
console.log(boundResult); // false
console.log(original.bind.name); // 'bind'
console.log(original.bind.length); // 1
console.log(original.bind().length); // 2 返回original函数的形参个数
console.log(bound.name); // 'bound original'
console.log((function(){}).bind().name); // 'bound '
console.log((function(){}).bind().length); // 0

由此可以得出结论2：

1、调用bind的函数中的this指向bind()函数的第一个参数。

2、传给bind()的其他参数接收处理了，bind()之后返回的函数的参数也接收处理了，也就是说合并处理了。

3、并且bind()后的name为bound + 空格 + 调用bind的函数名。如果是匿名函数则是bound + 空格。

4、bind后的返回值函数，执行后返回值是原函数（original）的返回值。

5、bind函数形参（即函数的length）是1。bind后返回的bound函数形参不定，根据绑定的函数原函数（original）形参个数确定。

根据结论2：我们就可以简单模拟实现一个简版bindFn

// 第一版 修改this指向，合并参数
Function.prototype.bindFn = function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + 'must be a function');
    }
    // 存储函数本身
    var self = this;
    // 去除thisArg的其他参数 转成数组
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        // bind返回的函数 的参数转成数组
        var boundArgs = [].slice.call(arguments);
        // apply修改this指向，把两个函数的参数合并传给self函数，并执行self函数，返回执行结果
        return self.apply(thisArg, args.concat(boundArgs));
    }
    return bound;
}
// 测试
var obj = {
    name: '若川',
};
function original(a, b){
    console.log(this.name);
    console.log([a, b]);
}
var bound = original.bindFn(obj, 1);
bound(2); // '若川', [1, 2]

如果面试官看到你答到这里，估计对你的印象60、70分应该是会有的。 但我们知道函数是可以用new来实例化的。那么bind()返回值函数会是什么表现呢。

接下来看例子3：

var obj = {
    name: '若川',
};
function original(a, b){
    console.log('this', this); // original {}
    console.log('typeof this', typeof this); // object
    this.name = b;
    console.log('name', this.name); // 2
    console.log('this', this);  // original {name: 2}
    console.log([a, b]); // 1, 2
}
var bound = original.bind(obj, 1);
var newBoundResult = new bound(2);
console.log(newBoundResult, 'newBoundResult'); // original {name: 2}

从例子3种可以看出this指向了new bound()生成的新对象。

可以分析得出结论3：

1、bind原先指向obj的失效了，其他参数有效。

2、new bound的返回值是以original原函数构造器生成的新对象。original原函数的this指向的就是这个新对象。 另外前不久写过一篇文章：面试官问：能否模拟实现JS的new操作符 (opens new window)。简单摘要： new做了什么：

• 创建了一个全新的对象。
• 这个对象会被执行[[Prototype]]（也就是__proto__）链接。
• 生成的新对象会绑定到函数调用的this。
• 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
• 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。

所以相当于new调用时，bind的返回值函数bound内部要模拟实现new实现的操作。 话不多说，直接上代码。

// 第三版 实现new调用
Function.prototype.bindFn = function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + ' must be a function');
    }
    // 存储调用bind的函数本身
    var self = this;
    // 去除thisArg的其他参数 转成数组
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        // bind返回的函数 的参数转成数组
        var boundArgs = [].slice.call(arguments);
        var finalArgs = args.concat(boundArgs);
        // new 调用时，其实this instanceof bound判断也不是很准确。es6 new.target就是解决这一问题的。
        if(this instanceof bound){
            // 这里是实现上文描述的 new 的第 1, 2, 4 步
            // 1.创建一个全新的对象
            // 2.并且执行[[Prototype]]链接
            // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。
            // self可能是ES6的箭头函数，没有prototype，所以就没必要再指向做prototype操作。
            if(self.prototype){
                // ES5 提供的方案 Object.create()
                // bound.prototype = Object.create(self.prototype);
                // 但 既然是模拟ES5的bind，那浏览器也基本没有实现Object.create()
                // 所以采用 MDN ployfill方案 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
                function Empty(){}
                Empty.prototype = self.prototype;
                bound.prototype = new Empty();
            }
            // 这里是实现上文描述的 new 的第 3 步
            // 3.生成的新对象会绑定到函数调用的`this`。
            var result = self.apply(this, finalArgs);
            // 这里是实现上文描述的 new 的第 5 步
            // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`)，
            // 那么`new`表达式中的函数调用会自动返回这个新的对象。
            var isObject = typeof result === 'object' && result !== null;
            var isFunction = typeof result === 'function';
            if(isObject || isFunction){
                return result;
            }
            return this;
        }
        else{
            // apply修改this指向，把两个函数的参数合并传给self函数，并执行self函数，返回执行结果
            return self.apply(thisArg, finalArgs);
        }
    };
    return bound;
}

面试官看到这样的实现代码，基本就是满分了，心里独白：这小伙子/小姑娘不错啊。不过可能还会问this instanceof bound不准确问题。 上文注释中提到this instanceof bound也不是很准确，ES6 new.target很好的解决这一问题，我们举个例子4：

instanceof 不准确，ES6 new.target很好地解决这一问题

function Student(name){
    if(this instanceof Student){
        this.name = name;
        console.log('name', name);
    }
    else{
        throw new Error('必须通过new关键字来调用Student。');
    }
}
var student = new Student('若');
var notAStudent = Student.call(student, '川'); // 不抛出错误，且执行了。
console.log(student, 'student', notAStudent, 'notAStudent');

function Student2(name){
    if(typeof new.target !== 'undefined'){
        this.name = name;
        console.log('name', name);
    }
    else{
        throw new Error('必须通过new关键字来调用Student2。');
    }
}
var student2 = new Student2('若');
var notAStudent2 = Student2.call(student2, '川');
console.log(student2, 'student2', notAStudent2, 'notAStudent2'); // 抛出错误

细心的同学可能会发现了这版本的代码没有实现bind后的bound函数的nameMDN Function.name (opens new window)和lengthMDN Function.length (opens new window)。面试官可能也发现了这一点继续追问，如何实现，或者问是否看过es5-shim的源码实现L201-L335 (opens new window)。如果不限ES版本。其实可以用ES5的Object.defineProperties来实现。

Object.defineProperties(bound, {
    'length': {
        value: self.length,
    },
    'name': {
        value: 'bound ' + self.name,
    }
});

es5-shim的源码实现bind

直接附上源码（有删减注释和部分修改等）

var $Array = Array;
var ArrayPrototype = $Array.prototype;
var $Object = Object;
var array_push = ArrayPrototype.push;
var array_slice = ArrayPrototype.slice;
var array_join = ArrayPrototype.join;
var array_concat = ArrayPrototype.concat;
var $Function = Function;
var FunctionPrototype = $Function.prototype;
var apply = FunctionPrototype.apply;
var max = Math.max;
// 简版 源码更复杂些。
var isCallable = function isCallable(value){
    if(typeof value !== 'function'){
        return false;
    }
    return true;
};
var Empty = function Empty() {};
// 源码是 defineProperties
// 源码是bind笔者改成bindFn便于测试
FunctionPrototype.bindFn = function bind(that) {
    var target = this;
    if (!isCallable(target)) {
        throw new TypeError('Function.prototype.bind called on incompatible ' + target);
    }
    var args = array_slice.call(arguments, 1);
    var bound;
    var binder = function () {
        if (this instanceof bound) {
            var result = apply.call(
                target,
                this,
                array_concat.call(args, array_slice.call(arguments))
            );
            if ($Object(result) === result) {
                return result;
            }
            return this;
        } else {
            return apply.call(
                target,
                that,
                array_concat.call(args, array_slice.call(arguments))
            );
        }
    };
    var boundLength = max(0, target.length - args.length);
    var boundArgs = [];
    for (var i = 0; i < boundLength; i++) {
        array_push.call(boundArgs, '$' + i);
    }
    // 这里是Function构造方式生成形参length $1, $2, $3...
    bound = $Function('binder', 'return function (' + array_join.call(boundArgs, ',') + '){ return binder.apply(this, arguments); }')(binder);

    if (target.prototype) {
        Empty.prototype = target.prototype;
        bound.prototype = new Empty();
        Empty.prototype = null;
    }
    return bound;
};

你说出es5-shim源码bind实现，感慨这代码真是高效、严谨。面试官心里独白可能是：你就是我要找的人，薪酬福利你可以和HR去谈下。

总结

1、bind是Function原型链中的Function.prototype的一个属性，它是一个函数，修改this指向，合并参数传递给原函数，返回值是一个新的函数。
2、bind返回的函数可以通过new调用，这时提供的this的参数被忽略，指向了new生成的全新对象。内部模拟实现了new操作符。
3、es5-shim源码模拟实现bind时用Function实现了length。
事实上，平时其实很少需要使用自己实现的投入到生成环境中。但面试官通过这个面试题能考察很多知识。比如this指向，原型链，闭包，函数等知识，可以扩展很多。
读者发现有不妥或可改善之处，欢迎指出。另外觉得写得不错，可以点个赞，也是对笔者的一种支持。

文章中的例子和测试代码放在github中bind模拟实现 github (opens new window)。bind模拟实现 预览地址 (opens new window)F12看控制台输出，结合source面板查看效果更佳。

// 最终版 删除注释 详细注释版请看上文
Function.prototype.bind = Function.prototype.bind || function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + ' must be a function');
    }
    var self = this;
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        var boundArgs = [].slice.call(arguments);
        var finalArgs = args.concat(boundArgs);
        if(this instanceof bound){
            if(self.prototype){
                function Empty(){}
                Empty.prototype = self.prototype;
                bound.prototype = new Empty();
            }
            var result = self.apply(this, finalArgs);
            var isObject = typeof result === 'object' && result !== null;
            var isFunction = typeof result === 'function';
            if(isObject || isFunction){
                return result;
            }
            return this;
        }
        else{
            return self.apply(thisArg, finalArgs);
        }
    };
    return bound;
}

参考

• OshotOkill翻译的 深入理解ES6 简体中文版 - 第三章 函数 (opens new window)（虽然笔者是看的纸质书籍，但推荐下这本在线的书）
• MDN Function.prototype.bind(opens new window)
• 冴羽: JavaScript深入之bind的模拟实现(opens new window)
• 《React状态管理与同构实战》侯策：从一道面试题，到“我可能看了假源码”

虽然看过挺多underscore.js分析类的文章，但总感觉少点什么。这也许就是纸上得来终觉浅，绝知此事要躬行吧。于是决定自己写一篇学习underscore.js整体架构的文章。

本文章学习的版本是v1.9.1。 unpkg.com underscore 源码地址(opens new window)。

虽然很多人都没用过underscore.js，但看下官方文档都应该知道如何使用。

从一个官方文档_.chain简单例子看起：

_.chain([1, 2, 3]).reverse().value();
// => [3, 2, 1]

看例子中可以看出，这是支持链式调用。

读者也可以顺着文章思路，自行打开下载源码进行调试，这样印象更加深刻。

2 链式调用

_.chain 函数源码：

_.chain = function(obj) {
	var instance = _(obj);
	instance._chain = true;
	return instance;
};

这个函数比较简单，就是传递obj调用_()。但返回值变量竟然是instance实例对象。添加属性_chain赋值为true，并返回intance对象。但再看例子，实例对象竟然可以调用reverse方法，再调用value方法。猜测支持OOP（面向对象）调用。

带着问题，笔者看了下定义 _ 函数对象的代码。

3 _ 函数对象 支持OOP

var _ = function(obj) {
	if (obj instanceof _) return obj;
	if (!(this instanceof _)) return new _(obj);
	this._wrapped = obj;
};

如果参数obj已经是_的实例了，则返回obj。 如果this不是_的实例，则手动 new _(obj); 再次new调用时，把obj对象赋值给_wrapped这个属性。 也就是说最后得到的实例对象是这样的结构 { _wrapped: '参数obj', } 它的原型_(obj).__proto__ 是 _.prototype;

如果对这块不熟悉的读者，可以看下以下这张图(之前写面试官问：JS的继承 (opens new window)画的图)。

继续分析官方的_.chain例子。这个例子拆开，写成三步。

var part1 = _.chain([1, 2, 3]);
var part2 = part1.reverse();
var part3 = part2.value();

// 没有后续part1.reverse()操作的情况下
console.log(part1); // {__wrapped: [1, 2, 3], _chain: true}

console.log(part2); // {__wrapped: [3, 2, 1], _chain: true}

console.log(part3); // [3, 2, 1]

思考问题：reverse本是Array.prototype上的方法呀。为啥支持链式调用呢。 搜索reverse，可以看到如下这段代码：

并将例子代入这段代码可得（怎么有种高中做数学题的既视感^_^）：

_.chain([1,2,3]).reverse().value()s

var ArrayProto = Array.prototype;
// 遍历 数组 Array.prototype 的这些方法，赋值到 _.prototype 上
_.each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
	// 这里的`method`是 reverse 函数
	var method = ArrayProto[name];
	_.prototype[name] = function() {
	// 这里的obj 就是数组 [1, 2, 3]
	var obj = this._wrapped;
	// arguments  是参数集合，指定reverse 的this指向为obj，参数为arguments， 并执行这个函数函数。执行后 obj 则是 [3, 2, 1]
	method.apply(obj, arguments);
	if ((name === 'shift' || name === 'splice') && obj.length === 0) delete obj[0];
	// 重点在于这里 chainResult 函数。
	return chainResult(this, obj);
	};
});

// Helper function to continue chaining intermediate results.
var chainResult = function(instance, obj) {
	// 如果实例中有_chain 为 true 这个属性，则返回实例 支持链式调用的实例对象  { _chain: true, this._wrapped: [3, 2, 1] }，否则直接返回这个对象[3, 2, 1]。
	return instance._chain ? _(obj).chain() : obj;
};

if ((name === 'shift' || name === 'splice') && obj.length === 0) delete obj[0]; 提一下上面源码中的这一句，看到这句是百思不得其解。于是赶紧在github中搜索这句加上""双引号。表示全部搜索。

搜索到两个在官方库中的ISSUE，大概意思就是兼容IE低版本的写法。有兴趣的可以点击去看看。

I don't understand the meaning of this sentence.(opens new window)

why delete obj[0](opens new window)

4 基于流的编程

至此就算是分析完了链式调用_.chain()和_ 函数对象。这种把数据存储在实例对象{_wrapped: '', _chain: true} 中，_chain判断是否支持链式调用，来传递给下一个函数处理。这种做法叫做 基于流的编程。

最后数据处理完，要返回这个数据怎么办呢。underscore提供了一个value的方法。

_.prototype.value = function(){
	return this._wrapped;
}

顺便提供了几个别名。toJSON、valueOf。 _.prototype.valueOf = _.prototype.toJSON = _.prototype.value;

还提供了 toString的方法。

_.prototype.toString = function() {
	return String(this._wrapped);
};

这里的String() 和new String() 效果是一样的。 可以猜测内部实现和 _函数对象类似。

var String = function(){
	if(!(this instanceOf String)) return new String(obj);
}

var chainResult = function(instance, obj) {
	return instance._chain ? _(obj).chain() : obj;
};

细心的读者会发现chainResult函数中的_(obj).chain()，是怎么实现实现链式调用的呢。

而_(obj)是返回的实例对象{_wrapped: obj}呀。怎么会有chain()方法，肯定有地方挂载了这个方法到_.prototype上或者其他操作，这就是_.mixin()。

5 _.mixin 挂载所有的静态方法到 _.prototype， 也可以挂载自定义的方法

_.mixin 混入。但侵入性太强，经常容易出现覆盖之类的问题。记得之前React有mixin功能，Vue也有mixin功能。但版本迭代更新后基本都是慢慢的都不推荐或者不支持mixin。

_.mixin = function(obj) {
	// 遍历对象上的所有方法
	_.each(_.functions(obj), function(name) {
		// 比如 chain, obj['chain'] 函数，自定义的，则赋值到_[name] 上，func 就是该函数。也就是说自定义的方法，不仅_函数对象上有，而且`_.prototype`上也有
	var func = _[name] = obj[name];
	_.prototype[name] = function() {
		// 处理的数据对象
		var args = [this._wrapped];
		// 处理的数据对象 和 arguments 结合
		push.apply(args, arguments);
		// 链式调用  chain.apply(_, args) 参数又被加上了 _chain属性，支持链式调用。
		// _.chain = function(obj) {
		//	var instance = _(obj);
		//	instance._chain = true;
		//	return instance;
		};
		return chainResult(this, func.apply(_, args));
	};
	});
	// 最终返回 _ 函数对象。
	return _;
};

_.mixin(_);

_mixin(_) 把静态方法挂载到了_.prototype上，也就是_.prototype.chain方法 也就是 _.chain方法。

所以_.chain(obj)和_(obj).chain()效果一样，都能实现链式调用。

关于上述的链式调用，笔者画了一张图，所谓一图胜千言。

5.1 _.mixin 挂载自定义方法

挂载自定义方法： 举个例子：

_.mixin({
	log: function(){
		console.log('哎呀，我被调用了');
	}
})
_.log() // 哎呀，我被调用了
_().log() // 哎呀，我被调用了

5.2 _.functions(obj)

_.functions = _.methods = function(obj) {
	var names = [];
	for (var key in obj) {
	if (_.isFunction(obj[key])) names.push(key);
	}
	return names.sort();
};

_.functions 和 _.methods 两个方法，遍历对象上的方法，放入一个数组，并且排序。返回排序后的数组。

5.3 underscore.js 究竟在_和_.prototype挂载了多少方法和属性

再来看下underscore.js究竟挂载在_函数对象上有多少静态方法和属性，和挂载_.prototype上有多少方法和属性。

使用for in循环一试便知。看如下代码：

var staticMethods = [];
var staticProperty = [];
for(var name in _){
	if(typeof _[name] === 'function'){
		staticMethods.push(name);
	}
	else{
		staticProperty.push(name);
	}
}
console.log(staticProperty); // ["VERSION", "templateSettings"] 两个
console.log(staticMethods); // ["after", "all", "allKeys", "any", "assign", ...] 138个

var prototypeMethods = [];
var prototypeProperty = [];
for(var name in _.prototype){
	if(typeof _.prototype[name] === 'function'){
		prototypeMethods.push(name);
	}
	else{
		prototypeProperty.push(name);
	}
}
console.log(prototypeProperty); // []
console.log(prototypeMethods); // ["after", "all", "allKeys", "any", "assign", ...] 152个

根据这些，笔者又画了一张图underscore.js 原型关系图，毕竟一图胜千言。

6 整体架构概览

6.1 匿名函数自执行

(function(){

}());

这样保证不污染外界环境，同时隔离外界环境，不是外界影响内部环境。

外界访问不到里面的变量和函数，里面可以访问到外界的变量，但里面定义了自己的变量，则不会访问外界的变量。 匿名函数将代码包裹在里面，防止与其他代码冲突和污染全局环境。 关于自执行函数不是很了解的读者可以参看这篇文章。 [译] JavaScript：立即执行函数表达式（IIFE）(opens new window)

6.2 root 处理

var root = typeof self == 'object' && self.self === self && self ||
	typeof global == 'object' && global.global === global && global ||
	this ||
	{};

支持浏览器环境、node、Web Worker、node vm、微信小程序。

6.3 导出

if (typeof exports != 'undefined' && !exports.nodeType) {
	if (typeof module != 'undefined' && !module.nodeType && module.exports) {
	exports = module.exports = _;
	}
	exports._ = _;
} else {
	root._ = _;
}

关于root处理和导出的这两段代码的解释，推荐看这篇文章冴羽：underscore 系列之如何写自己的 underscore (opens new window)，讲得真的太好了。笔者在此就不赘述了。 总之，underscore.js作者对这些处理也不是一蹴而就的，也是慢慢积累，和其他人提ISSUE之后不断改进的。

6.4 支持 amd 模块化规范

if (typeof define == 'function' && define.amd) {
	define('underscore', [], function() {
		return _;
	});
}

6.5 _.noConflict 防冲突函数

源码：

// 暂存在 root 上， 执行noConflict时再赋值回来
var previousUnderscore = root._;
_.noConflict = function() {
	root._ = previousUnderscore;
	return this;
};

使用：

<script>
var _ = '我就是我，不一样的烟火，其他可不要覆盖我呀';
</script>
<script src="https://unpkg.com/underscore@1.9.1/underscore.js">
</script>
<script>
var underscore = _.noConflict();
console.log(_); // '我就是我，不一样的烟火，其他可不要覆盖我呀'
underscore.isArray([]) // true
</script>

7 总结

全文根据官网提供的链式调用的例子， _.chain([1, 2, 3]).reverse().value();较为深入的调试和追踪代码，分析链式调用（_.chain() 和 _(obj).chain()）、OOP、基于流式编程、和_.mixin(_)在_.prototype挂载方法，最后整体架构分析。学习underscore.js整体架构，利于打造属于自己的函数式编程类库。

文章分析的源码整体结构。

(function() {
	var root = typeof self == 'object' && self.self === self && self ||
		typeof global == 'object' && global.global === global && global ||
		this ||
		{};
	var previousUnderscore = root._;

	var _ = function(obj) {
	  if (obj instanceof _) return obj;
	  if (!(this instanceof _)) return new _(obj);
	  this._wrapped = obj;
	};

	if (typeof exports != 'undefined' && !exports.nodeType) {
	  if (typeof module != 'undefined' && !module.nodeType && module.exports) {
		exports = module.exports = _;
	  }
	  exports._ = _;
	} else {
	  root._ = _;
	}
	_.VERSION = '1.9.1';

	_.chain = function(obj) {
	  var instance = _(obj);
	  instance._chain = true;
	  return instance;
	};

	var chainResult = function(instance, obj) {
	  return instance._chain ? _(obj).chain() : obj;
	};

	_.mixin = function(obj) {
	  _.each(_.functions(obj), function(name) {
		var func = _[name] = obj[name];
		_.prototype[name] = function() {
		  var args = [this._wrapped];
		  push.apply(args, arguments);
		  return chainResult(this, func.apply(_, args));
		};
	  });
	  return _;
	};

	_.mixin(_);

	_.each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
	  var method = ArrayProto[name];
	  _.prototype[name] = function() {
		var obj = this._wrapped;
		method.apply(obj, arguments);
		if ((name === 'shift' || name === 'splice') && obj.length === 0) delete obj[0];
		return chainResult(this, obj);
	  };
	});

	_.each(['concat', 'join', 'slice'], function(name) {
	  var method = ArrayProto[name];
	  _.prototype[name] = function() {
		return chainResult(this, method.apply(this._wrapped, arguments));
	  };
	});

	_.prototype.value = function() {
	  return this._wrapped;
	};

	_.prototype.valueOf = _.prototype.toJSON = _.prototype.value;

	_.prototype.toString = function() {
	  return String(this._wrapped);
	};

	if (typeof define == 'function' && define.amd) {
	  define('underscore', [], function() {
		return _;
	  });
	}
}());

下一篇文章可能是学习lodash的源码整体架构。

读者发现有不妥或可改善之处，欢迎评论指出。如果觉得写得不错，可以评论、转发，也是对笔者的一种支持。

8 推荐阅读

underscorejs.org 官网(opens new window)
undersercore-analysis(opens new window)
underscore 系列之如何写自己的 underscore(opens new window)

欢迎阅读我的更多文章。

1、koa洋葱模型怎么实现的
2、如果中间件中的next()方法报错了怎么办
3、co的原理是怎样的

等等问题。

导读

文章通过例子调试 koa，梳理koa的主流程，来理解 koa-compose 洋葱模型原理和 co 库的原理，相信你看完后一定会有所收获。

本文学习的koa版本是v2.11.0。克隆的官方仓库的master分支。 截至目前（2020年3月11日），最新一次commit是2020-01-04 07:41 Olle Jonsson eda27608，build: Drop unused Travis sudo: false directive (#1416)。

本文仓库在这里若川的 koa-analysis github 仓库。求个star呀。

本文阅读最佳方式

先star一下我的仓库，再把它git clone https://github.com/lxchuan12/koa-analysis.git克隆下来。不用管你是否用过nodejs。会一点点promise、generator、async、await等知识即可看懂。如果一点点也不会，可以边看阮一峰老师的《ES6标准入门》相关章节。跟着文章节奏调试和示例代码调试，动手调试（用vscode或者chrome）印象更加深刻。文章长段代码不用细看，可以调试时再细看。看这类源码文章百遍，可能不如自己多调试几遍。也欢迎加我微信交流ruochuan12。

# 克隆我的这个仓库
git clone https://github.com/lxchuan12/koa-analysis.git
# chrome 调试：
# 全局安装 http-server
npm i -g http-server
hs koa/examples/
# 可以指定端口 -p 3001
# hs -p 3001 koa/examples/
# 浏览器中打开
# 然后在浏览器中打开localhost:8080，开心的把代码调试起来

这里把这个examples文件夹做个简单介绍。

• middleware文件夹是用来vscode调试整体流程的。
  
• simpleKoa 文件夹是koa简化版，为了调试koa-compose洋葱模型如何串联起来各个中间件的。
  
• koa-convert文件夹是用来调试koa-convert和co源码的。
  
• co-generator文件夹是模拟实现co的示例代码。

vscode 调试 koa 源码方法

之前，我在知乎回答了一个问题一年内的前端看不懂前端框架源码怎么办？推荐了一些资料，阅读量还不错，大家有兴趣可以看看。主要有四点：

• 借助调试
• 搜索查阅相关高赞文章
• 把不懂的地方记录下来，查阅相关文档
• 总结

看源码，调试很重要，所以我详细写下 koa 源码调试方法，帮助一些可能不知道如何调试的读者。

# 我已经克隆到我的koa-analysis仓库了
git clone https://github.com/koajs/koa.git

// package.json
{
  "name": "koa",
  "version": "2.11.0",
  "description": "Koa web app framework",
  "main": "lib/application.js",
}

克隆源码后，看package.json找到main，就知道入口文件是lib/application.js了。

大概看完项目结构后发现没有examples文件夹（一般项目都会有这个文件夹，告知用户如何使用该项目），这时仔细看README.md。 如果看英文README.md有些吃力，会发现在Community标题下有一个中文文档 v2.x 。同时也有一个examples仓库 。

# 我已经克隆下来到我的仓库了
git clone https://github.com/koajs/examples.git

这时再开心的把examples克隆到自己电脑。可以安装好依赖，逐个研究学习下这里的例子，然后可能就一不小心掌握了koa的基本用法。当然，我这里不详细写这一块了，我是自己手写一些例子来调试。

继续看文档会发现使用指南讲述编写中间件。

使用文档中的中间件koa-compose例子来调试

学习 koa-compose 前，先看两张图。

在koa中，请求响应都放在中间件的第一个参数context对象中了。

再引用Koa中文文档中的一段：

如果您是前端开发人员，您可以将 next(); 之前的任意代码视为“捕获”阶段，这个简易的 gif 说明了 async 函数如何使我们能够恰当地利用堆栈流来实现请求和响应流：

1. 创建一个跟踪响应时间的日期
2. 等待下一个中间件的控制
3. 创建另一个日期跟踪持续时间
4. 等待下一个中间件的控制
5. 将响应主体设置为“Hello World”
6. 计算持续时间
7. 输出日志行
8. 计算响应时间
9. 设置 X-Response-Time 头字段
10. 交给 Koa 处理响应

读者们看完这个gif图，也可以思考下如何实现的。根据表现，可以猜测是next是一个函数，而且返回的可能是一个promise，被await调用。

看到这个gif图，我把之前写的examples/koa-compose的调试方法含泪删除了。默默写上gif图上的这些代码，想着这个读者们更容易读懂。 我把这段代码写在这里 koa/examples/middleware/app.js 便于调试。

在项目路径下配置新建.vscode/launch.json 文件，program配置为自己写的koa/examples/middleware/app.js文件。

.vscode/launch.json 代码

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/koa/examples/middleware/app.js"
        }
    ]
}

按F5键开始调试，调试时先走主流程，必要的地方打上断点，不用一开始就关心细枝末节。

断点调试要领：
赋值语句可以一步跳过，看返回值即可，后续详细再看。
函数执行需要断点跟着看，也可以结合注释和上下文倒推这个函数做了什么。

上述比较啰嗦的写了一堆调试方法。主要是想着授人予鱼不如授人予渔，这样换成其他源码也会调试了。

简单说下chrome调试nodejs，chrome浏览器打开chrome://inspect，点击配置**configure...**配置127.0.0.1:端口号(端口号在Vscode 调试控制台显示了)。

更多可以查看English Debugging Guide。

中文调试指南

喜欢看视频的读者也可以看慕课网这个视频node.js调试入门 ，讲得还是比较详细的。
不过我感觉在chrome调试nodejs项目体验不是很好（可能是我方式不对），所以我大部分具体的代码时都放在html文件script形式，在chrome调试了。

先看看 new Koa() 结果app是什么

看源码我习惯性看它的实例对象结构，一般所有属性和方法都放在实例对象上了，而且会通过原型链查找形式查找最顶端的属性和方法。

用koa/examples/middleware/app.js文件调试时，先看下执行new Koa()之后，app是什么，有个初步印象。

// 文件 koa/examples/middleware/app.js
const Koa = require('../../lib/application');

// const Koa = require('koa');
// 这里打个断点
const app = new Koa();
// x-response-time

// 这里打个断点
app.use(async (ctx, next) => {

});

在调试控制台ctrl + 反引号键（一般在Tab上方的按键）唤起，输入app，按enter键打印app。会有一张这样的图。

VScode也有一个代码调试神器插件Debug Visualizer。

安装好后插件后，按ctrl + shift + p，输入Open a new Debug Visualizer View，来使用，输入app，显示是这样的。

不过目前体验来看，相对还比较鸡肋，只能显示一级，而且只能显示对象，相信以后会更好。更多玩法可以查看它的文档。

我把koa实例对象比较完整的用xmind画出来了，大概看看就好，有个初步印象。

接着，我们可以看下app 实例、context、request、request的官方文档。

app 实例、context、request、request 官方API文档

• index API | context API | request API | response API

可以真正使用的时候再去仔细看文档。

koa 主流程梳理简化

通过F5启动调试（直接跳到下一个断点处）、F10单步跳过、F11单步调试等，配合重要的地方断点，调试完整体代码，其实比较容易整理出如下主流程的代码。

class Emitter{
  // node 内置模块
  constructor(){
  }
}
class Koa extends Emitter{
  constructor(options){
    super();
    options = options || {};
    this.middleware = [];
    this.context = {
      method: 'GET',
      url: '/url',
      body: undefined,
      set: function(key, val){
        console.log('context.set', key, val);
      },
    };
  }
  use(fn){
    this.middleware.push(fn);
    return this;
  }
  listen(){
    const  fnMiddleware = compose(this.middleware);
    const ctx = this.context;
    const handleResponse = () => respond(ctx);
    const onerror = function(){
      console.log('onerror');
    };
    fnMiddleware(ctx).then(handleResponse).catch(onerror);
  }
}
function respond(ctx){
  console.log('handleResponse');
  console.log('response.end', ctx.body);
}

重点就在listen函数里的compose这个函数，接下来我们就详细来欣赏下这个函数。

koa-compose 源码（洋葱模型实现）

通过app.use() 添加了若干函数，但是要把它们串起来执行呀。像上文的gif图一样。

compose函数，传入一个数组，返回一个函数。对入参是不是数组和校验数组每一项是不是函数。

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

 //  传入对象 context 返回Promise
  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      let fn = middleware[i]
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

把简化的代码和koa-compose代码写在了一个文件中。koa/examples/simpleKoa/koa-compose.js

hs koa/examples/
# 然后可以打开localhost:8080/simpleKoa，开心的把代码调试起来

不过这样好像还是有点麻烦，我还把这些代码放在codepen https://codepen.io/lxchuan12/pen/wvarPEb 中，直接可以在线调试啦。是不是觉得很贴心^_^，自己多调试几遍便于消化理解。

你会发现compose就是类似这样的结构（移除一些判断）。

// 这样就可能更好理解了。
// simpleKoaCompose
const [fn1, fn2, fn3] = this.middleware;
const fnMiddleware = function(context){
    return Promise.resolve(
      fn1(context, function next(){
        return Promise.resolve(
          fn2(context, function next(){
              return Promise.resolve(
                  fn3(context, function next(){
                    return Promise.resolve();
                  })
              )
          })
        )
    })
  );
};
fnMiddleware(ctx).then(handleResponse).catch(onerror);

也就是说koa-compose返回的是一个Promise，Promise中取出第一个函数（app.use添加的中间件），传入context和第一个next函数来执行。
第一个next函数里也是返回的是一个Promise，Promise中取出第二个函数（app.use添加的中间件），传入context和第二个next函数来执行。
第二个next函数里也是返回的是一个Promise，Promise中取出第三个函数（app.use添加的中间件），传入context和第三个next函数来执行。
第三个...
以此类推。最后一个中间件中有调用next函数，则返回Promise.resolve。如果没有，则不执行next函数。 这样就把所有中间件串联起来了。这也就是我们常说的洋葱模型。

不得不说非常惊艳，“玩还是大神会玩”。

这种把函数存储下来的方式，在很多源码中都有看到。比如lodash源码的惰性求值，vuex也是把action等函数存储下，最后才去调用。

搞懂了koa-compose 洋葱模型实现的代码，其他代码就不在话下了。

错误处理

中文文档 错误处理

仔细看文档，文档中写了三种捕获错误的方式。

• ctx.onerror 中间件中的错误捕获
• app.on('error', (err) => {}) 最外层实例事件监听形式 也可以看看例子koajs/examples/errors/app.js 文件
• app.onerror = (err) => {} 重写onerror自定义形式 也可以看测试用例 onerror

// application.js 文件
class Application extends Emitter {
  // 代码有简化组合
  listen(){
    const  fnMiddleware = compose(this.middleware);
    if (!this.listenerCount('error')) this.on('error', this.onerror);
    const onerror = err => ctx.onerror(err);
    fnMiddleware(ctx).then(handleResponse).catch(onerror);
  }
  onerror(err) {
    // 代码省略
    // ...
  }
}

ctx.onerror

lib/context.js文件中，有一个函数onerror，而且有这么一行代码this.app.emit('error', err, this)。

module.exports = {
  onerror(){
    // delegate
    // app 是在new Koa() 实例
    this.app.emit('error', err, this);
  }
}

app.use(async (ctx, next) => {
  try {
    await next();
  } catch (err) {
    err.status = err.statusCode || err.status || 500;
    throw err;
  }
});

try catch 错误或被fnMiddleware(ctx).then(handleResponse).catch(onerror);，这里的onerror是ctx.onerror
而ctx.onerror函数中又调用了this.app.emit('error', err, this)，所以在最外围app.on('error'，err => {})可以捕获中间件链中的错误。 因为koa继承自events模块，所以有'emit'和on等方法）

koa2 和 koa1 的简单对比

中文文档中描述了 koa2 和 koa1 的区别

koa1中主要是generator函数。koa2中会自动转换generator函数。

// Koa 将转换
app.use(function *(next) {
  const start = Date.now();
  yield next;
  const ms = Date.now() - start;
  console.log(`${this.method} ${this.url} - ${ms}ms`);
});

koa-convert 源码

在vscode/launch.json文件，找到这个program字段，修改为"program": "${workspaceFolder}/koa/examples/koa-convert/app.js"。

通过F5启动调试（直接跳到下一个断点处）、F10单步跳过、F11单步调试调试走一遍流程。重要地方断点调试。

app.use时有一层判断，是否是generator函数，如果是则用koa-convert暴露的方法convert来转换重新赋值，再存入middleware，后续再使用。

class Koa extends Emitter{
  use(fn) {
    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
    if (isGeneratorFunction(fn)) {
      deprecate('Support for generators will be removed in v3. ' +
                'See the documentation for examples of how to convert old middleware ' +
                'https://github.com/koajs/koa/blob/master/docs/migration.md');
      fn = convert(fn);
    }
    debug('use %s', fn._name || fn.name || '-');
    this.middleware.push(fn);
    return this;
  }
}

koa-convert源码挺多，核心代码其实是这样的。

function convert(){
 return function (ctx, next) {
    return co.call(ctx, mw.call(ctx, createGenerator(next)))
  }
  function * createGenerator (next) {
    return yield next()
  }
}

最后还是通过co来转换的。所以接下来看co的源码。

co 源码

tj大神写的co 仓库

本小节的示例代码都在这个文件夹koa/examples/co-generator 中，hs koa/example，可以自行打开https://localhost:8080/co-generator调试查看。

看co源码前，先看几段简单代码。

// 写一个请求简版请求
function request(ms= 1000) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({name: '若川'});
    }, ms);
  });
}

// 获取generator的值
function* generatorFunc(){
  const res = yield request();
  console.log(res, 'generatorFunc-res');
}
generatorFunc(); // 报告，我不会输出你想要的结果的

简单来说co，就是把generator自动执行，再返回一个promise。 generator函数这玩意它不自动执行呀，还要一步步调用next()，也就是叫它走一步才走一步。

所以有了async、await函数。

// await 函数 自动执行
async function asyncFunc(){
    const res = await request();
    console.log(res, 'asyncFunc-res await 函数 自动执行');
}
asyncFunc(); // 输出结果

也就是说co需要做的事情，是让generator向async、await函数一样自动执行。

模拟实现简版 co（第一版）

这时，我们来模拟实现第一版的co。根据generator的特性，其实容易写出如下代码。

// 获取generator的值
function* generatorFunc(){
  const res = yield request();
  console.log(res, 'generatorFunc-res');
}

function coSimple(gen){
  gen = gen();
  console.log(gen, 'gen');

  const ret = gen.next();
  const promise = ret.value;
  promise.then(res => {
    gen.next(res);
  });
}
coSimple(generatorFunc);
// 输出了想要的结果
// {name: "若川"}"generatorFunc-res"

模拟实现简版 co（第二版）

但是实际上，不会上面那么简单的。有可能是多个yield和传参数的情况。 传参可以通过这如下两行代码来解决。

const args = Array.prototype.slice.call(arguments, 1);
gen = gen.apply(ctx, args);

两个yield，我大不了重新调用一下promise.then，搞定。

// 多个yeild，传参情况
function* generatorFunc(suffix = ''){
  const res = yield request();
  console.log(res, 'generatorFunc-res' + suffix);

  const res2 = yield request();
  console.log(res2, 'generatorFunc-res-2' + suffix);
}

function coSimple(gen){
  const ctx = this;
  const args = Array.prototype.slice.call(arguments, 1);
  gen = gen.apply(ctx, args);
  console.log(gen, 'gen');

  const ret = gen.next();
  const promise = ret.value;
  promise.then(res => {
    const ret = gen.next(res);
    const promise = ret.value;
      promise.then(res => {
        gen.next(res);
      });
  });
}

coSimple(generatorFunc, ' 哎呀，我真的是后缀');

模拟实现简版 co（第三版）

问题是肯定不止两次，无限次的yield的呢，这时肯定要把重复的封装起来。而且返回是promise，这就实现了如下版本的代码。

function* generatorFunc(suffix = ''){
  const res = yield request();
  console.log(res, 'generatorFunc-res' + suffix);

  const res2 = yield request();
  console.log(res2, 'generatorFunc-res-2' + suffix);

  const res3 = yield request();
  console.log(res3, 'generatorFunc-res-3' + suffix);

  const res4 = yield request();
  console.log(res4, 'generatorFunc-res-4' + suffix);
}

function coSimple(gen){
  const ctx = this;
  const args = Array.prototype.slice.call(arguments, 1);
  gen = gen.apply(ctx, args);
  console.log(gen, 'gen');

  return new Promise((resolve, reject) => {

    onFulfilled();

    function onFulfilled(res){
      const ret = gen.next(res);
      next(ret);
    }

    function next(ret) {
      const promise = ret.value;
      promise && promise.then(onFulfilled);
    }

  });
}

coSimple(generatorFunc, ' 哎呀，我真的是后缀');

但第三版的模拟实现简版co中，还没有考虑报错和一些参数合法的情况。

最终来看下co源码

这时来看看co的源码，报错和错误的情况，错误时调用reject，是不是就好理解了一些呢。

function co(gen) {
  var ctx = this;
  var args = slice.call(arguments, 1)

  // we wrap everything in a promise to avoid promise chaining,
  // which leads to memory leak errors.
  // see https://github.com/tj/co/issues/180
  return new Promise(function(resolve, reject) {
    // 把参数传递给gen函数并执行
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    // 如果不是函数 直接返回
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    onFulfilled();

    /**
     * @param {Mixed} res
     * @return {Promise}
     * @api private
     */

    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    /**
     * @param {Error} err
     * @return {Promise}
     * @api private
     */

    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    /**
     * Get the next value in the generator,
     * return a promise.
     *
     * @param {Object} ret
     * @return {Promise}
     * @api private
     */

    // 反复执行调用自己
    function next(ret) {
      // 检查当前是否为 Generator 函数的最后一步，如果是就返回
      if (ret.done) return resolve(ret.value);
      // 确保返回值是promise对象。
      var value = toPromise.call(ctx, ret.value);
      // 使用 then 方法，为返回值加上回调函数，然后通过 onFulfilled 函数再次调用 next 函数。
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      // 在参数不符合要求的情况下（参数非 Thunk 函数和 Promise 对象），将 Promise 对象的状态改为 rejected，从而终止执行。
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
    }
  });
}

koa 和 express 简单对比

中文文档 koa 和 express 对比

文档里写的挺全面的。简单来说koa2语法更先进，更容易深度定制（egg.js、think.js、底层框架都是koa）。

总结

文章通过授人予鱼不如授人予鱼的方式，告知如何调试源码，看完了koa-compose洋葱模型实现，koa-convert和co等源码。

koa-compose是将app.use添加到middleware数组中的中间件（函数），通过使用Promise串联起来，next()返回的是一个promise。

koa-convert 判断app.use传入的函数是否是generator函数，如果是则用koa-convert来转换，最终还是调用的co来转换。

co源码实现原理：其实就是通过不断的调用generator函数的next()函数，来达到自动执行generator函数的效果（类似async、await函数的自动自行）。

koa框架总结：主要就是四个核心概念，洋葱模型（把中间件串联起来），http请求上下文（context）、http请求对象、http响应对象。

git clone https://github.com/lxchuan12/koa-analysis.git

再强烈建议下按照本文阅读最佳方式，克隆代码下来，动手调试代码学习更加深刻。

如果读者发现有不妥或可改善之处，再或者哪里没写明白的地方，欢迎评论指出，也欢迎加我微信交流ruochuan12。另外觉得写得不错，对你有些许帮助，可以评论、转发分享，也是对笔者的一种支持，万分感谢。

解答下开头的提问

仅供参考

1、koa洋葱模型怎么实现的。

可以参考上文整理的简版koa-compose作答。

// 这样就可能更好理解了。
// simpleKoaCompose
const [fn1, fn2, fn3] = this.middleware;
const fnMiddleware = function(context){
    return Promise.resolve(
      fn1(context, function next(){
        return Promise.resolve(
          fn2(context, function next(){
              return Promise.resolve(
                  fn3(context, function next(){
                    return Promise.resolve();
                  })
              )
          })
        )
    })
  );
};
fnMiddleware(ctx).then(handleResponse).catch(onerror);

答：app.use() 把中间件函数存储在middleware数组中，最终会调用koa-compose导出的函数compose返回一个promise，中间函数的第一个参数ctx是包含响应和请求的一个对象，会不断传递给下一个中间件。next是一个函数，返回的是一个promise。

2、如果中间件中的next()方法报错了怎么办。

可参考上文整理的错误处理作答。

ctx.onerror = function {
  this.app.emit('error', err, this);
};
  listen(){
    const  fnMiddleware = compose(this.middleware);
    if (!this.listenerCount('error')) this.on('error', this.onerror);
    const onerror = err => ctx.onerror(err);
    fnMiddleware(ctx).then(handleResponse).catch(onerror);
  }
  onerror(err) {
    // 代码省略
    // ...
  }

答：中间件链错误会由ctx.onerror捕获，该函数中会调用this.app.emit('error', err, this)（因为koa继承自events模块，所以有'emit'和on等方法），可以使用app.on('error', (err) => {})，或者app.onerror = (err) => {}进行捕获。

3、co的原理是怎样的。
答：co的原理是通过不断调用generator函数的next方法来达到自动执行generator函数的，类似async、await函数自动执行。

答完，面试官可能觉得小伙子还是蛮懂koa的啊。当然也可能继续追问，直到答不出...

还能做些什么 ？

学完了整体流程，koa-compose、koa-convert和co的源码。

还能仔细看看看http请求上下文（context）、http请求对象、http响应对象的具体实现。

还能根据我文章说的调试方式调试koa 组织中的各种中间件，比如koa-bodyparser, koa-router，koa-jwt，koa-session、koa-cors等等。

还能把examples仓库克隆下来，我的这个仓库已经克隆了，挨个调试学习下源码。

web框架有很多，比如Express.js，Koa.js、Egg.js、Nest.js、Next.js、Fastify.js、Hapi.js、Restify.js、Loopback.io、Sails.js、Midway.js等等。

还能把这些框架的优势劣势、设计思想等学习下。

还能继续学习HTTP协议、TCP/IP协议网络相关，虽然不属于koa的知识，但需深入学习掌握。

学无止境~~~

把我的redux源码仓库 git clone https://github.com/lxchuan12/redux-analysis.git克隆下来，顺便star一下我的redux源码学习仓库 (opens new window)^_^。跟着文章节奏调试和示例代码调试，用chrome动手调试印象更加深刻。文章长段代码不用细看，可以调试时再细看。看这类源码文章百遍，可能不如自己多调试几遍。也欢迎加我微信交流ruochuan12。

2. git subtree 管理子仓库

写了很多源码文章，vuex、axios、koa等都是使用新的仓库克隆一份源码在自己仓库中。 虽然电脑可以拉取最新代码，看到原作者的git信息。但上传到github后。读者却看不到原仓库作者的git信息了。于是我找到了git submodules 方案，但并不是很适合。再后来发现了git subtree。

简单说下 npm package和git subtree的区别。 npm package是单向的。git subtree则是双向的。

具体可以查看这篇文章@德来（原有赞大佬）：用 Git Subtree 在多个 Git 项目间双向同步子项目，附简明使用手册(opens new window)

学会了git subtree后，我新建了redux-analysis项目后，把redux源码4.x（截止至2020年06月13日，4.x分支最新版本是4.0.5，master分支是ts，文章中暂不想让一些不熟悉ts的读者看不懂）分支克隆到了我的项目里的一个子项目，得以保留git信息。

对应命令则是：

git subtree add --prefix=redux https://github.com/reduxjs/redux.git 4.x

3. 调试 redux 源码准备工作

之前，我在知乎回答了一个问题若川：一年内的前端看不懂前端框架源码怎么办？ (opens new window)推荐了一些资料，阅读量还不错，大家有兴趣可以看看。主要有四点：
1.借助调试
2.搜索查阅相关高赞文章
3.把不懂的地方记录下来，查阅相关文档
4.总结

看源码调试很重要，所以我的每篇源码文章都详细描述（也许有人看来是比较啰嗦...）如何调试源码。

断点调试要领：
赋值语句可以一步按F10跳过，看返回值即可，后续详细再看。
函数执行需要断点按F11跟着看，也可以结合注释和上下文倒推这个函数做了什么。
有些不需要细看的，直接按F8走向下一个断点
刷新重新调试按F5

调试源码前，先简单看看 redux 的工作流程，有个大概印象。

3.1 rollup 生成 sourcemap 便于调试

修改rollup.config.js文件，output输出的配置生成sourcemap。

// redux/rollup.config.js 有些省略
const sourcemap = {
  sourcemap: true,
};

output: {
    // ...
    ...sourcemap,
}

安装依赖

git clone http://github.com/lxchuan12/redux-analysis.git
cd redux-analysi/redux
npm i
npm run build
# 编译结束后会生成 sourcemap .map格式的文件到 dist、es、lib 目录下。

仔细看看redux/examples目录和redux/README。

这时我在根路径下，新建文件夹examples，把原生js写的计数器redux/examples/counter-vanilla/index.html，复制到examples/index.html。同时把打包后的包含sourcemap的redux/dist目录，复制到examples/dist目录。

修改index.html的script的redux.js文件为dist中的路径。

为了便于区分和调试后续html文件，我把index.html重命名为index.1.redux.getState.dispatch.html。

# redux-analysis 根目录
# 安装启动服务的npm包
npm i -g http-server
cd examples
hs -p 5000

就可以开心的调试啦。可以直接克隆我的项目git clone http://github.com/lxchuan12/redux-analysis.git。本地调试，动手实践，容易消化吸收。

4. 通过调试计数器例子的学习 redux 源码

接着我们来看examples/index.1.redux.getState.dispatch.html文件。先看html部分。只是写了几个 button，比较简单。

<div>
    <p>
    Clicked: <span id="value">0</span> times
    <button id="increment">+</button>
    <button id="decrement">-</button>
    <button id="incrementIfOdd">Increment if odd</button>
    <button id="incrementAsync">Increment async</button>
    </p>
</div>

js部分，也比较简单。声明了一个counter函数，传递给Redux.createStore(counter)，得到结果store，而store是个对象。render方法渲染数字到页面。用store.subscribe(render)订阅的render方法。还有store.dispatch({type: 'INCREMENT' })方法，调用store.dispatch时会触发render方法。这样就实现了一个计数器。

function counter(state, action) {
    if (typeof state === 'undefined') {
        return 0
    }

    switch (action.type) {
        case 'INCREMENT':
        return state + 1
        case 'DECREMENT':
        return state - 1
        default:
        return state
    }
}

var store = Redux.createStore(counter)
var valueEl = document.getElementById('value')

function render() {
    valueEl.innerHTML = store.getState().toString()
}
render()
store.subscribe(render)

document.getElementById('increment')
.addEventListener('click', function () {
    store.dispatch({ type: 'INCREMENT' })
})

// 省略部分暂时无效代码...

思考：看了这段代码，你会在哪打断点来调试呢。

// 四处可以断点来看
// 1.
var store = Redux.createStore(counter)
// 2.
function render() {
valueEl.innerHTML = store.getState().toString()
}
render()
// 3.
store.subscribe(render)
// 4.
store.dispatch({ type: 'INCREMENT' })

图中的右边Scope，有时需要关注下，会显示闭包、全局环境、当前环境等变量，还可以显示函数等具体代码位置，能帮助自己理解代码。

断点调试，按F5刷新页面后，按F8，把鼠标放在Redux和store上。

可以看到Redux上有好几个方法。分别是：

• __DO_NOT_USE__ActionTypes: {INIT: "@@redux/INITu.v.d.u.6.r", REPLACE: "@@redux/REPLACEg.u.u.7.c", PROBE_UNKNOWN_ACTION: ƒ}
• applyMiddleware: ƒ applyMiddleware() 函数是一个增强器，组合多个中间件，最终增强store.dispatch函数，dispatch时，可以串联执行所有中间件。
• bindActionCreators: ƒ bindActionCreators(actionCreators, dispatch) 生成actions，主要用于其他库，比如react-redux。
• combineReducers: ƒ combineReducers(reducers) 组合多个reducers，返回一个总的reducer函数。
• compose: ƒ compose() 组合多个函数，从右到左，比如：compose(f, g, h) 最终得到这个结果 (...args) => f(g(h(...args))).
• createStore: ƒ createStore(reducer, preloadedState, enhancer) 生成 store 对象

再看store也有几个方法。分别是：

• dispatch: ƒ dispatch(action) 派发动作，也就是把subscribe收集的函数，依次遍历执行
• subscribe: ƒ subscribe(listener) 订阅收集函数存在数组中，等待触发dispatch依次执行。返回一个取消订阅的函数，可以取消订阅监听。
• getState: ƒ getState() 获取存在createStore函数内部闭包的对象。
• replaceReducer: ƒ replaceReducer(nextReducer) 主要用于redux开发者工具，对比当前和上一次操作的异同。有点类似时间穿梭功能。
• Symbol(observable): ƒ observable()

也就是官方文档redux.org.js (opens new window)上的 API。

暂时不去深究每一个API的实现。重新按F5刷新页面，断点到var store = Redux.createStore(counter)。一直按F11，先走一遍主流程。

4.1 Redux.createSotre

createStore 函数结构是这样的，是不是看起来很简单，最终返回对象store，包含dispatch、subscribe、getState、replaceReducer等方法。

// 省略了若干代码
export default function createStore(reducer, preloadedState, enhancer) {
    // 省略参数校验和替换
    // 当前的 reducer 函数
    let currentReducer = reducer
    // 当前state
    let currentState = preloadedState
    // 当前的监听数组函数
    let currentListeners = []
    // 下一个监听数组函数
    let nextListeners = currentListeners
    // 是否正在dispatch中
    let isDispatching = false
    function ensureCanMutateNextListeners() {
        if (nextListeners === currentListeners) {
        nextListeners = currentListeners.slice()
        }
    }
    function getState() {
        return currentState
    }
    function subscribe(listener) {}
    function dispatch(action) {}
    function replaceReducer(nextReducer) {}
    function observable() {}
    // ActionTypes.INIT @@redux/INITu.v.d.u.6.r
    dispatch({ type: ActionTypes.INIT })
    return {
        dispatch,
        subscribe,
        getState,
        replaceReducer,
        [$$observable]: observable
    }
}

4.2 store.dispatch(action)

function dispatch(action) {
    // 判断action是否是对象，不是则报错
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }
    // 判断action.type 是否存在，没有则报错
    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
          'Have you misspelled a constant?'
      )
    }
    // 不是则报错
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
        // 调用完后置为 false
      isDispatching = false
    }
    //  把 收集的函数拿出来依次调用
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
    // 最终返回 action
    return action
  }

var store = Redux.createStore(counter)

上文调试完了这句。

继续按F11调试。

function render() {
    valueEl.innerHTML = store.getState().toString()
}
render()

4.3 store.getState()

getState函数实现比较简单。

function getState() {
    // 判断正在dispatch中，则报错
    if (isDispatching) {
        throw new Error(
        'You may not call store.getState() while the reducer is executing. ' +
            'The reducer has already received the state as an argument. ' +
            'Pass it down from the top reducer instead of reading it from the store.'
        )
    }
    // 返回当前的state
    return currentState
}

4.4 store.subscribe(listener)

订阅监听函数，存放在数组中，store.dispatch(action)时遍历执行。

function subscribe(listener) {
    // 订阅参数校验不是函数报错
    if (typeof listener !== 'function') {
      throw new Error('Expected the listener to be a function.')
    }
    // 正在dispatch中，报错
    if (isDispatching) {
      throw new Error(
        'You may not call store.subscribe() while the reducer is executing. ' +
          'If you would like to be notified after the store has been updated, subscribe from a ' +
          'component and invoke store.getState() in the callback to access the latest state. ' +
          'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
      )
    }
    // 订阅为 true
    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    // 返回一个取消订阅的函数
    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }
      // 正在dispatch中，则报错
      if (isDispatching) {
        throw new Error(
          'You may not unsubscribe from a store listener while the reducer is executing. ' +
            'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
        )
      }
      // 订阅为 false
      isSubscribed = false

      ensureCanMutateNextListeners()
    //   找到当前监听函数
      const index = nextListeners.indexOf(listener)
    //   在数组中删除
      nextListeners.splice(index, 1)
      currentListeners = null
    }
  }

到这里，我们就调试学习完了Redux.createSotre、store.dispatch、store.getState、store.subscribe的源码。

接下来，我们写个中间件例子，来调试中间件相关源码。

5. Redux 中间件相关源码

中间件是重点，面试官也经常问这类问题。

5.1 Redux.applyMiddleware(...middlewares)

5.1.1 准备 logger 例子调试

为了调试Redux.applyMiddleware(...middlewares)，我在examples/js/middlewares.logger.example.js写一个简单的logger例子。分别有三个logger1，logger2，logger3函数。由于都是类似，所以我在这里只展示logger1函数。

// examples/js/middlewares.logger.example.js
function logger1({ getState }) {
  return next => action => {
      console.log('will dispatch--1--next, action:', next, action)

      // Call the next dispatch method in the middleware chain.
      const returnValue = next(action)

      console.log('state after dispatch--1', getState())

      // This will likely be the action itself, unless
      // a middleware further in chain changed it.
      return returnValue
  }
}
// 省略 logger2、logger3

logger中间件函数做的事情也比较简单，返回两层函数，next就是下一个中间件函数，调用返回结果。为了让读者能看懂，我把logger1用箭头函数、logger2则用普通函数。

写好例子后，我们接着来看怎么调试Redux.applyMiddleware(...middlewares))源码。

cd redux-analysis && hs -p 5000
# 上文说过npm i -g http-server

打开http://localhost:5000/examples/index.2.redux.applyMiddleware.compose.html，按F12打开控制台，

先点击加号操作+1，把结果展示出来。

从图中可以看出，next则是下一个函数。先1-2-3，再3-2-1这样的顺序。

这种也就是我们常说的中间件，面向切面编程（AOP）。

接下来调试，在以下语句打上断点和一些你觉得重要的地方打上断点。

// examples/index.2.redux.applyMiddleware.compose.html
var store = Redux.createStore(counter, Redux.applyMiddleware(logger1, logger2,  logger3))

5.1.2 Redux.applyMiddleware(...middlewares) 源码

// redux/src/applyMiddleware.js
/**
 * ...
 * @param {...Function} middlewares The middleware chain to be applied.
 * @returns {Function} A store enhancer applying the middleware.
 */
export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

// redux/src/createStore.js
export default function createStore(reducer, preloadedState, enhancer) {
  // 省略参数校验
  // 如果第二个参数`preloadedState`是函数，并且第三个参数`enhancer`是undefined，把它们互换一下。
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }
    // enhancer 也就是`Redux.applyMiddleware`返回的函数
    // createStore 的 args 则是 `reducer, preloadedState`
    /**
     * createStore => (...args) => {
            const store = createStore(...args)
            return {
              ...store,
               dispatch,
            }
        }
     ** /
    // 最终返回增强的store对象。
    return enhancer(createStore)(reducer, preloadedState)
  }
  // 省略后续代码
}

把接收的中间件函数logger1, logger2, logger3放入到 了middlewares数组中。Redux.applyMiddleware最后返回两层函数。 把中间件函数都混入了参数getState和dispatch。

// examples/index.2.redux.applyMiddleware.compose.html
var store = Redux.createStore(counter, Redux.applyMiddleware(logger1, logger2,  logger3))

最后这句其实是返回一个增强了dispatch的store对象。

而增强的dispatch函数，则是用Redux.compose(...functions)进行串联起来执行的。

5.2 Redux.compose(...functions)

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

// applyMiddleware.js
dispatch = compose(...chain)(store.dispatch)
// compose
funcs.reduce((a, b) => (...args) => a(b(...args)))

这两句可能不是那么好理解，可以断点多调试几次。我把箭头函数转换成普通函数。

funcs.reduce(function(a, b){
  return function(...args){
    return a(b(...args));
  };
});

其实redux源码中注释很清晰了，这个compose函数上方有一堆注释，其中有一句：组合多个函数，从右到左，比如：compose(f, g, h) 最终得到这个结果 (...args) => f(g(h(...args))).

5.2.1 compose 函数演化

看Redux.compose(...functions)函数源码后，还是不明白，不要急不要慌，吃完鸡蛋还有汤。仔细来看如何演化而来，先来简单看下如下需求。

传入一个数值，计算数值乘以10再加上10，再减去2。

实现起来很简单。

const calc = (num) => num * 10 + 10 - 2;
calc(10); // 108

但这样写有个问题，不好扩展，比如我想乘以10时就打印出结果。 为了便于扩展，我们分开写成三个函数。

const multiply = (x) => {
   const result = x * 10;
   console.log(result);
   return result;
};
const add = (y) => y + 10;
const minus = (z) => z - 2;

// 计算结果
console.log(minus(add(multiply(10))));
// 100
// 108
// 这样我们就把三个函数计算结果出来了。

再来实现一个相对通用的函数，计算这三个函数的结果。

const compose = (f, g, h) => {
  return function(x){
    return f(g(h(x)));
  }
}
const calc = compose(minus, add, multiply);
console.log(calc(10));
// 100
// 108

这样还是有问题，只支持三个函数。我想支持多个函数。 我们了解到数组的reduce方法就能实现这样的功能。 前一个函数

// 我们常用reduce来计算数值数组的总和
[1,2,3,4,5].reduce((pre, item, index, arr) => {
  console.log('(pre, item, index, arr)', pre, item, index, arr);
  // (pre, item, index, arr) 1 2 1 (5) [1, 2, 3, 4, 5]
  // (pre, item, index, arr) 3 3 2 (5) [1, 2, 3, 4, 5]
  // (pre, item, index, arr) 6 4 3 (5) [1, 2, 3, 4, 5]
  // (pre, item, index, arr) 10 5 4 (5) [1, 2, 3, 4, 5]
  return pre + item;
});
// 15

pre 是上一次返回值，在这里是数值1,3,6,10。在下一个例子中则是匿名函数。

function(x){
  return a(b(x));
}

item是2,3,4,5，在下一个例子中是minus、add、multiply。

const compose = (...funcs) => {
  return funcs.reduce((a, b) => {
    return function(x){
      return a(b(x));
    }
  })
}
const calc = compose(minus, add, multiply);
console.log(calc(10));
// 100
// 108

而Redux.compose(...functions)其实就是这样，只不过中间件是返回双层函数罢了。

所以返回的是next函数，他们串起来执行了，形成了中间件的洋葱模型。 人们都说一图胜千言。我画了一个相对简单的redux中间件原理图。

如果还不是很明白，建议按照我给出的例子，多调试。

cd redux-analysis && hs -p 5000
# 上文说过npm i -g http-server

打开http://localhost:5000/examples/index.3.html，按F12打开控制台调试。

5.2.2 前端框架的 compose 函数的实现

lodash源码中 compose函数的实现，也是类似于数组的reduce，只不过是内部实现的arrayReduce

引用自我的文章：学习lodash源码整体架构(opens new window)

// lodash源码
function baseWrapperValue(value, actions) {
	var result = value;
	// 如果是lazyWrapper的实例，则调用LazyWrapper.prototype.value 方法，也就是 lazyValue 方法
	if (result instanceof LazyWrapper) {
		result = result.value();
	}
	// 类似 [].reduce()，把上一个函数返回结果作为参数传递给下一个函数
	return arrayReduce(actions, function(result, action) {
		return action.func.apply(action.thisArg, arrayPush([result], action.args));
	}, result);
}

koa-compose源码也有compose函数的实现。实现是循环加promise。 由于代码比较长我就省略了，具体看链接若川：学习 koa 源码的整体架构，浅析koa洋葱模型原理和co原理 (opens new window)小节 koa-compose 源码（洋葱模型实现）

6. Redux.combineReducers(reducers)

打开http://localhost:5000/examples/index.4.html，按F12打开控制台，按照给出的例子，调试接下来的Redux.combineReducers(reducers)和Redux.bindActionCreators(actionCreators, dispatch)具体实现。由于文章已经很长了，这两个函数就不那么详细解释了。

combineReducers函数简单来说就是合并多个reducer为一个函数combination。

export default function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]

    // 省略一些开发环境判断的代码...

    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }

  // 经过一些处理后得到最后的finalReducerKeys
  const finalReducerKeys = Object.keys(finalReducers)

  // 省略一些开发环境判断的代码...

  return function combination(state = {}, action) {
    // ... 省略开发环境的一些判断

   // 用 hasChanged变量 记录前后 state 是否已经修改
    let hasChanged = false
    // 声明对象来存储下一次的state
    const nextState = {}
    //遍历 finalReducerKeys
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      const previousStateForKey = state[key]
      // 执行 reducer
      const nextStateForKey = reducer(previousStateForKey, action)

      // 省略容错代码 ...

      nextState[key] = nextStateForKey
      // 两次 key 对比 不相等则发生改变
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    // 最后的 keys 数组对比 不相等则发生改变
    hasChanged =
      hasChanged || finalReducerKeys.length !== Object.keys(state).length
    return hasChanged ? nextState : state
  }
}

7. Redux.bindActionCreators(actionCreators, dispatch)

如果第一个参数是一个函数，那就直接返回一个函数。如果是一个对象，则遍历赋值，最终生成boundActionCreators对象。

function bindActionCreator(actionCreator, dispatch) {
  return function() {
    return dispatch(actionCreator.apply(this, arguments))
  }
}

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  // ... 省略一些容错判断

  const boundActionCreators = {}
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

redux所提供的的API 除了store.replaceReducer(nextReducer)没分析，其他都分析了。

8. vuex 和 redux 简单对比

8.1 源码实现形式

从源码实现上来看，vuex源码主要使用了构造函数，而redux则是多用函数式编程、闭包。

8.2 耦合度

vuex 与 vue 强耦合，脱离了vue则无法使用。而redux跟react没有关系，所以它可以使用于小程序或者jQuery等。如果需要和react使用，还需要结合react-redux库。

8.3 扩展

// logger 插件，具体实现省略
function logger (store) {
  console.log('store', store);
}
// 作为数组传入
new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  plugins: process.env.NODE_ENV !== 'production'
    ? [logger]
    : []
})
// vuex 源码 插件执行部分
class Store{
  constructor(){
    // 把vuex的实例对象 store整个对象传递给插件使用
    plugins.forEach(plugin => plugin(this))
  }
}

vuex实现扩展则是使用插件形式，而redux是中间件的形式。redux的中间件则是AOP（面向切面编程），redux中Redux.applyMiddleware()其实也是一个增强函数，所以也可以用户来实现增强器，所以redux生态 (opens new window)比较繁荣。

8.4 上手难易度

相对来说，vuex上手相对简单，redux相对难一些，redux涉及到一些函数式编程、高阶函数、纯函数等概念。

9. 总结

文章主要通过一步步调试的方式循序渐进地讲述redux源码的具体实现。旨在教会读者调试源码，不惧怕源码。

面试官经常喜欢考写一个redux中间件，说说redux中间件的原理。

function logger1({ getState }) {
  return next => action => {
      const returnValue = next(action)
      return returnValue
  }
}

const compose = (...funcs) => {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  // 箭头函数
  // return funcs.reduce((a, b) => (...args) => a(b(...args)))
  return funcs.reduce((a, b) => {
    return function(x){
      return a(b(x));
    }
  })
}

const enhancerStore = Redux.create(reducer, Redux.applyMiddleware(logger1, ...))
enhancerStore.dispatch(action)

用户触发enhancerStore.dispatch(action)是增强后的，其实就是第一个中间件函数，中间的next是下一个中间件函数，最后next是没有增强的store.dispatch(action)。

最后再来看张redux工作流程图

是不是就更理解些了呢。

如果读者发现有不妥或可改善之处，再或者哪里没写明白的地方，欢迎评论指出。另外觉得写得不错，对你有些许帮助，可以评论、转发分享，也是对我的一种支持，非常感谢呀。要是有人说到怎么读源码，正在读文章的你能推荐我的源码系列文章，那真是太好了。

欢迎阅读我的更多文章。

function Vue(){
 console.log('test vue');
}
function http(){
  console.log('我是调用接口的http');
}
Vue.prototype.$http = http;
var vm = new Vue();
vm.$http()
vm.$http = 1; // 一旦被修改，虽然一般正常情况下不会被修改
vm.$http(); // 再次调用报错

熟悉Object.defineProperty或者说熟悉对象API的人，一般是如下代码写的，则不会出现被修改的问题。

function Vue(){
 console.log('test vue');
};
function http(){
  console.log('我是调用接口的http');
};
Object.defineProperty(Vue.prototype, '$http', {
    get(){
     return http;
    }
});
var vm = new Vue();
vm.$http();
vm.$http = 1; // 这里无法修改
vm.$http(); // 调用正常

vue-router 源码里就是类似这样写的 (opens new window)，this.$router，this.$route无法修改。

// vue-router 源码
Object.defineProperty(Vue.prototype, '$router', {
	get () { return this._routerRoot._router }
})
Object.defineProperty(Vue.prototype, '$route', {
	get () { return this._routerRoot._route }
})

以下是正文~

之前看到【深度长文】JavaScript数组所有API全解密（opens new window）和JavaScript字符串所有API全解密（opens new window）这两篇高质量的文章。发现没写对象API解析（估计是博主觉得简单，就没写）。刚好我看到《JavaScript面向对象编程指南（第2版）》，觉得有必要写（或者说chao）一下，也好熟悉下对象的所有API用法。

创建对象的两种方式：

var o = new Object();
var o = {}; // 推荐

该构造器可以接受任何类型的参数，并且会自动识别参数的类型，并选择更合适的构造器来完成相关操作。比如：

var o = new Object('something');
o.constructor; // ƒ String() { [native code] }
var n = new Object(123);
n.constructor; // ƒ Number() { [native code] }

Object构造器的成员

Object.prototype

该属性是所有对象的原型（包括 Object对象本身），语言中的其他对象正是通过对该属性上添加东西来实现它们之间的继承关系的。所以要小心使用。 比如：

var s = new String('若川');
Object.prototype.custom = 1;
console.log(s.custom); // 1

Object.prototype 的成员

Object.prototype.constructor

该属性指向用来构造该函数对象的构造器，在这里为Object()

Object.prototype.constructor === Object; // true
var o = new Object();
o.constructor === Object; // true

Object.prototype.toString(radix)

该方法返回的是一个用于描述目标对象的字符串。特别地，当目标是一个Number对象时，可以传递一个用于进制数的参数radix，该参数radix，该参数的默认值为10。

var o = {prop:1};
o.toString(); // '[object Object]'
var n = new Number(255);
n.toString(); // '255'
n.toString(16); // 'ff'

Object.prototype.toLocaleString()

该方法的作用与toString()基本相同，只不过它做一些本地化处理。该方法会根据当前对象的不同而被重写，例如Date(),Number(),Array(),它们的值都会以本地化的形式输出。当然，对于包括Object()在内的其他大多数对象来说，该方法与toString()是基本相同的。 在浏览器环境下，可以通过BOM对象Navigator的language属性（在IE中则是userLanguage）来了解当前所使用的语言：

navigator.language; //'en-US'

Object.prototype.valueOf()

该方法返回的是用基本类型所表示的this值，如果它可以用基本类型表示的话。如果Number对象返回的是它的基本数值，而Date对象返回的是一个时间戳（timestamp）。如果无法用基本数据类型表示，该方法会返回this本身。

// Object
var o = {};
typeof o.valueOf(); // 'object'
o.valueOf() === o; // true
// Number
var n = new Number(101);
typeof n; // 'object'
typeof n.vauleOf; // 'function'
typeof n.valueOf(); // 'number'
n.valueOf() === n; // false
// Date
var d = new Date();
typeof d.valueOf(); // 'number'
d.valueOf(); // 1503146772355

Object.prototype.hasOwnProperty(prop)

该方法仅在目标属性为对象自身属性时返回true,而当该属性是从原型链中继承而来或根本不存在时，返回false。

var o = {prop:1};
o.hasOwnProperty('prop'); // true
o.hasOwnProperty('toString'); // false
o.hasOwnProperty('formString'); // false

Object.prototype.isPrototypeOf(obj)

如果目标对象是当前对象的原型，该方法就会返回true，而且，当前对象所在原型上的所有对象都能通过该测试，并不局限与它的直系关系。

var s = new String('');
Object.prototype.isPrototypeOf(s); // true
String.prototype.isPrototypeOf(s); // true
Array.prototype.isPrototypeOf(s); // false

Object.prototype.propertyIsEnumerable(prop)

如果目标属性能在for in循环中被显示出来，该方法就返回true

var a = [1,2,3];
a.propertyIsEnumerable('length'); // false
a.propertyIsEnumerable(0); // true

在ES5中附加的Object属性

在ES3中，除了一些内置属性（如：Math.PI），对象的所有的属性在任何时候都可以被修改、插入、删除。在ES5中，我们可以设置属性是否可以被改变或是被删除——在这之前，它是内置属性的特权。ES5中引入了属性描述符的概念，我们可以通过它对所定义的属性有更大的控制权。这些属性描述符（特性）包括：

value——当试图获取属性时所返回的值。 writable——该属性是否可写。 enumerable——该属性在for in循环中是否会被枚举 configurable——该属性是否可被删除。 set()——该属性的更新操作所调用的函数。 get()——获取属性值时所调用的函数。 另外，数据描述符（其中属性为：enumerable，configurable，value，writable）与存取描述符（其中属性为enumerable，configurable，set()，get()）之间是有互斥关系的。在定义了set()和get()之后，描述符会认为存取操作已被 定义了，其中再定义value和writable会引起错误。 以下是ES3风格的属性定义方式：

var person = {};
person.legs = 2;

以下是等价的ES5通过数据描述符定义属性的方式：

var person = {};
Object.defineProperty(person, 'legs', {
    value: 2,
    writable: true,
    configurable: true,
    enumerable: true
});

其中， 除了value的默认值为undefined以外，其他的默认值都为false。这就意味着，如果想要通过这一方式定义一个可写的属性，必须显示将它们设为true。 或者，我们也可以通过ES5的存储描述符来定义：

var person = {};
Object.defineProperty(person, 'legs', {
    set:function(v) {
        return this.value = v;
    },
    get: function(v) {
        return this.value;
    },
    configurable: true,
    enumerable: true
});
person.legs = 2;

这样一来，多了许多可以用来描述属性的代码，如果想要防止别人篡改我们的属性，就必须要用到它们。此外，也不要忘了浏览器向后兼容ES3方面所做的考虑。例如，跟添加Array.prototype属性不一样，我们不能再旧版的浏览器中使用shim这一特性。 另外，我们还可以（通过定义nonmalleable属性），在具体行为中运用这些描述符：

var person = {};
Object.defineProperty(person, 'heads', {value: 1});
person.heads = 0; // 0
person.heads; // 1  (改不了)
delete person.heads; // false
person.heads // 1 (删不掉)

Object.defineProperty(obj, prop, descriptor) (ES5)

具体用法可参见上文，或者查看MDN。 MDN Object.defineProperty(obj, descriptor)(opens new window)

Vue.js文档：如何追踪变化 (opens new window)把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

Object.defineProperties(obj, props) (ES5)

该方法的作用与defineProperty()基本相同，只不过它可以用来一次定义多个属性。 比如：

var glass = Object.defineProperties({}, {
    'color': {
        value: 'transparent',
        writable: true
    },
    'fullness': {
        value: 'half',
        writable: false
    }
});
glass.fullness; // 'half'

Object.getPrototypeOf(obj) (ES5)

之前在ES3中，我们往往需要通过Object.prototype.isPrototypeOf()去猜测某个给定的对象的原型是什么，如今在ES5中，我们可以直接询问改对象“你的原型是什么？”

Object.getPrototypeOf([]) === Array.prototype; // true
Object.getPrototypeOf(Array.prototype) === Object.prototype; // true
Object.getPrototypeOf(Object.prototype) === null; // true

Object.create(obj, descr) (ES5)

该方法主要用于创建一个新对象，并为其设置原型，用（上述）属性描述符来定义对象的原型属性。

var parent = {hi: 'Hello'};
var o = Object.create(parent, {
    prop: {
        value: 1
    }
});
o.hi; // 'Hello'
// 获得它的原型
Object.getPrototypeOf(parent) === Object.prototype; // true 说明parent的原型是Object.prototype
Object.getPrototypeOf(o); // {hi: "Hello"} // 说明o的原型是{hi: "Hello"}
o.hasOwnProperty('hi'); // false 说明hi是原型上的
o.hasOwnProperty('prop'); // true 说明prop是原型上的自身上的属性。

现在，我们甚至可以用它来创建一个完全空白的对象，这样的事情在ES3中可是做不到的。

var o = Object.create(null);
typeof o.toString(); // 'undefined'

Object.getOwnPropertyDesciptor(obj, property) (ES5)

该方法可以让我们详细查看一个属性的定义。甚至可以通过它一窥那些内置的，之前不可见的隐藏属性。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString');
// {writable: true, enumerable: false, configurable: true, value: ƒ toString()}

Object.getOwnPropertyNames(obj) (ES5)

该方法返回一个数组，其中包含了当前对象所有属性的名称（字符串），不论它们是否可枚举。当然，也可以用Object.keys()来单独返回可枚举的属性。

Object.getOwnPropertyNames(Object.prototype);
// ["__defineGetter__", "__defineSetter__", "hasOwnProperty", "__lookupGetter__", "__lookupSetter__", "propertyIsEnumerable", "toString", "valueOf", "__proto__", "constructor", "toLocaleString", "isPrototypeOf"]
Object.keys(Object.prototype);
// []
Object.getOwnPropertyNames(Object);
// ["length", "name", "arguments", "caller", "prototype", "assign", "getOwnPropertyDescriptor", "getOwnPropertyDescriptors", "getOwnPropertyNames", "getOwnPropertySymbols", "is", "preventExtensions", "seal", "create", "defineProperties", "defineProperty", "freeze", "getPrototypeOf", "setPrototypeOf", "isExtensible", "isFrozen", "isSealed", "keys", "entries", "values"]
Object.keys(Object);
// []

Object.preventExtensions(obj) (ES5)

Object.isExtensible(obj) (ES5)

preventExtensions()方法用于禁止向某一对象添加更多属性，而isExtensible()方法则用于检查某对象是否还可以被添加属性。

var deadline = {};
Object.isExtensible(deadline); // true
deadline.date = 'yesterday'; // 'yesterday'
Object.preventExtensions(deadline);
Object.isExtensible(deadline); // false
deadline.date = 'today';
deadline.date; // 'today'
// 尽管向某个不可扩展的对象中添加属性不算是一个错误操作，但它没有任何作用。
deadline.report = true;
deadline.report; // undefined

Object.seal(obj) (ES5)

Object.isSeal(obj) (ES5)

seal()方法可以让一个对象密封，并返回被密封后的对象。 seal()方法的作用与preventExtensions()基本相同，但除此之外，它还会将现有属性 设置成不可配置。也就是说，在这种情况下，我们只能变更现有属性的值，但不能删除或（用defineProperty()）重新配置这些属性，例如不能将一个可枚举的属性改成不可枚举。

var person = {legs:2};
// person === Object.seal(person); // true
Object.isSealed(person); // true
Object.getOwnPropertyDescriptor(person, 'legs');
// {value: 2, writable: true, enumerable: true, configurable: false}
delete person.legs; // false (不可删除，不可配置)
Object.defineProperty(person, 'legs',{value:2});
person.legs; // 2
person.legs = 1;
person.legs; // 1 (可写)
Object.defineProperty(person, "legs", { get: function() { return "legs"; } });
// 抛出TypeError异常

Object.freeze(obj) (ES5)

Object.isFrozen(obj) (ES5)

freeze()方法用于执行一切不受seal()方法限制的属性值变更。Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。

var deadline = Object.freeze({date: 'yesterday'});
deadline.date = 'tomorrow';
deadline.excuse = 'lame';
deadline.date; // 'yesterday'
deadline.excuse; // undefined
Object.isSealed(deadline); // true;
Object.isFrozen(deadline); // true
Object.getOwnPropertyDescriptor(deadline, 'date');
// {value: "yesterday", writable: false, enumerable: true, configurable: false} (不可配置，不可写)
Object.keys(deadline); // ['date'] (可枚举)

Object.keys(obj) (ES5)

该方法是一种特殊的for-in循环。它只返回当前对象的属性（不像for-in），而且这些属性也必须是可枚举的（这点和Object.getOwnPropertyNames()不同，不论是否可以枚举）。返回值是一个字符串数组。

Object.prototype.customProto = 101;
Object.getOwnPropertyNames(Object.prototype);
// [..., "constructor", "toLocaleString", "isPrototypeOf", "customProto"]
Object.keys(Object.prototype); // ['customProto']
var o = {own: 202};
o.customProto; // 101
Object.keys(o); // ['own']

四、在ES6中附加的Object属性

Object.is(value1, value2) (ES6)

该方法用来比较两个值是否严格相等。它与严格比较运算符（===）的行为基本一致。 不同之处只有两个：一是+0不等于-0，而是NaN等于自身。

Object.is('若川', '若川'); // true
Object.is({},{}); // false
Object.is(+0, -0); // false
+0 === -0; // true
Object.is(NaN, NaN); // true
NaN === NaN; // false

ES5可以通过以下代码部署Object.is

Object.defineProperty(Object, 'is', {
    value: function() {x, y} {
        if (x === y) {
           // 针对+0不等于-0的情况
           return x !== 0 || 1 / x === 1 / y;
        }
        // 针对 NaN的情况
        return x !== x && y !== y;
    },
    configurable: true,
    enumerable: false,
    writable: true
});

Object.assign(target, ...sources) (ES6)

该方法用来源对象（source）的所有可枚举的属性复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象target，后面的参数都是源对象（source）。只有一个参数不是对象，就会抛出TypeError错误。

var target = {a: 1};
var source1 = {b: 2};
var source2 = {c: 3};
obj = Object.assign(target, source1, source2);
target; // {a:1,b:2,c:3}
obj; // {a:1,b:2,c:3}
target === obj; // true
// 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
var source3 = {a:2,b:3,c:4};
Object.assign(target, source3);
target; // {a:2,b:3,c:4}

Object.assign只复制自身属性，不可枚举的属性（enumerable为false）和继承的属性不会被复制。

Object.assign({b: 'c'},
    Object.defineProperty({}, 'invisible', {
        enumerable: false,
        value: 'hello'
    })
);
// {b: 'c'}

属性名为Symbol值的属性，也会被Object.assign()复制。

Object.assign({a: 'b'}, {[Symbol('c')]: 'd'});
// {a: 'b', Symbol(c): 'd'}

对于嵌套的对象，Object.assign()的处理方法是替换，而不是添加。

Object.assign({a: {b:'c',d:'e'}}, {a:{b:'hello'}});
// {a: {b:'hello'}}

对于数组，Object.assign()把数组视为属性名为0、1、2的对象。

Object.assign([1,2,3], [4,5]);
// [4,5,3]

Object.getOwnPropertySymbols(obj) (ES6)

该方法会返回一个数组，该数组包含了指定对象自身的（非继承的）所有 symbol 属性键。 该方法和 Object.getOwnPropertyNames() 类似，但后者返回的结果只会包含字符串类型的属性键，也就是传统的属性名。

Object.getOwnPropertySymbols({a: 'b', [Symbol('c')]: 'd'});
// [Symbol(c)]

Object.setPrototypeOf(obj, prototype) (ES6)

该方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或 null。 __proto__属性用来读取或设置当前对象的prototype对象。目前，所有浏览器（包括IE11）都部署了这个属性。

// ES6写法
var obj = {
    method: function(){
        // code ...
    }
};
// obj.__proto__ = someOtherObj;
// ES5写法
var obj = Object.create(someOtherObj);
obj.method = function(){
    // code ...
};

该属性没有写入ES6的正文，而是写入了附录。__proto__前后的双下划线说明它本质上是一个内部属性，而不是正式对外的一个API。无论从语义的角度，还是从兼容性的角度，都不要使用这个属性。而是使用Object.setPrototypeOf()（写操作），Object.getPrototypeOf()（读操作），或Object.create()（生成操作）代替。 在实现上，__proto__调用的Object.prototype.__proto__。 Object.setPrototypeOf()方法的作用与__proto__作用相同，用于设置一个对象的prototype对象。它是ES6正式推荐的设置原型对象的方法。

在ES8中附加的Object属性

Object.getOwnPropertyDescriptors(obj) (ES8)

该方法基本与Object.getOwnPropertyDescriptor(obj, property)用法一致，只不过它可以用来获取一个对象的所有自身属性的描述符。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString');
// {writable: true, enumerable: false, configurable: true, value: ƒ toString()}
Object.getOwnPropertyDescriptors(Object.prototype); // 可以自行在浏览器控制台查看效果。

Object.values(obj) (ES8)

Object.values() 方法与Object.keys类似。返回一个给定对象自己的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于for-in循环枚举原型链中的属性 )。

var obj = {a:1,b:2,c:3};
Object.keys(obj); // ['a','b','c']
Object.values(obj); // [1,2,3]

Object.entries(obj) (ES8)

Object.entries() 方法返回一个给定对象自己的可枚举属性[key，value]对的数组，数组中键值对的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致（区别在于一个for-in循环也枚举原型链中的属性）。

var obj = {a:1,b:2,c:3};
Object.keys(obj); // ['a','b','c']
Object.values(obj); // [1,2,3]
Object.entries(obj); // [['a',1],['b',2],['c',3]]

六、在ES10中附加的Object属性

Object.fromEntries(iterable) (ES10)

Object.fromEntries()方法返回一个给定可迭代对象（类似Array、Map或其他可迭代对象）对应属性的新对象。

Object.fromEntries() 是 Object.entries()的逆操作。

var arr = [['a',1],['b',2],['c',3]];
Object.fromEntries(obj); // {a: 1, b: 2, c: 3}
var entries = new Map([
  ['name', '若川'],
  ['age', 18]
]);
Object.fromEntries(entries) // {name: '若川', age: 18}

小结

细心的读者可能会发现MDN上还有一些API，本文没有列举到。因为那些是非标准的API。熟悉对象的API对理解原型和原型链相关知识会有一定帮助。常用的API主要有Object.prototype.toString()，Object.prototype.hasOwnProperty()， Object.getPrototypeOf(obj)，Object.create()，Object.defineProperty，Object.keys(obj)，Object.assign()。

参考资料

MDN Object API(opens new window)
JavaScript面向对象编程指南（第2版）（豆瓣读书链接）(opens new window)
阮一峰 ES6标准入门2(opens new window)

欢迎阅读我的更多文章。

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数（MDN 文档：Function.prototype.call()）。

语法：

fun.call(thisArg, arg1, arg2, ...)

thisArg
在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, ...
指定的参数列表

返回值
返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。

apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数（MDN 文档：Function.prototype.apply()）。

func.apply(thisArg, [argsArray])

thisArg
可选的。在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

argsArray
可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或  undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

返回值
调用有指定this值和参数的函数的结果。 直接先看例子1

call 和 apply 的异同

相同点：
1、call和apply的第一个参数thisArg，都是func运行时指定的this。而且，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

2、都可以只传递一个参数。

不同点：apply只接收两个参数，第二个参数可以是数组也可以是类数组，其实也可以是对象，后续的参数忽略不计。call接收第二个及以后一系列的参数。

看两个简单例子1和2：

// 例子1：浏览器环境 非严格模式下
var doSth = function(a, b){
    console.log(this);
    console.log([a, b]);
}
doSth.apply(null, [1, 2]); // this是window  // [1, 2]
doSth.apply(0, [1, 2]); // this 是 Number(0) // [1, 2]
doSth.apply(true); // this 是 Boolean(true) // [undefined, undefined]
doSth.call(undefined, 1, 2); // this 是 window // [1, 2]
doSth.call('0', 1, {a: 1}); // this 是 String('0') // [1, {a: 1}]

// 例子2：浏览器环境 严格模式下
'use strict';
var doSth2 = function(a, b){
    console.log(this);
    console.log([a, b]);
}
doSth2.call(0, 1, 2); // this 是 0 // [1, 2]
doSth2.apply('1'); // this 是 '1' // [undefined, undefined]
doSth2.apply(null, [1, 2]); // this 是 null // [1, 2]

typeof 有7种类型（undefined number string boolean symbol object function），笔者都验证了一遍：更加验证了相同点第一点，严格模式下，函数的this值就是call和apply的第一个参数thisArg，非严格模式下，thisArg值被指定为 null 或 undefined 时this值会自动替换为指向全局对象，原始值则会被自动包装，也就是new Object()。

重新认识了call和apply会发现：它们作用都是一样的，改变函数里的this指向为第一个参数thisArg，如果明确有多少参数，那可以用call，不明确则可以使用apply。也就是说完全可以不使用call，而使用apply代替。
也就是说，我们只需要模拟实现apply，call可以根据参数个数都放在一个数组中，给到apply即可。

模拟实现 apply

既然准备模拟实现apply，那先得看看ES5规范。ES5规范 英文版，ES5规范 中文版。apply的规范下一个就是call的规范，可以点击打开新标签页去查看，这里摘抄一部分。

Function.prototype.apply (thisArg, argArray)
当以 thisArg 和 argArray 为参数在一个 func 对象上调用 apply 方法，采用如下步骤：

• 如果 IsCallable(func) 是 false, 则抛出一个 TypeError 异常。
• 如果 argArray 是 null 或 undefined, 则返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。
• 返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。
• 如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常。
  5~8 略
• 提供 thisArg 作为 this 值并以 argList 作为参数列表，调用 func 的 [[Call]] 内部方法，返回结果。
  apply 方法的 length 属性是 2。

在外面传入的 thisArg 值会修改并成为 this 值。thisArg 是 undefined 或 null 时它会被替换成全局对象，所有其他值会被应用 ToObject 并将结果作为 this 值，这是第三版引入的更改。

结合上文和规范，如何将函数里的this指向第一个参数thisArg呢，这是一个问题。 这时候请出例子 3：

// 浏览器环境 非严格模式下
var doSth = function(a, b){
    console.log(this);
    console.log(this.name);
    console.log([a, b]);
}
var student = {
    name: '若川',
    doSth: doSth,
};
student.doSth(1, 2); // this === student // true // '若川' // [1, 2]
doSth.apply(student, [1, 2]); // this === student // true // '若川' // [1, 2]

可以得出结论1：在对象student上加一个函数doSth，再执行这个函数，这个函数里的this就指向了这个对象。那也就是可以在thisArg上新增调用函数，执行后删除这个函数即可。 知道这些后，我们试着容易实现第一版本：

// 浏览器环境 非严格模式
function getGlobalObject(){
    return this;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){ // `apply` 方法的 `length` 属性是 `2`。
    // 1.如果 `IsCallable(func)` 是 `false`, 则抛出一个 `TypeError` 异常。
    if(typeof this !== 'function'){
        throw new TypeError(this + ' is not a function');
    }

    // 2.如果 argArray 是 null 或 undefined, 则
    // 返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。
    if(typeof argsArray === 'undefined' || argsArray === null){
        argsArray = [];
    }
    
    // 3.如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常 .
    if(argsArray !== new Object(argsArray)){
        throw new TypeError('CreateListFromArrayLike called on non-object');
    }

    if(typeof thisArg === 'undefined' || thisArg === null){
        // 在外面传入的 thisArg 值会修改并成为 this 值。
        // ES3: thisArg 是 undefined 或 null 时它会被替换成全局对象 浏览器里是window
        thisArg = getGlobalObject();
    }

    // ES3: 所有其他值会被应用 ToObject 并将结果作为 this 值，这是第三版引入的更改。
    thisArg = new Object(thisArg);
    var __fn = '__fn';
    thisArg[__fn] = this;
    // 9.提供 thisArg 作为 this 值并以 argList 作为参数列表，调用 func 的 [[Call]] 内部方法，返回结果
    var result = thisArg[__fn](...argsArray);
    delete thisArg[__fn];
    return result;
};

实现第一版后，很容易找出两个问题：

1.__fn 同名覆盖问题，thisArg对象上有__fn，那就被覆盖了然后被删除了。

针对问题 1 解决方案一：采用ES6 Sybmol() 独一无二的。可以本来就是模拟ES3的方法。如果面试官不允许用呢。 解决方案二：自己用Math.random()模拟实现独一无二的key。面试时可以直接用生成时间戳即可。

// 生成UUID 通用唯一识别码
// 大概生成 这样一串 '18efca2d-6e25-42bf-a636-30b8f9f2de09'
function generateUUID(){
    var i, random;
    var uuid = '';
    for (i = 0; i < 32; i++) {
        random = Math.random() * 16 | 0;
        if (i === 8 || i === 12 || i === 16 || i === 20) {
            uuid += '-';
        }
        uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random))
            .toString(16);
    }
    return uuid;
}
// 简单实现
// '__' + new Date().getTime();

如果这个key万一这对象中还是有，为了保险起见，可以做一次缓存操作。比如如下代码：

var student = {
    name: '若川',
    doSth: 'doSth',
};
var originalVal = student.doSth;
var hasOriginalVal = student.hasOwnProperty('doSth');
student.doSth = function(){};
delete student.doSth;
// 如果没有，`originalVal`则为undefined，直接赋值新增了一个undefined，这是不对的，所以需判断一下。
if(hasOriginalVal){
    student.doSth = originalVal;
}
console.log('student:', student); // { name: '若川', doSth: 'doSth' }

2.使用了ES6扩展符...
解决方案一：采用eval来执行函数。

eval把字符串解析成代码执行。
MDN 文档：eval

语法：

eval(string)

参数：
string
表示JavaScript表达式，语句或一系列语句的字符串。表达式可以包含变量以及已存在对象的属性。

返回值
执行指定代码之后的返回值。如果返回值为空，返回undefined
解决方案二：但万一面试官不允许用eval呢，毕竟eval是魔鬼。可以采用new Function()来生成执行函数。 MDN 文档：Function

语法：

new Function ([arg1[, arg2[, ...argN]],] functionBody)

参数
arg1, arg2, ... argN

被函数使用的参数的名称必须是合法命名的。参数名称是一个有效的JavaScript标识符的字符串，或者一个用逗号分隔的有效字符串的列表;例如“×”，“theValue”，或“A，B”。

functionBody
一个含有包括函数定义的JavaScript语句的字符串。
接下来看两个例子：

简单例子：
var sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6));

// 稍微复杂点的例子：
var student = {
    name: '若川',
    doSth: function(argsArray){
        console.log(argsArray);
        console.log(this.name);
    }
};
// var result = student.doSth(['Rowboat', 18]);
// 用new Function()生成函数并执行返回结果
var result = new Function('return arguments[0][arguments[1]](arguments[2][0], arguments[2][1])')(student, 'doSth', ['Rowboat', 18]);
// 个数不定
// 所以可以写一个函数生成函数代码：
function generateFunctionCode(argsArrayLength){
    var code = 'return arguments[0][arguments[1]](';
    for(var i = 0; i < argsArrayLength; i++){
        if(i > 0){
            code += ',';
        }
        code += 'arguments[2][' + i + ']';
    }
    code += ')';
    // return arguments[0][arguments[1]](arg1, arg2, arg3...)
    return code;
}

你可能不知道在ES3、ES5中 undefined 是能修改的

可能大部分人不知道。ES5中虽然在全局作用域下不能修改，但在局部作用域中也是能修改的，不信可以复制以下测试代码在控制台执行下。虽然一般情况下是不会的去修改它。

function test(){
    var undefined = 3;
    console.log(undefined); // chrome下也是 3
}
test();

所以判断一个变量a是不是undefined，更严谨的方案是typeof a === 'undefined'或者a === void 0;这里面用的是void，void的作用是计算表达式，始终返回undefined，也可以这样写void(0)。 更多可以查看韩子迟的这篇文章：为什么用「void 0」代替「undefined」解决了这几个问题，比较容易实现如下代码。

使用 new Function() 模拟实现的apply

// 浏览器环境 非严格模式
function getGlobalObject(){
    return this;
}
function generateFunctionCode(argsArrayLength){
    var code = 'return arguments[0][arguments[1]](';
    for(var i = 0; i < argsArrayLength; i++){
        if(i > 0){
            code += ',';
        }
        code += 'arguments[2][' + i + ']';
    }
    code += ')';
    // return arguments[0][arguments[1]](arg1, arg2, arg3...)
    return code;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){ // `apply` 方法的 `length` 属性是 `2`。
    // 1.如果 `IsCallable(func)` 是 `false`, 则抛出一个 `TypeError` 异常。
    if(typeof this !== 'function'){
        throw new TypeError(this + ' is not a function');
    }
    // 2.如果 argArray 是 null 或 undefined, 则
    // 返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。
    if(typeof argsArray === 'undefined' || argsArray === null){
        argsArray = [];
    }
    // 3.如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常 .
    if(argsArray !== new Object(argsArray)){
        throw new TypeError('CreateListFromArrayLike called on non-object');
    }
    if(typeof thisArg === 'undefined' || thisArg === null){
        // 在外面传入的 thisArg 值会修改并成为 this 值。
        // ES3: thisArg 是 undefined 或 null 时它会被替换成全局对象 浏览器里是window
        thisArg = getGlobalObject();
    }
    // ES3: 所有其他值会被应用 ToObject 并将结果作为 this 值，这是第三版引入的更改。
    thisArg = new Object(thisArg);
    var __fn = '__' + new Date().getTime();
    // 万一还是有 先存储一份，删除后，再恢复该值
    var originalVal = thisArg[__fn];
    // 是否有原始值
    var hasOriginalVal = thisArg.hasOwnProperty(__fn);
    thisArg[__fn] = this;
    // 9.提供 `thisArg` 作为 `this` 值并以 `argList` 作为参数列表，调用 `func` 的 `[[Call]]` 内部方法，返回结果。
    // ES6版
    // var result = thisArg[__fn](...args);
    var code = generateFunctionCode(argsArray.length);
    var result = (new Function(code))(thisArg, __fn, argsArray);
    delete thisArg[__fn];
    if(hasOriginalVal){
        thisArg[__fn] = originalVal;
    }
    return result;
};

利用模拟实现的apply模拟实现call

Function.prototype.callFn = function call(thisArg){
    var argsArray = [];
    var argumentsLength = arguments.length;
    for(var i = 0; i < argumentsLength - 1; i++){
        // argsArray.push(arguments[i + 1]);
        argsArray[i] = arguments[i + 1];
    }
    console.log('argsArray:', argsArray);
    return this.applyFn(thisArg, argsArray);
}
// 测试例子
var doSth = function (name, age){
    var type = Object.prototype.toString.call(this);
    console.log(typeof doSth);
    console.log(this === firstArg);
    console.log('type:', type);
    console.log('this:', this);
    console.log('args:', [name, age], arguments);
    return 'this--';
};

var name = 'window';

var student = {
    name: '若川',
    age: 18,
    doSth: 'doSth',
    __fn: 'doSth',
};
var firstArg = student;
var result = doSth.applyFn(firstArg, [1, {name: 'Rowboat'}]);
var result2 = doSth.callFn(firstArg, 1, {name: 'Rowboat'});
console.log('result:', result);
console.log('result2:', result2);

细心的你会发现注释了这一句argsArray.push(arguments[i + 1]);，事实上push方法，内部也有一层循环。所以理论上不使用push性能会更好些。面试官也可能根据这点来问时间复杂度和空间复杂度的问题。

// 看看V8引擎中的具体实现：
function ArrayPush() {
    var n = TO_UINT32( this.length );    // 被push的对象的length
    var m = %_ArgumentsLength();     // push的参数个数
    for (var i = 0; i < m; i++) {
        this[ i + n ] = %_Arguments( i );   // 复制元素     (1)
    }
    this.length = n + m;      // 修正length属性的值    (2)
    return this.length;
};

行文至此，就基本结束了，你可能还发现就是写的非严格模式下，thisArg原始值会包装成对象，添加函数并执行，再删除。而严格模式下还是原始值这个没有实现，而且万一这个对象是冻结对象呢，Object.freeze({})，是无法在这个对象上添加属性的。所以这个方法只能算是非严格模式下的简版实现。最后来总结一下。

总结

通过MDN认识call和apply，阅读ES5规范，到模拟实现apply，再实现call。
就是使用在对象上添加调用apply的函数执行，这时的调用函数的this就指向了这个thisArg，再返回结果。引出了ES6 Symbol，ES6的扩展符...、eval、new Function()，严格模式等。

事实上，现实业务场景不需要去模拟实现call和apply,毕竟是ES3就提供的方法。但面试官可以通过这个面试题考察候选人很多基础知识。如：call、apply的使用。ES6 Symbol，ES6的扩展符...，eval，new Function()，严格模式，甚至时间复杂度和空间复杂度等。

读者发现有不妥或可改善之处，欢迎指出。另外觉得写得不错，可以点个赞，也是对笔者的一种支持。

// 最终版版 删除注释版，详细注释看文章
// 浏览器环境 非严格模式
function getGlobalObject(){
    return this;
}
function generateFunctionCode(argsArrayLength){
    var code = 'return arguments[0][arguments[1]](';
    for(var i = 0; i < argsArrayLength; i++){
        if(i > 0){
            code += ',';
        }
        code += 'arguments[2][' + i + ']';
    }
    code += ')';
    return code;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){
    if(typeof this !== 'function'){
        throw new TypeError(this + ' is not a function');
    }
    if(typeof argsArray === 'undefined' || argsArray === null){
        argsArray = [];
    }
    if(argsArray !== new Object(argsArray)){
        throw new TypeError('CreateListFromArrayLike called on non-object');
    }
    if(typeof thisArg === 'undefined' || thisArg === null){
        thisArg = getGlobalObject();
    }
    thisArg = new Object(thisArg);
    var __fn = '__' + new Date().getTime();
    var originalVal = thisArg[__fn];
    var hasOriginalVal = thisArg.hasOwnProperty(__fn);
    thisArg[__fn] = this;
    var code = generateFunctionCode(argsArray.length);
    var result = (new Function(code))(thisArg, __fn, argsArray);
    delete thisArg[__fn];
    if(hasOriginalVal){
        thisArg[__fn] = originalVal;
    }
    return result;
};
Function.prototype.callFn = function call(thisArg){
    var argsArray = [];
    var argumentsLength = arguments.length;
    for(var i = 0; i < argumentsLength - 1; i++){
        argsArray[i] = arguments[i + 1];
    }
    return this.applyFn(thisArg, argsArray);
}

new Vue({
    el: '#app',
    mounted(){},
});

我们在面试的时候，面试官可能会问：是否想过new到底做了什么，怎么模拟实现呢？

附上我在之前的文章中写过的一段话：已经有很多模拟实现new操作符的文章，为什么我还要写一遍呢？学习就好比是座大山，人们沿着不同的路登山，分享着自己看到的风景。你不一定能看到别人看到的风景，体会到别人的心情。只有自己去登山，才能看到不一样的风景，体会才更加深刻。

new 操作符做了什么

先看简单例子1：

// 例子1
function Student(){
}
var student = new Student();
console.log(student); // {}
// student 是一个对象。
console.log(Object.prototype.toString.call(student)); // [object Object]
// 我们知道平时声明对象也可以用new Object(); 只是看起来更复杂
// 顺便提一下 `new Object`(不推荐)和Object()也是一样的效果
// 可以猜测内部做了一次判断，用new调用
/** if (!(this instanceof Object)) {
*    return new Object();
*  }
*/
var obj = new Object();
console.log(obj) // {}
console.log(Object.prototype.toString.call(student)); // [object Object]

typeof Student === 'function' // true
typeof Object === 'function' // true

从这里例子中，我们可以看出：一个函数用new操作符来调用后，生成了一个全新的对象。而且Student和Object都是函数，只不过Student是我们自定义的，Object是JS本身就内置的。 再来看下控制台输出图，感兴趣的读者可以在控制台试试。

与new Object() 生成的对象不同的是new Student()生成的对象中间还嵌套了一层__proto__，它的constructor是Student这个函数。

// 也就是说：
student.constructor === Student;
Student.prototype.constructor === Student;

小结1：从这个简单例子来看，new操作符做了两件事：

1. 创建了一个全新的对象。
2. 这个对象会被执行[[Prototype]]（也就是__proto__）链接。

接下来我们再来看升级版的例子2：

// 例子2
function Student(name){
    console.log('赋值前-this', this); // {}
    this.name = name;
    console.log('赋值后-this', this); // {name: '若川'}
}
var student = new Student('若川');
console.log(student); // {name: '若川'}

由此可以看出：这里Student函数中的this指向new Student()生成的对象student。

小结2：从这个例子来看，new操作符又做了一件事：

1. 生成的新对象会绑定到函数调用的this。

接下来继续看升级版例子3：

// 例子3
function Student(name){
    this.name = name;
    // this.doSth();
}
Student.prototype.doSth = function() {
    console.log(this.name);
};
var student1 = new Student('若');
var student2 = new Student('川');
console.log(student1, student1.doSth()); // {name: '若'} '若'
console.log(student2, student2.doSth()); // {name: '川'} '川'
student1.__proto__ === Student.prototype; // true
student2.__proto__ === Student.prototype; // true
// __proto__ 是浏览器实现的查看原型方案。
// 用ES5 则是：
Object.getPrototypeOf(student1) === Student.prototype; // true
Object.getPrototypeOf(student2) === Student.prototype; // true

关于JS的原型关系笔者之前看到这张图，觉得很不错，分享给大家。

小结3：这个例子3再一次验证了小结1中的第2点。也就是这个对象会被执行[[Prototype]]（也就是__proto__）链接。并且通过new Student()创建的每个对象将最终被[[Prototype]]链接到这个Student.protytype对象上。

细心的同学可能会发现这三个例子中的函数都没有返回值。那么有返回值会是怎样的情形呢。 那么接下来请看例子4

// 例子4
function Student(name){
    this.name = name;
    // Null（空） null
    // Undefined（未定义） undefined
    // Number（数字） 1
    // String（字符串）'1'
    // Boolean（布尔） true
    // Symbol（符号）（第六版新增） symbol
    
    // Object（对象） {}
        // Function（函数） function(){}
        // Array（数组） []
        // Date（日期） new Date()
        // RegExp（正则表达式）/a/
        // Error （错误） new Error() 
    // return /a/;
}
var student = new Student('若川');
console.log(student); {name: '若川'}

笔者测试这七种类型后MDN JavaScript类型，得出的结果是：前面六种基本类型都会正常返回{name: '若川'}，后面的Object(包含Functoin, Array, Date, RegExg, Error)都会直接返回这些值。

由此得出 小结4：

1. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。

结合这些小结，整理在一起就是：

1. 创建了一个全新的对象。
2. 这个对象会被执行[[Prototype]]（也就是__proto__）链接。
3. 生成的新对象会绑定到函数调用的this。
4. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
5. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。

new 模拟实现

知道了这些现象，我们就可以模拟实现new操作符。直接贴出代码和注释

/**
 * 模拟实现 new 操作符
 * @param  {Function} ctor [构造函数]
 * @return {Object|Function|Regex|Date|Error}      [返回结果]
 */
function newOperator(ctor){
    if(typeof ctor !== 'function'){
      throw 'newOperator function the first param must be a function';
    }
    // ES6 new.target 是指向构造函数
    newOperator.target = ctor;
    // 1.创建一个全新的对象，
    // 2.并且执行[[Prototype]]链接
    // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。
    var newObj = Object.create(ctor.prototype);
    // ES5 arguments转成数组 当然也可以用ES6 [...arguments], Aarry.from(arguments);
    // 除去ctor构造函数的其余参数
    var argsArr = [].slice.call(arguments, 1);
    // 3.生成的新对象会绑定到函数调用的`this`。
    // 获取到ctor函数返回结果
    var ctorReturnResult = ctor.apply(newObj, argsArr);
    // 小结4 中这些类型中合并起来只有Object和Function两种类型 typeof null 也是'object'所以要不等于null，排除null
    var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
    var isFunction = typeof ctorReturnResult === 'function';
    if(isObject || isFunction){
        return ctorReturnResult;
    }
    // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`)，那么`new`表达式中的函数调用会自动返回这个新的对象。
    return newObj;
}

最后用模拟实现的newOperator函数验证下之前的例子3：

// 例子3 多加一个参数
function Student(name, age){
    this.name = name;
    this.age = age;
    // this.doSth();
    // return Error();
}
Student.prototype.doSth = function() {
    console.log(this.name);
};
var student1 = newOperator(Student, '若', 18);
var student2 = newOperator(Student, '川', 18);
// var student1 = new Student('若');
// var student2 = new Student('川');
console.log(student1, student1.doSth()); // {name: '若'} '若'
console.log(student2, student2.doSth()); // {name: '川'} '川'

student1.__proto__ === Student.prototype; // true
student2.__proto__ === Student.prototype; // true
// __proto__ 是浏览器实现的查看原型方案。
// 用ES5 则是：
Object.getPrototypeOf(student1) === Student.prototype; // true
Object.getPrototypeOf(student2) === Student.prototype; // true

可以看出，很符合new操作符。读者发现有不妥或可改善之处，欢迎指出。 回顾这个模拟new函数newOperator实现，最大的功臣当属于Object.create()这个ES5提供的API。

Object.create() 用法举例

笔者之前整理的一篇文章中也有讲过，可以翻看JavaScript 对象所有API解析

MDN Object.create()

Object.create(proto, [propertiesObject])方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 它接收两个参数，不过第二个可选参数是属性描述符（不常用，默认是undefined）。

var anotherObject = {
    name: '若川'
};
var myObject = Object.create(anotherObject, {
    age: {
        value：18,
    },
});
// 获得它的原型
Object.getPrototypeOf(anotherObject) === Object.prototype; // true 说明anotherObject的原型是Object.prototype
Object.getPrototypeOf(myObject); // {name: "若川"} // 说明myObject的原型是{name: "若川"}
myObject.hasOwnProperty('name'); // false; 说明name是原型上的。
myObject.hasOwnProperty('age'); // true 说明age是自身的
myObject.name; // '若川'
myObject.age; // 18;

对于不支持ES5的浏览器，MDN上提供了ployfill方案。

if (typeof Object.create !== "function") {
    Object.create = function (proto, propertiesObject) {
        if (typeof proto !== 'object' && typeof proto !== 'function') {
            throw new TypeError('Object prototype may only be an Object: ' + proto);
        } else if (proto === null) {
            throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
        }

        if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");

        function F() {}
        F.prototype = proto;
        return new F();
    };
}

到此，文章就基本写完了。感谢读者看到这里。

最后总结一下：

1. new做了什么：

1. 创建了一个全新的对象。
2. 这个对象会被执行[[Prototype]]（也就是__proto__）链接。
3. 生成的新对象会绑定到函数调用的this。
4. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
5. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。
6. 怎么模拟实现

// 去除了注释
function newOperator(ctor){
    if(typeof ctor !== 'function'){
      throw 'newOperator function the first param must be a function';
    }
    newOperator.target = ctor;
    var newObj = Object.create(ctor.prototype);
    var argsArr = [].slice.call(arguments, 1);
    var ctorReturnResult = ctor.apply(newObj, argsArr);
    var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
    var isFunction = typeof ctorReturnResult === 'function';
    if(isObject || isFunction){
        return ctorReturnResult;
    }
    return newObj;
}

读者发现有不妥或可改善之处，欢迎指出。

附上之前写文章写过的一段话：已经有很多关于this的文章，为什么自己还要写一遍呢。学习就好比是座大山，人们沿着不同的路登山，分享着自己看到的风景。你不一定能看到别人看到的风景，体会到别人的心情。只有自己去登山，才能看到不一样的风景，体会才更加深刻。

函数的this在调用时绑定的，完全取决于函数的调用位置（也就是函数的调用方法）。为了搞清楚this的指向是什么，必须知道相关函数是如何调用的。

全局上下文

非严格模式和严格模式中this都是指向顶层对象（浏览器中是window）。

this === window // true
'use strict'
this === window;
this.name = '若川';
console.log(this.name); // 若川

函数上下文

普通函数调用模式

// 非严格模式
var name = 'window';
var doSth = function(){
    console.log(this.name);
}
doSth(); // 'window'

你可能会误以为window.doSth()是调用的，所以是指向window。虽然本例中window.doSth确实等于doSth。name等于window.name。上面代码中这是因为在ES5中，全局变量是挂载在顶层对象（浏览器是window）中。 事实上，并不是如此。

// 非严格模式
let name2 = 'window2';
let doSth2 = function(){
    console.log(this === window);
    console.log(this.name2);
}
doSth2() // true, undefined

这个例子中let没有给顶层对象中（浏览器是window）添加属性，window.name2和window.doSth都是undefined。

严格模式中，普通函数中的this则表现不同，表现为undefined。

// 严格模式
'use strict'
var name = 'window';
var doSth = function(){
    console.log(typeof this === 'undefined');
    console.log(this.name);
}
doSth(); // true，// 报错，因为this是undefined

看过的《你不知道的JavaScript》上卷的读者，应该知道书上将这种叫做默认绑定。 对call，apply熟悉的读者会类比为：

doSth.call(undefined);
doSth.apply(undefined);

效果是一样的，call，apply作用之一就是用来修改函数中的this指向为第一个参数的。 第一个参数是undefined或者null，非严格模式下，是指向window。严格模式下，就是指向第一个参数。后文详细解释。
经常有这类代码（回调函数），其实也是普通函数调用模式。

var name = '若川';
setTimeout(function(){
    console.log(this.name);
}, 0);
// 语法
setTimeout(fn | code, 0, arg1, arg2, ...)
// 也可以是一串代码。也可以传递其他函数
// 类比 setTimeout函数内部调用fn或者执行代码`code`。
fn.call(undefined, arg1, arg2, ...);

对象中的函数（方法）调用模式

var name = 'window';
var doSth = function(){
    console.log(this.name);
}
var student = {
    name: '若川',
    doSth: doSth,
    other: {
        name: 'other',
        doSth: doSth,
    }
}
student.doSth(); // '若川'
student.other.doSth(); // 'other'
// 用call类比则为：
student.doSth.call(student);
// 用call类比则为：
student.other.doSth.call(student.other);

但往往会有以下场景，把对象中的函数赋值成一个变量了。 这样其实又变成普通函数了，所以使用普通函数的规则（默认绑定）。

var studentDoSth = student.doSth;
studentDoSth(); // 'window'
// 用call类比则为：
studentDoSth.call(undefined);

call、apply、bind 调用模式

上文提到call、apply，这里详细解读一下。先通过MDN认识下call和apply MDN 文档：Function.prototype.call()。

语法

fun.call(thisArg, arg1, arg2, ...)

thisArg
在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, ...
指定的参数列表
返回值
返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。
apply和call类似。只是参数不一样。它的参数是数组（或者类数组）。

根据参数thisArg的描述，可以知道，call就是改变函数中的this指向为thisArg，并且执行这个函数，这也就使 JavaScript 灵活很多。严格模式下，thisArg是原始值是值类型，也就是原始值。不会被包装成对象。举个例子：

var doSth = function(name){
    console.log(this);
    console.log(name);
}
doSth.call(2, '若川'); // Number{2}, '若川'
var doSth2 = function(name){
    'use strict';
    console.log(this);
    console.log(name);
}
doSth2.call(2, '若川'); // 2, '若川'

虽然一般不会把thisArg参数写成值类型。但还是需要知道这个知识。 之前写过一篇文章：面试官问：能否模拟实现JS的call和apply方法 就是利用对象上的函数this指向这个对象，来模拟实现call和apply的。感兴趣的读者思考如何实现，再去看看笔者的实现。

bind和call和apply类似，第一个参数也是修改this指向，只不过返回值是新函数，新函数也能当做构造函数（new）调用。 MDN Function.prototype.bind

bind()方法创建一个新的函数， 当这个新函数被调用时this键值为其提供的值，其参数列表前几项值为创建时指定的参数序列。
语法： fun.bind(thisArg[, arg1[, arg2[, ...]]])
参数： thisArg 调用绑定函数时作为this参数传递给目标函数的值。 如果使用new运算符构造绑定函数，则忽略该值。当使用bind在setTimeout中创建一个函数（作为回调提供）时，作为thisArg传递的任何原始值都将转换为object。如果没有提供绑定的参数，则执行作用域的this被视为新函数的thisArg。 arg1, arg2, ... 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。 返回值 返回由指定的this值和初始化参数改造的原函数拷贝。

之前也写过一篇文章：如何模拟实现 JS 的 bind 方法，就是利用call和apply指向这个thisArg参数，来模拟实现bind的。感兴趣的读者思考如何实现，再去看看笔者的实现。

构造函数调用模式

function Student(name){
    this.name = name;
    console.log(this); // {name: '若川'}
    // 相当于返回了
    // return this;
}
var result = new Student('若川');

使用new操作符调用函数，会自动执行以下步骤。

1. 创建了一个全新的对象。
2. 这个对象会被执行[[Prototype]]（也就是__proto__）链接。
3. 生成的新对象会绑定到函数调用的this。
4. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
5. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。

由此可以知道：new操作符调用时，this指向生成的新对象。 特别提醒一下，new调用时的返回值，如果没有显式返回对象或者函数，才是返回生成的新对象。

function Student(name){
    this.name = name;
    // return function f(){};
    // return {};
}
var result = new Student('若川');
console.log(result); {name: '若川'}
// 如果返回函数f，则result是函数f，如果是对象{}，则result是对象{}

很多人或者文章都忽略了这一点，直接简单用typeof判断对象。虽然实际使用时不会显示返回，但面试官会问到。

之前也写了一篇文章面试官问：能否模拟实现JS的new操作符，是使用apply来把this指向到生成的新生成的对象上。感兴趣的读者思考如何实现，再去看看笔者的实现。

原型链中的调用模式

function Student(name){
    this.name = name;
}
var s1 = new Student('若川');
Student.prototype.doSth = function(){
    console.log(this.name);
}
s1.doSth(); // '若川'

会发现这个似曾相识。这就是对象上的方法调用模式。自然是指向生成的新对象。 如果该对象继承自其它对象。同样会通过原型链查找。 上面代码使用 ES6中class写法则是：

class Student{
    constructor(name){
        this.name = name;
    }
    doSth(){
        console.log(this.name);
    }
}
let s1 = new Student('若川');
s1.doSth();

babel es6转换成es5的结果，可以去babeljs网站转换测试自行试试。

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Student = function () {
    function Student(name) {
        _classCallCheck(this, Student);

        this.name = name;
    }

    _createClass(Student, [{
        key: 'doSth',
        value: function doSth() {
            console.log(this.name);
        }
    }]);

    return Student;
}();

var s1 = new Student('若川');
s1.doSth();

由此看出，ES6的class也是通过构造函数模拟实现的，是一种语法糖。

箭头函数调用模式

先看箭头函数和普通函数的重要区别：

1、没有自己的this、super、arguments和new.target绑定。 2、不能使用new来调用。 3、没有原型对象。 4、不可以改变this的绑定。 5、形参名称不能重复。

箭头函数中没有this绑定，必须通过查找作用域链来决定其值。 如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this，否则this的值则被设置为全局对象。 比如：

var name = 'window';
var student = {
    name: '若川',
    doSth: function(){
        // var self = this;
        var arrowDoSth = () => {
            // console.log(self.name);
            console.log(this.name);
        }
        arrowDoSth();
    },
    arrowDoSth2: () => {
        console.log(this.name);
    }
}
student.doSth(); // '若川'
student.arrowDoSth2(); // 'window'

其实就是相当于箭头函数外的this是缓存的该箭头函数上层的普通函数的this。如果没有普通函数，则是全局对象（浏览器中则是window）。 也就是说无法通过call、apply、bind绑定箭头函数的this(它自身没有this)。而call、apply、bind可以绑定缓存箭头函数上层的普通函数的this。 比如：

var student = {
    name: '若川',
    doSth: function(){
        console.log(this.name);
        return () => {
            console.log('arrowFn:', this.name);
        }
    }
}
var person = {
    name: 'person',
}
student.doSth().call(person); // '若川'  'arrowFn:' '若川'
student.doSth.call(person)(); // 'person' 'arrowFn:' 'person'

DOM事件处理函数调用

addEventerListener、attachEvent、onclick

<button class="button">onclick</button>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var button = document.querySelector('button');
    button.onclick = function(ev){
        console.log(this);
        console.log(this === ev.currentTarget); // true
    }
    var list = document.querySelector('.list');
    list.addEventListener('click', function(ev){
        console.log(this === list); // true
        console.log(this === ev.currentTarget); // true
        console.log(this);
        console.log(ev.target);
    }, false);
</script>

onclick和addEventerListener是指向绑定事件的元素。 一些浏览器，比如IE6~IE8下使用attachEvent，this指向是window。 顺便提下：面试官也经常考察ev.currentTarget和ev.target的区别。 ev.currentTarget是绑定事件的元素，而ev.target是当前触发事件的元素。比如这里的分别是ul和li。 但也可能点击的是ul，这时ev.currentTarget和ev.target就相等了。

内联事件处理函数调用

<button class="btn1" onclick="console.log(this === document.querySelector('.btn1'))">点我呀</button>
<button onclick="console.log((function(){return this})());">再点我呀</button>

第一个是button本身，所以是true，第二个是window。这里跟严格模式没有关系。 当然我们现在不会这样用了，但有时不小心写成了这样，也需要了解。

其实this的使用场景还有挺多，比如对象object中的getter、setter的this，new Function()、eval。 但掌握以上几种，去分析其他的，就自然迎刃而解了。 使用比较多的还是普通函数调用、对象的函数调用、new调用、call、apply、bind调用、箭头函数调用。 那么他们的优先级是怎样的呢。

优先级

而箭头函数的this是上层普通函数的this或者是全局对象（浏览器中是window），所以排除，不算优先级。

var name = 'window';
var person = {
    name: 'person',
}
var doSth = function(){
    console.log(this.name);
    return function(){
        console.log('return:', this.name);
    }
}
var Student = {
    name: '若川',
    doSth: doSth,
}
// 普通函数调用
doSth(); // window
// 对象上的函数调用
Student.doSth(); // '若川'
// call、apply 调用
Student.doSth.call(person); // 'person'
new Student.doSth.call(person);

试想一下，如果是Student.doSth.call(person)先执行的情况下，那new执行一个函数。是没有问题的。 然而事实上，这代码是报错的。运算符优先级是new比点号低，所以是执行new (Student.doSth.call)(person) 而Function.prototype.call，虽然是一个函数（apply、bind也是函数），跟箭头函数一样，不能用new调用。所以报错了。

Uncaught TypeError: Student.doSth.call is not a constructor

这是因为函数内部有两个不同的方法：[[Call]]和[[Constructor]]。 当使用普通函数调用时，[[Call]]会被执行。当使用构造函数调用时，[[Constructor]]会被执行。call、apply、bind和箭头函数内部没有[[Constructor]]方法。

从上面的例子可以看出普通函数调用优先级最低，其次是对象上的函数。 call（apply、bind）调用方式和new调用方式的优先级，在《你不知道的JavaScript》是对比bind和new，引用了mdn的bind的ployfill实现，new调用时bind之后的函数，会忽略bind绑定的第一个参数，(mdn的实现其实还有一些问题，感兴趣的读者，可以看我之前的文章：面试官问：能否模拟实现JS的bind方法)，说明new的调用的优先级最高。 所以它们的优先级是new 调用 > call、apply、bind 调用 > 对象上的函数调用 > 普通函数调用。

总结

如果要判断一个运行中函数的 this 绑定， 就需要找到这个函数的直接调用位置。 找到之后 就可以顺序应用下面这四条规则来判断 this 的绑定对象。

1. new 调用：绑定到新创建的对象，注意：显示return函数或对象，返回值不是新创建的对象，而是显式返回的函数或对象。
   
2. call 或者 apply（ 或者 bind） 调用：严格模式下，绑定到指定的第一个参数。非严格模式下，null和undefined，指向全局对象（浏览器中是window），其余值指向被new Object()包装的对象。
   
3. 对象上的函数调用：绑定到那个对象。
   
4. 普通函数调用： 在严格模式下绑定到 undefined，否则绑定到全局对象。
   

ES6 中的箭头函数：不会使用上文的四条标准的绑定规则， 而是根据当前的词法作用域来决定this， 具体来说， 箭头函数会继承外层函数，调用的 this 绑定（ 无论 this 绑定到什么），没有外层函数，则是绑定到全局对象（浏览器中是window）。 这其实和 ES6 之前代码中的 self = this 机制一样。

DOM事件函数：一般指向绑定事件的DOM元素，但有些情况绑定到全局对象（比如IE6~IE8的attachEvent）。

一定要注意，有些调用可能在无意中使用普通函数绑定规则。 如果想“ 更安全” 地忽略 this 绑 定， 你可以使用一个对象， 比如ø = Object.create(null)， 以保护全局对象。

面试官考察this指向就可以考察new、call、apply、bind，箭头函数等用法。从而扩展到作用域、闭包、原型链、继承、严格模式等。这就是面试官乐此不疲的原因。

本文章学习的是v3.4.1版本。 unpkg.com源码地址：unpkg.com/jquery@3.4.…

jQuery github仓库

自执行匿名函数

(function(global, factory){

})(typeof window !== "underfined" ? window: this, function(window, noGlobal){

});

外界访问不到里面的变量和函数，里面可以访问到外界的变量，但里面定义了自己的变量，则不会访问外界的变量。 匿名函数将代码包裹在里面，防止与其他代码冲突和污染全局环境。 关于自执行函数不是很了解的读者可以参看这篇文章。 [译] JavaScript：立即执行函数表达式（IIFE）

浏览器环境下，最后把$ 和 jQuery函数挂载到window上，所以在外界就可以访问到$和jQuery了。

if ( !noGlobal ) {
	window.jQuery = window.$ = jQuery;
}
// 其中`noGlobal`参数只有在这里用到。

支持多种环境下使用 比如 commonjs、amd规范

commonjs 规范支持

commonjs实现 主要代表 nodejs

// global是全局变量，factory 是函数
( function( global, factory ) {

	//  使用严格模式
	"use strict";
	// Commonjs 或者 CommonJS-like  环境
	if ( typeof module === "object" && typeof module.exports === "object" ) {
		// 如果存在global.document 则返回factory(global, true);
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

// Pass this if window is not defined yet
// 第一个参数判断window，存在返回window，不存在返回this
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {});

amd 规范 主要代表 requirejs

if ( typeof define === "function" && define.amd ) {
	define( "jquery", [], function() {
		return jQuery;
	} );
}

cmd 规范 主要代表 seajs

很遗憾，jQuery源码里没有暴露对seajs的支持。但网上也有一些方案。这里就不具体提了。毕竟现在基本不用seajs了。

无 new 构造

实际上也是可以 new的，因为jQuery是函数。而且和不用new效果是一样的。 new显示返回对象，所以和直接调用jQuery函数作用效果是一样的。 如果对new操作符具体做了什么不明白。可以参看我之前写的文章。

面试官问：能否模拟实现JS的new操作符

源码：

 var
	version = "3.4.1",

	// Define a local copy of jQuery
	jQuery = function( selector, context ) {
		// 返回new之后的对象
		return new jQuery.fn.init( selector, context );
	};
jQuery.fn = jQuery.prototype = {
	// jQuery当前版本
	jquery: version,
	// 修正构造器为jQuery
	constructor: jQuery,
	length: 0,
};
init = jQuery.fn.init = function( selector, context, root ) {
	// ...
	if ( !selector ) {
		return this;
	}
	// ...
};
init.prototype = jQuery.fn;

jQuery.fn === jQuery.prototype; 	// true
init = jQuery.fn.init;
init.prototype = jQuery.fn;
// 也就是
jQuery.fn.init.prototype === jQuery.fn;	 // true
jQuery.fn.init.prototype === jQuery.prototype; 	// true

关于这个笔者画了一张jQuery原型关系图，所谓一图胜千言。

<sciprt src="https://unpkg.com/jquery@3.4.1/dist/jquery.js">
</script>
console.log({jQuery});
// 在谷歌浏览器控制台，可以看到jQuery函数下挂载了很多静态属性和方法，在jQuery.fn 上也挂着很多属性和方法。

Vue源码中，也跟jQuery类似，执行的是Vue.prototype._init方法。

function Vue (options) {
	if (!(this instanceof Vue)
	) {
		warn('Vue is a constructor and should be called with the `new` keyword');
	}
	this._init(options);
}
initMixin(Vue);
function initMixin (Vue) {
	Vue.prototype._init = function (options) {};
};

核心函数之一 extend

用法：

jQuery.extend( target [, object1 ] [, objectN ] )        Returns: Object

jQuery.extend( [deep ], target, object1 [, objectN ] )

jQuery.extend APIjQuery.fn.extend API

看几个例子： （例子可以我放到在线编辑代码的jQuery.extend例子codepen了，可以直接运行）。

// 1. jQuery.extend( target)
var result1 = $.extend({
	job: '前端开发工程师',
});

console.log(result1, 'result1', result1.job); // $函数 加了一个属性 job  // 前端开发工程师

// 2. jQuery.extend( target, object1)
var result2 = $.extend({
	name: '若川',
},
{
	job: '前端开发工程师',
});

console.log(result2, 'result2'); // { name: '若川', job: '前端开发工程师' }

// deep 深拷贝
// 3. jQuery.extend( [deep ], target, object1 [, objectN ] )
var result3 = $.extend(true,  {
	name: '若川',
	other: {
		mac: 0,
		ubuntu: 1,
		windows: 1,
	},
}, {
	job: '前端开发工程师',
	other: {
		mac: 1,
		linux: 1,
		windows: 0,
	}
});
console.log(result3, 'result3');
// deep true
// {
//     "name": "若川",
//     "other": {
//         "mac": 1,
//         "ubuntu": 1,
//         "windows": 0,
//         "linux": 1
//     },
//     "job": "前端开发工程师"
// }
// deep false
// {
//     "name": "若川",
//     "other": {
//         "mac": 1,
//         "linux": 1,
//         "windows": 0
//     },
//     "job": "前端开发工程师"
// }

结论：extend函数既可以实现给jQuery函数可以实现浅拷贝、也可以实现深拷贝。可以给jQuery上添加静态方法和属性，也可以像jQuery.fn(也就是jQuery.prototype)上添加属性和方法，这个功能归功于this，jQuery.extend调用时this指向是jQuery，jQuery.fn.extend调用时this指向则是jQuery.fn。

浅拷贝实现

知道这些，其实实现浅拷贝还是比较容易的：

// 浅拷贝实现
jQuery.extend = function(){
	// options 是扩展的对象object1，object2...
	var options,
	// object对象上的键
	name,
	// copy object对象上的值，也就是是需要拷贝的值
	copy,
	// 扩展目标对象，可能不是对象，所以或空对象
	target = arguments[0] || {},
	// 定义i为1
	i = 1,
	// 定义实参个数length
	length = arguments.length;
	// 只有一个参数时
	if(i === length){
		target = this;
		i--;
	}
	for(; i < length; i++){
		// 不是underfined 也不是null
		if((options = arguments[i]) !=  null){
			for(name in options){
				copy = options[name];
				// 防止死循环，continue 跳出当前此次循环
				if ( name === "__proto__" || target === copy ) {
					continue;
				}
				if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}

	}
	// 最后返回目标对象
	return target;
}

深拷贝则主要是在以下这段代码做判断。可能是数组和对象引用类型的值，做判断。

if ( copy !== undefined ) {
	target[ name ] = copy;
}

为了方便读者调试，代码同样放在jQuery.extend浅拷贝代码实现codepen，可在线运行。

深拷贝实现

$.extend = function(){
	// options 是扩展的对象object1，object2...
	var options,
	// object对象上的键
	name,
	// copy object对象上的值，也就是是需要拷贝的值
	copy,
	// 深拷贝新增的四个变量 deep、src、copyIsArray、clone
	deep = false,
	// 源目标，需要往上面赋值的
	src,
	// 需要拷贝的值的类型是函数
	copyIsArray,
	//
	clone,
	// 扩展目标对象，可能不是对象，所以或空对象
	target = arguments[0] || {},
	// 定义i为1
	i = 1,
	// 定义实参个数length
	length = arguments.length;

	// 处理深拷贝情况
	if ( typeof target === "boolean" ) {
		deep = target;

		// Skip the boolean and the target
		// target目标对象开始后移
		target = arguments[ i ] || {};
		i++;
	}

	// Handle case when target is a string or something (possible in deep copy)
	// target不等于对象，且target不是函数的情况下，强制将其赋值为空对象。
	if ( typeof target !== "object" && !isFunction( target ) ) {
		target = {};
	}

	// 只有一个参数时
	if(i === length){
		target = this;
		i--;
	}
	for(; i < length; i++){
		// 不是underfined 也不是null
		if((options = arguments[i]) !=  null){
			for(name in options){
				copy = options[name];
				// 防止死循环，continue 跳出当前此次循环
				if ( name === "__proto__" || target === copy ) {
					continue;
				}

				// Recurse if we're merging plain objects or arrays
				// 这里deep为true，并且需要拷贝的值有值，并且是纯粹的对象
				// 或者需拷贝的值是数组
				if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
					( copyIsArray = Array.isArray( copy ) ) ) ) {

					// 源目标，需要往上面赋值的
					src = target[ name ];

					// Ensure proper type for the source value
					// 拷贝的值，并且src不是数组，clone对象改为空数组。
					if ( copyIsArray && !Array.isArray( src ) ) {
						clone = [];
						// 拷贝的值不是数组，对象不是纯粹的对象。
					} else if ( !copyIsArray && !jQuery.isPlainObject( src ) ) {
						// clone 赋值为空对象
						clone = {};
					} else {
						// 否则 clone = src
						clone = src;
					}
					// 把下一次循环时，copyIsArray 需要重新赋值为false
					copyIsArray = false;

					// Never move original objects, clone them
					// 递归调用自己
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				}
				else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}

	}
	// 最后返回目标对象
	return target;
};

为了方便读者调试，这段代码同样放在jQuery.extend深拷贝代码实现codepen，可在线运行。

深拷贝衍生的函数 isFunction

判断参数是否是函数。

var isFunction = function isFunction( obj ) {

	// Support: Chrome <=57, Firefox <=52
	// In some browsers, typeof returns "function" for HTML <object> elements
	// (i.e., `typeof document.createElement( "object" ) === "function"`).
	// We don't want to classify *any* DOM node as a function.
	return typeof obj === "function" && typeof obj.nodeType !== "number";
};

深拷贝衍生的函数 jQuery.isPlainObject

jQuery.isPlainObject(obj)测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。

jQuery.isPlainObject({}) // true
jQuery.isPlainObject("test") // false

var getProto = Object.getPrototypeOf;
var class2type = {};
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
var fnToString = hasOwn.toString;
var ObjectFunctionString = fnToString.call( Object );

jQuery.extend( {
	isPlainObject: function( obj ) {
		var proto, Ctor;

		// Detect obvious negatives
		// Use toString instead of jQuery.type to catch host objects
		// !obj 为true或者 不为[object Object]
		// 直接返回false
		if ( !obj || toString.call( obj ) !== "[object Object]" ) {
			return false;
		}

		proto = getProto( obj );

		// Objects with no prototype (e.g., `Object.create( null )`) are plain
		// 原型不存在 比如 Object.create(null) 直接返回 true;
		if ( !proto ) {
			return true;
		}

		// Objects with prototype are plain iff they were constructed by a global Object function
		Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
		// 构造器是函数，并且 fnToString.call( Ctor )  === fnToString.call( Object );
		return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
	},
});

extend函数，也可以自己删掉写一写，算是jQuery中一个比较核心的函数了。而且用途广泛，可以内部使用也可以，外部使用扩展 插件等。

链式调用

jQuery能够链式调用是因为一些函数执行结束后 return this。 比如 jQuery 源码中的addClass、removeClass、toggleClass。

jQuery.fn.extend({
	addClass: function(){
		// ...
		return this;
	},
	removeClass: function(){
		// ...
		return this;
	},
	toggleClass: function(){
		// ...
		return this;
	},
});

jQuery.noConflict 很多js库都会有的防冲突函数

jQuery.noConflict API

用法：

 <script>
	var $ = '我是其他的$，jQuery不要覆盖我';
</script>
<script src="./jquery-3.4.1.js">
</script>
<script>
	$.noConflict();
	console.log($); // 我是其他的$，jQuery不要覆盖我
</script>

jQuery.noConflict 源码

var

	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,

	// Map over the $ in case of overwrite
	_$ = window.$;

jQuery.noConflict = function( deep ) {
	// 如果已经存在$ === jQuery;
	// 把已存在的_$赋值给window.$;
	if ( window.$ === jQuery ) {
		window.$ = _$;
	}

	// 如果deep为 true, 并且已经存在jQuery === jQuery;
	// 把已存在的_jQuery赋值给window.jQuery;
	if ( deep && window.jQuery === jQuery ) {
		window.jQuery = _jQuery;
	}

	// 最后返回jQuery
	return jQuery;
};

总结

全文主要浅析了jQuery整体结构，自执行匿名函数、无new构造、支持多种规范（如commonjs、amd规范）、核心函数之extend、链式调用、jQuery.noConflict等方面。

重新梳理下文中学习的源码结构。

// 源码结构
( function( global, factory )
	"use strict";
	if ( typeof module === "object" && typeof module.exports === "object" ) {
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
	var	version = "3.4.1",

		// Define a local copy of jQuery
		jQuery = function( selector, context ) {
			return new jQuery.fn.init( selector, context );
		};

	jQuery.fn = jQuery.prototype = {
		jquery: version,
		constructor: jQuery,
		length: 0,
		// ...
	};

	jQuery.extend = jQuery.fn.extend = function() {};

	jQuery.extend( {
		// ...
		isPlainObject: function( obj ) {},
		// ...
	});

	init = jQuery.fn.init = function( selector, context, root ) {};

	init.prototype = jQuery.fn;

	if ( typeof define === "function" && define.amd ) {
		define( "jquery", [], function() {
			return jQuery;
		} );
	}
	jQuery.noConflict = function( deep ) {};

	if ( !noGlobal ) {
		window.jQuery = window.$ = jQuery;
	}

	return jQuery;
});

可以学习到jQuery巧妙的设计和架构，为自己所用，打造属于自己的js类库。 相关代码和资源放置在github blog中，需要的读者可以自取。