javascript 作用域（scope），this，class

1. 作用域（scope）

当前的执行上下文。值和表达式¹在其中 “可见” 或可被访问到的上下文。如果一个变量或者其他表达式不 “在当前的作用域中”，那么它就是不可用的。 作用域也可以根据代码层次分层，以便子作用域可以访问父作用域，通常是指沿着链式的作用域链查找，而不能从父作用域引用子作用域中的变量和引用。

一个函数在 JavaScript 中充当闭包，从而创建一个作用域。只定义在函数中变量，外部作用域或其他函数无法访问。

function exampleFunction() {
    var x = "declared inside function";  // x can only be used in exampleFunction
    console.log("Inside function");
    console.log(x);
}

console.log(x);  // Causes error

如下代码是可以正常运行的，因为 变量 x 是在 父 scope 中申明的

var x = "declared outside function";

exampleFunction();

function exampleFunction() {
    console.log("Inside function");
    console.log(x);
}

console.log("Outside function");
console.log(x);

2. this

在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）。

const obj = {
   name: 'obj',
   say: function() {
       console.log(this.name);
   }
}
obj.say(); // ouput: obj
b = {name: 'b'};
b.say = obj.say;
b.say(); // ouput: b

s1 = obj.say.bind({name: 'c'}); // bind只生效一次！
s1(); // output: c

• 全局上下文
  无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

• 函数上下文
  在函数内部，this的值取决于函数被调用的方式。
  因为下面的代码不在严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象，浏览器中就是 window。

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

//在Node中：
f1() === globalThis;

• 箭头函数中的this
  箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止
  在箭头函数中，this与封闭词法环境的this保持一致。在全局代码中，它将被设置为全局对象：

// 创建一个含有bar方法的obj对象，
// bar返回一个函数，
// 这个函数返回this，
// 这个返回的函数是以箭头函数创建的，
// 所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，这反过来又设置了返回函数的值。
var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this，
// 通常(即不使用箭头函数的情况)默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而没有调用它
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true

---

1. 此处所说的表达式，包含类表达式，函数表达式等，可参考Expressions and operators ↩︎