Arrow function 与 bind

JavaScript 中 this 的指向有一些规则,其中可通过 bindarrow function 来绑定 this 的指向。

arrow function 在 ES6 中引入,由于可以绑定 this 的原因,常用来替换普通的匿名函数(function() {})。

这两种方式在基于 React 技术中较为广泛地使用,主要是用于事件绑定中。虽然同可绑定 this,但配合类使用时实际是有差别的。简单来说,基于 arrow function 声明的类属性将无法被继承调用。

class A {
    constructor() {
        this.bindMethod = this.bindMethod.bind(this);
    }

    m(p) {
        console.log('m', p);
    }

    bindMethod(p) {
        console.log('bindMethod', p);
    }

    arr = p => {
        console.log('arrow', p);
    };
}

class B extends A {
    m(p) {
        console.log('B');
        super.m(p);
    }

    bindMethod(p) {
        console.log('B');
        super.bindMethod(p);
    }

    arr = p => {
        console.log('B');
        super.arr(p); // Error run with compiled code with es2015+stage0
    };
}

const a = new A();
a.m(1);
a.bindMethod(2);
a.arr(3);

const b = new B();
b.m(1);
b.bindMethod(2);
b.arr(3);

babel 结果(ES2017 + Stage 0)

上面的 class A babel 后(把目标设为 ES2017 是为了简化掉实现 class 继承机制的代码),其中,arrow 形式的 class 属性变成了实例属性,而非原型属性,这样就子类将无法通过 super 来调用。

而通过 bind 方式来实现的 this 绑定则依然保留有原型方法。

class A {
    constructor() {
        this.arr = p => {
            console.log("arrow", p);
        };

        this.bindMethod = this.bindMethod.bind(this);
    }

    m(p) {
        console.log("m", p);
    }

    bindMethod(p) {
        console.log("bindMethod", p);
    }
}

参考

JavaScript this 值

JavaScript 中 this 的指向根据上下文及使用方式而有所不同。

全局上下文 Global Context

在全局上下文(不在函数体内)中总指向全局对象,如在浏览器中是 window,在 Node.js 则是 global

函数上下文 Function Context

  • 简单调用
    • 严格模式:undefined
    • 非严格模式:全局对象
    • 可用 callapply 来改变 this
  • 作为对象的方法:指向直接所在的对象,如 a.b.c()cthis 指向 b,适用于普通的对象、原型链方法和 getter/setter
  • 作为构造函数,指向正在构建的对象
  • 作为 DOM 事件处理函数,指向触发事件的元素(指的是外层函数,如果是多层,遵循其余规则)
  • bind:用 f.bind(object) 来返回新的绑定 this 的函数,不论怎么调用,如通过对象方法调用、callapply 都不会改变 this。再次 bind 也不会改变。
  • 箭头函数(arrow function):this 指向词法上下文(实际运行生成箭头函数时上下文)的 this,不会被调用方式改变,但会因生成方式而不同。
var obj = {
    bar: function() {
        var x = (() => this);
        return x;
    }
};

var fn = obj.bar();
console.log(fn() === obj); // true

var fn2 = obj.bar;
console.log(fn2()() == window); // true

继续阅读

参考文献与注释的区别与关系

参考文献是作者撰写论著时所引用的已公开发表的文献书目,集中列表于文末;注释主要包括释义性注释引文注释,一般印刷在该页的脚1或集中列于文末参考文献表之前2。释义性注释是对论著正文中某一特定内容的进一步解释或补充说明;引文注释包括各种不宜引入文后参考文献的引文和个别文后参考文献的节略形式,如:

  • 未公开发表的私人通信
  • 档案资料
  • 内部资料
  • 书稿
  • 古籍(1911 年以前出版、无现代版本的各种版本)
  • 仅有中介文献信息的『转引自』类文献
  • 待发表文献
  • 未公开发表的会议文献
  • 文后参考文献的节略形式

参考文献

  • [1] 中国学术期刊(光盘版)编辑委员会. 中国学术期刊(光盘版)检索与评价数据规范[S]. CAJ-CD B/T 1-2006, 2006: 10–11.

  1. 通常是释义性注释 ↩︎
  2. 通常是引文注释 ↩︎

【编写可维护的 JavaScript】读书笔记

编写可维护的 JavaScript(Maintainable JavaScript)

编写可维护的 JavaScript

添加注释的一般原则是,在需要让代码变得更清晰时添加注释:

  • 难以理解的代码
  • 可能被误认为错误的代码
  • 浏览器特性 hack

事件处理的实践规则:

  • 规则 1:隔离应用逻辑
  • 规则 2:不要分发事件对象

规则 1 把应用逻辑和时间处理代码中拆分开来,这样应用逻辑可被不同事件或非事件重用,测试时也能直接触发而不必通过模拟事件来触发。

规则 2 是指事件处理器中处理 event 对象,然后把需要的数据传给应用逻辑,而不是把 event 对象传送下去,应用逻辑依赖具体的数据而不是事件对象。

事件处理程序应当在进入应用逻辑之前针对 event 对象执行任何必要的操作,包括组织默认事件和阻止事件冒泡,都应当直接包含在事件处理程序中。

如果所有的失败(错误)都是悄无声息的,首要的问题是那必将消耗你大量的时间才能发现它,更不要说单独隔离并修复它了。

我们的目的不是防止错误,而是在错误发生时能更加容易地调试。(阅注:在处理接口数据时,有的时候需要编写防御性代码来让业务继续工作而不是直接跑错误终止逻辑。)

继续阅读

import 与 require 的两个差异

Javascript 的模块化开发,除了 RequireJS 代表的 AMD 外,目前广泛使用的是 Node.js 代表的 CommonJS 以及 ES6 的 module。

在 babel / webpack 等工具链下,大多数情况下,CommonJS 的 require 和 ES6 的 import 效果等同,babel 的 preset 是 ES2015 以及 webpack 都是把 import 转为 require(webpack 根据 target 再转为 AMD 或 UMP 等格式)。

但两个规范实质上并不等同,所以存在着不少的区别,如不能 import(var) 但能 require(var),详细可查看 ES6 模块系统,此处记录一下两个可能比较直接影响代码书写的差异点。

继续阅读

git pull 与 rebase

最初使用独立的工具 git-up,后来 git 支持了同样的功能,通过配置 git config --global alias.up 'pull --rebase --autostash 即可达到同样的效果。

如果希望在 pull 的时候直接使用 rebase 机制,可以像下面这样配置

git config --global pull.rebase true
git config --global rebase.autoStash true

git pull 效果

git pull 效果

git pull —rebase 效果

git pull --rebase 效果

【数据之美】读书笔记

数据之美:一本书学会可视化设计(Data Points: Visualization That Means Something)

数据之美:一本书学会可视化设计

笔记摘要

引言 可视化是一种媒介

由于数据代表了一定的人物、地点和事物,所以除了真实的数字之外,还有重要的背景信息。数据是关于谁的?它从哪里来以及是什么时候收集的?虽然是计算机生成并输出数据,但我们也需要对这些由人处理的部分负责。

花一些时间去了解数据以及它们所代表的东西,能加倍提升可视化的效果。

无论哪一种可视化类型都有其规则可循。这些规则并不取决于设计或统计数字,而受人类感知的支配。它们确保读者能准确解读编码数据。

规则是应该时时遵循的,而建议则要具体分析,视情况而决定是否采纳。

继续阅读