xiaoshude / blog Goto Github PK

翻译自Execution context, Scope chain and JavaScript internals
执行上下文（Execution context ），简称 EC，被定义为 JS 代码执行的环境。「环境」往往用来指代这样一个集合 —— 不是我创造却可以使用的东西。当这里提及环境时，指的是 JS 代码能够访问的 this值、变量、对象和函数，这些组成了 JS 代码的环境。

JS 中的执行上下文有三种：

1. 全局执行上下文（Global execution context），简称 GEC，当 JS 文件在浏览器下载下来，开始执行 JS 代码时的默认执行上下文。所有的全局代码都执行在全局上下文。在浏览器里，如果代码执行在严格模式，this的值是 undefinded， 否则是 window 对象。对于 JS 的代码执行来说只能有一个全局上下文。
2. 函数执行上下文（Functional execution context），简称 FEC，为函数内代码执行所创建的上下文称为函数上下文。每个函数都有它自己的执行上下文。函数执行上下文可以不只有一个。当代码在全局上下文执行时，如果 JS 引擎遇到一个函数调用，就会为这函数创造一个函数执行上下文。
3. Eval ：eval 函数里代码的执行上下文称为 Eval。

执行上下文栈：所有在JS代码运行时创建的执行栈会储存在栈数据结构里，称为执行上下文栈。
全军执行上下文默认出现在执行上下文栈，而且在栈的底部。当执行全局上下文的代码时，如果遇到函数调用就会创建函数执行上下文，然后把该上下文推到栈的顶部。JS引擎执行上下文在栈顶部的函数。一旦函数所有的代码执行完。JS引擎就会把该函数的执行上下文从栈中推出，然后开始执行下面的函数。

用下面的例子来帮助理解：

var a = 10;

function functionA() {

	console.log("Start function A");

	function functionB(){
		console.log("In function B");
	}

上面的代码在浏览器一加载完成，JS引擎就会在执行栈推入全局上下文。当在全局上下文调用functionA，JS引擎会把functionA的执行上下文推入上下文栈然后开始执行functionA。

当 functionA 内调用 functionB，JS引擎把functionB的上下文推入执行栈。一旦 functionB 的代码执行完，它的上下文就会被推出。functionA 的上下文处于最顶端，JS 引擎开始执行 functionA 剩下的代码。

当所有的代码执行完，JS 引擎会推出全局上下文，结束 JS 执行。

到目前为止我们讨论了引擎怎样使用执行上下文。现在我们讨论引擎怎样创建执行上下文。

以 Vue 项目为例：

• devDependencies 中加入依赖包

"babel-jest": "^24.7.1",
"jest": "^24.7.1"

yarn add jest babel-jest --dev

• Jest 配置

在 package.json 加入：

"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!vue-awesome|normalize.css)"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,vue}",
      "!**/node_modules/**"
    ]
  }

• package.json script 下加入：

"test": "jest",

1. 修改package.json

• 添加 .eslintrc.js 和 .eslintignore
  以 vue 项目为例： .eslintrc.js
  .eslintignore

• 添加 lint script:

"scripts": {
 "lint": "eslint --ext .js,.vue src",
 "lint-fix": "eslint --ext .js,.vue src --fix"
}

• 添加 gitHooks:

"gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
}

• 添加 lint-staged 的配置：

 "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
}

• 在 script 文件夹下添加 verify-commit-msg.js

https://gist.github.com/xiaoshude/a8cd454383f3f86423a271f0d76d0da1#file-verify-commit-msg-js

• 添加依赖包

"devDependencies": {
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "lint-staged": "^7.0.0",
    "yorkie": "^1.0.1"
 }

eslint 及 eslint 开头的包就不解释了

lint-staged 支持 lint-staged 命令，用于仅仅 lint add to stagging 的代码
yorkie 用于在支持在 package.json 的 gitHooks 钩子

示例 package.json

最后把这个文件加在项目里 COMMIT_CONVENTION