2. this

this关键词是JavaScript中最令人疑惑的机制之一。this是非常特殊的关键词标识符，在每个函数的作用域中被自动创建，但它到底指向什么（对象），很多人弄不清。

当函数被调用，一个activation record（即 execution context）被创建。这个record包涵信息：函数在哪调用（call-stack），函数怎么调用的，参数等等。record的一个属性就是this，指向函数执行期间的this对象。

• this不是author-time binding，而是 runtime binding。
• this的上下文基于函数调用的情况。和函数在哪定义无关，而和函数怎么调用有关。

2.1 this在具体情况下的分析

2.1.1 Global context

在全局上下文（任何函数以外），this指向全局对象。

console.log(this === window); // true

2.1.2 Function context

在函数内部时，this由函数怎么调用来确定。

2.1.2.1 Simple call

简单调用，即独立函数调用。由于this没有通过call来指定，且this必须指向对象，那么默认就指向全局对象。

function f1(){
  return this;
}

f1() === window; // global object

在严格模式下，this保持进入execution context时被设置的值。如果没有设置，那么默认是undefined。它可以被设置为任意值**（包括null/undefined/1等等基础值，不会被转换成对象）**。

function f2(){
  "use strict"; // see strict mode
  return this;
}

f2() === undefined;

2.1.2.2 Arrow functions

在箭头函数中，this由词法/静态作用域设置（set lexically）。它被设置为包含它的execution context的this，并且不再被调用方式影响（call/apply/bind）。

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

// Call as a method of a object
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// Attempt to set this using call
console.log(foo.call(obj) === globalObject); // true

// Attempt to set this using bind
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

2.1.2.3 As an object method

当函数作为对象方法调用时，this指向该对象。

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37

this on the object's prototype chain

原型链上的方法根对象方法一样，作为对象方法调用时this指向该对象。

2.1.2.4 构造函数

在构造函数（函数用new调用）中，this指向要被constructed的新对象。

2.1.2.5 call和apply

Function.prototype上的call和apply可以指定函数运行时的this。

function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

注意，当用call和apply而传进去作为this的不是对象时，将会调用内置的ToObject操作转换成对象。所以4将会装换成new Number(4)，而null/undefined由于无法转换成对象，全局对象将作为this。

2.1.2.6 bind

ES5引进了Function.prototype.bind。f.bind(someObject)会创建新的函数（函数体和作用域与原函数一致），但this被永久绑定到someObject，不论你怎么调用。

2.1.2.7 As a DOM event handler

this自动设置为触发事件的dom元素。

3. 作用域（Scope）和闭包（closure）

在第2部分对this的探讨中，我们已经部分涉及到了作用域，只是没有展开说，或者从作用域角度来说。

3.1 Scope是什么？

先尝试从几个方面描述下：

• Scope这个术语被用来描述在某个代码块可见的所有实体（或有效的所有标识符），更精准一点，叫做上下文（context）或环境（environment）。
• 当前执行的上下文（The current context of execution）。https://developer.mozilla.org/en-US/docs/Glossary/Scope

综合一下，Scope即上下文，包含当前所有可见的变量。

Scope分为Lexical Scope和Dynamic Scope。Lexical Scope正如字面意思，即词法阶段定义的Scope。换种说法，作用域是根据源代码中变量和块的位置，在词法分析器（lexer）处理源代码时设置。

让我们考虑下面的代码来分析Lexical Scope：

function foo(a) {
    //   inner scope 'foo'
    // defined argument a, and look-up b upwards
    console.log( a + b );
}

// outmost/global scope
// defined b
var b = 2;

foo( 2 ); // 4

Scope是分层的，内层Scope可以访问外层Scope的变量，反之则不行。上面的代码中即有嵌套Scope。用泡泡来比喻Scope可能好理解一点：

1. 泡泡1是全局作用域，有标识符foo；
2. 泡泡2是作用域foo，有标识符a,bar,b；
3. 泡泡3是作用域bar，仅有标识符c。

Scope在我们写代码的时候就被定义好了，比如谁嵌套在谁里面。

3.2 JavaScript Scope

JavaScript采用Lexical Scope。

于是，我们仅仅通过查看代码（因为JavaScript采用Lexical Scope），就可以确定各个变量到底指代哪个值。

另外，变量的查找是从里往外的，直到最顶层（全局作用域），并且一旦找到，即停止向上查找。所以内层的变量可以shadow外层的同名变量。

3.2.1 Cheating Lexical

如果Scope仅仅由函数在哪定义的决定（在写代码时决定），那么还有方式更改Scope吗？JS有eval和with两种机制，但两者都会导致代码性能差。

3.2.1.1 eval

eval接受字符串为参数，把这些字符串当做真的在程序的这个点写下的代码——意味着可以编码方式来在某个点生成代码，就像真的在程序运行前在这里写了代码。

function foo(str, a) {
    eval( str ); // cheating!
    console.log( a, b );
}

var b = 2;
foo( "var b = 3;", 1 ); // 1, 3

默认情况下，eval会动态执行代码，并改变当前Scope。但非直接（indirectly）调用eval可以让代码执行在全局作用域，即修改全局Scope。

function bar(str) {
    (0, eval)( str ); // cheating in global!
}
bar('var hello = "hi";')

window.hello // "hi"

另外，严格模式下，eval运行在它自己的Scope下，即不会修改包含它的Scope。

function foo(str) {
   "use strict";
   eval( str );
   console.log( a ); // ReferenceError: a is not defined
}

foo( "var a = 2" );

3.2.1.1 with

function foo(obj) {
    with (obj) {
        a = 2;
    }
}

var o1 = {
    a: 3
};

var o2 = {
    b: 3
};

foo( o1 );
console.log( o1.a ); // 2

foo( o2 );
console.log( o2.a ); // undefined
console.log( a ); // 2 -- Oops, leaked global!

with以对象为参数，并把这个对象当做完全独立的Lexical Scope（treats that object as if it is a wholly separate lexical scope），然后这个对象的属性就被当做定义的变量了。

**注意：**尽管把对象当做Scope，var定义的变量仍然scoped到包含with的函数中。

不像eval可以改变当前Scope，with凭空创建了全新的Scope，并把对象传进去。所以o1传进去时可以正确更改o1.a，而o2传进去时，创建了全局变量a。

3.3 Dynamic Scope?

上一节讲到，JS采用Lexical Scope，这里再明确一下：

JavaScript没有Dynamic Scope。

那么为什么又单开一节讲一下？

一是强调，二是，JS中的this机制跟Dynamic Scope很像，都是运行时绑定。

3.4 Function vs. Block Scope

上面的内容有意无意似乎应该表明了，JS没有Block Scope。

除了Global Scope，只有function可以创建新作用域（Function Scope）。 不过这已经是老黄历了，ES6引入了Block Scope。

{
    let x = 0;
}
console.log(x); // Uncaught ReferenceError: x is not defined

另外，with和try catch都可以创建Block Scope。

try {
    undefined(); // illegal operation to force an exception!
}
catch (err) {
    console.log( err ); // works!
}

console.log( err ); // ReferenceError: `err` not found

长文必火！前排挤挤～

男神起飞

_围观男神装逼！！！！_吓得我打字都歪了

不明觉厉

写的好，感觉理解又深了一些

文章很好啊谢谢

为何要发到issue里面，直接写成文档多好~

@CharlesOy 写issue里可以互动啊 😃

稍微看了下ES6规范 Executable Code and Execution Contexts，可以看到，scope和规范中的 Lexical Environment 比较接近，而Execution Context要超出scope的概念，但scope是其重要的组成部分。

Lexical Environment

Lexical Environment 是规范里的一种类型，用于定义 Identifiers 和 指定variables／functions 的关联（基于代码的词法嵌套结构lexical nesting structure of ECMAScript code）。

Lexical Environment由 Environment Record 和 一个可能为null的指向外层Lexical Environment的引用 组成。

通常，Lexical Environment和ECMAScript代码的特定词法结构由关，比如FunctionDeclaration, BlockStatement, Catch clause of a TryStatement，一旦这种代码执行，新的Lexical Environment被创建。

一个 Environment Record 记录了它所属 Lexical Environment 的 scope 内的 identifier bindings。

Environment Record 有两种基本的类别：declarative Environment Records 和 object Environment Records。

1. Declarative Environment Records

一个 Declarative Environment Record 对应一个 ECMAScript program scope (scope包含 variable, constant, let, class, module, import, and/or function declarations)。Declarative Environment Record绑定了这个scope里所有声明定义的identifiers。

2. Object Environment Records

3. Function Environment Records

一个 function Environment Record 是用于表示一个函数的顶层scope的 Declarative Environment Record，并且，如果这个函数不是箭头函数，还提供 this 的绑定。

4. Global Environment Records

Execution Context

An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation.

Execution Context的组成：

发现第 3 点中闭包被漏掉了，这里补上。

闭包（closure）

A closure is the combination of a function and the lexical environment within which that function was declared.

在 JavaScript 中，函数形成闭包。闭包就是函数和函数声明时的词法作用域的组合。

下面用例子说明：

function outer () {
  var name = 'Jerry'
  function inner () {
    console.log(name)
  }
  return inner
}

var fn = outer()
fn() // Jerry

在部分编程语言中，函数内部的局部变量仅仅存在于函数执行期间，一旦函数执行完毕，变量就销毁（不再能访问）。

但在 JavaScript 中，由于闭包的原因，fn 仍可以访问 name 变量。

闭包就是函数和函数声明的词法作用域的组合，这句话有点难懂...

函数和函数声明时的词法作用域形成闭包 ——这样可能好理解一点。

大神您好，构造函数的call调用比较复杂 能请教下吗？

function add(c, d){
  this.d=d;  // set调用对象o
  return this.a + this.b + c + d;  // get调用对象o
}

var o = {a:1, b:3};
add.call(o, 5, 7);
console.log(o);

@Hibop 不是很明白你的问题。没有所谓的构造函数和非构造函数，在用new 调用函数时，函数就是构造函数。

这里 add.call(o, 5, 7); 时，this 指向 o，就是这样的。

写得很好，赞一下作者。

大佬好！
关于第一点，声明提升中的函数声明提升，有一个这个问题

console.log(fn)
fn()
if (true) {
  function fn() {
    console.log('fn inner')
  }
}
// undefined
// TypeError：fn is not a function

把函数fn的调用移到if块里面，就正常控制台输出fn inner;

严格模式下
console.log(fn)这一行代码也要报错，提示fn is not defined,也就是说函数名的提升只到了if块里面。

这个情况我理解的是函数提升的时候是分为两步的，先是把函数名定义提升到广义的作用域顶部，然后再把函数体的定义提升到狭义的作用域顶部。

这里解释一下我自己定义的广义的作用域和狭义的作用域，广义的指的是ES6之前的作用域，即全局作用域和函数作用域，狭义的除了广义的作用域之外加上了这个if，for等块级作用域。

大佬看我这个理解是否正确呢？

@hrpc 你注意到ES6开始作用域有所不同，这是对的。

• ES6 引入了一个新的概念，叫 “Temporal Dead Zone” (TDZ) ，建议可以阅读 https://ponyfoo.com/articles/es6-let-const-and-temporal-dead-zone-in-depth，写的非常清晰。

• ES6 开始支持了 block scope（局部作用域），大括号内定义的局部变量（非 var 定义）外部不可访问。可以参考下 babel 是怎么翻译一段 ES6 代码的，内外层已经把函数名都变不一样了：

• 此外，我们从不推荐在block 内定义函数，不论是 ES6 还是 ES5。可以参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/ 了解更多相关知识。

有个疑问，请求大佬解惑！：关于作用域链的确认的

function a(){ 
let num = 0; 
   return function(){ 
        console.log(++num)
   } 
} 
const b =a() 
b()

当我们调用这个函数a的时候，会生成函数a的执行上下文，然后先预编译（我不知道这个“预编译”用的准确不？），然后创建了这个函数执行上下文的变量对象（变量num，**不知道这个里面有没有匿名函数🤔️，return的值在这个阶段咋个处理？**🤔️）和作用域链（a函数的作用域和=》全局作用域）,创建完毕。再执行里面的代码。

当我们执行函数b（）的时候，上面同理，然后创建作用域链（函数b =》 函数a =》 全局）。
提问：这里并不是因为函数b里面引用了a的变量count才将函数a放在这条作用域链上的，而是因为函数a嵌套了函数a，所以对于函数b的执行上下文里面的作用域链来说，他们在一条作用域链上，我这样理解对吗？🤔️

有个疑问，请求大佬解惑！：关于作用域链的确认的

function a(){ 
let num = 0; 
   return function(){ 
        console.log(++num)
   } 
} 
const b =a() 
b()

当我们调用这个函数a的时候，会生成函数a的执行上下文，然后先预编译（我不知道这个“预编译”用的准确不？），然后创建了这个函数执行上下文的变量对象（变量num，**不知道这个里面有没有匿名函数🤔️，return的值在这个阶段咋个处理？**🤔️）和作用域链（a函数的作用域和=》全局作用域）,创建完毕。再执行里面的代码。

当我们执行函数b（）的时候，上面同理，然后创建作用域链（函数b =》 函数a =》 全局）。
提问：这里并不是因为函数b里面引用了a的变量count才将函数a放在这条作用域链上的，而是因为函数a嵌套了函数a，所以对于函数b的执行上下文里面的作用域链来说，他们在一条作用域链上，我这样理解对吗？🤔️

没什么问题