javascript中的作用域(词法and动态)

2024年2月15日 199次阅读 来源: zp1996

js中作用域的题目可以说是陈词滥调，个人认为js的作用域中存在着两种作用域，一种是词法作用域，一种是动态作用域。

词法作用域

词法作用域就是定义在词法阶段的作用域，也就是说由我们写代码时将变量写在那里所决议的，固然在js中大部份是这类状况。

var a = 20;
function foo () {
    console.log(a);
}
foo();   // 20
function bar () {
    var a = 30;
    foo();   // 20
}
bar();

这个例子就是一个很好的印证，可以发明的是，不管foo在那里挪用，其a的值永远是全局作用域中的a的值，这就是词法作用域，定义函数时，作用域是在全局，那末foo上层作用域就是全局，转变其挪用位置是不能转变其作用域链的，其作用域链是在定义时就决议好的。
应用词法作用域，我们可以引伸出闭包的观点，将我们上面的代码改写：

var a = 20;
function bar () {
    var a = 30;
    return function foo () {
        console.log(a);
    }
}
bar()();   // 30

foo函数在bar函数内定义，所以foo函数的作用域链上层对应的是bar的作用域，应用闭包将foo暴露出去，由于foo函数依旧保持着对bar作用域的援用，所以bar内部的作用域依旧存在，没有被接纳，这也是闭包可以发生私有变量等结果的缘由。

转变作用域

对没错，词法作用域可以被转变，经由历程eval或许with就可以将作用域转变，然则这并不被首倡。
eval转变作用域：

var a = 20;
function bar () {
    eval("var a = 30;");
    console.log(a);
}
bar();  // 30

eval内的代码可以看作，本身就写在了那一行，然则在严厉形式下，eval有着本身的作用域，所以严厉形式下上面的代码会报出一个ReferenceError。
with转变作用域：

function foo (obj) {
    with (obj) {
        b = 2;
        a = 2;
    }
}
var obj = {a: 1};
foo(obj);
console.log(obj, b);   // { a: 2 } 2

with可以构成一个新的作用域，其词法标识符就是这个对象的属性，所以可以看到的是a = 2，本质上转变的是obj的属性，而b = 2由于这个作用域下没有找到该变量，所以会沿着作用域链向上查找，由于在foo的作用域内也没有找到，一直到全局作用域都没有找到，所以会给全局增加一个属性，这就将b变为了全局变量，所以我们在全局作用域中可以接见到b。然则我们在with顶用var定义变量时，会将该变量定义到其外层作用域中。

var obj = {a: 1};
with (obj) {
    var b = 2;
    var a = 2;
}
console.log(obj, b, a);  // { a: 2 } 2 undefined

所以我们可以看到的with块内的变量也有着提早声明，然则其提早声明的位置是其上层作用域中。这类行动实在是非常让人明白，将对象放入一个新的作用域，然则同时可以给其上层作用域定义变量。固然在严厉形式中，完整不必忧郁，由于with在严厉形式中被禁用。

动态作用域

动态作用域取决于其挪用体式格局以及在那里挪用，这个听着有点像this啊，没错，在js中唯一的动态作用域就是this，固然也可以叫其耽误绑定。在谈起this之前，起首要知道的是，实行上下文是什么？
每一种代码的实行都依赖于本身的上下文，函数的每一次挪用都邑进入函数实行中的一个上下文，并且在函数每次挪用时都邑发生一个变量对象（假造出来的，实在代码中是接见不出来的，会被视作undefined），函数中的每个变量都可以视为这个变量对象的一个属性，在进入上下文时，起首会对函数的形参举行操纵，将形参增加到变量对象中，然后会对函数声明举行操纵，倘使变量对象中存在同名属性时，同名属性将被掩盖，末了对变量声明举行操纵，倘使变量对象中存在同名属性时，该变量则会被疏忽声明，下面的代码就可以考证我们的这个历程：

function foo (fn) {
    function fn () {}
    var fn;
    console.log(fn);  // [Function: fn]
}
foo();

我们的this和实行上下文没有关联，然则和我们的变量对象有着很大的关联。

在非严厉形式下，this指向null或许undefined时会指向全局对象。

以这个原则来看我们《JavaScript言语精炼》中提到的函数的四种挪用体式格局与this取值的关联：

1.要领挪用形式

var obj = {
    a: 2,
    foo: function () {
        console.log(this.a);
    }
};
obj.foo();

这类状况下，this指向的就是该对象。

2.函数挪用形式

var a = 2;
function foo () {
    console.log(this.a);
}
foo();   // 浏览器环境中：2

// 严厉形式下
var a = 2;
function foo () {
    "use strict";
    console.log(this.a);    // TypeError
}
foo();

这类状况下this应当指向的谁人我们上文所提到的谁人假造出来的变量对象，由于其原本并不存在，所以this指向的undefined，在非严厉形式下指向的是全局window，然则在严厉形式下，制止了这类隐式的转换。函数挪用形式下，this实在可以明白为指向我们假造出来的谁人变量对象。
3.组织器挪用形式
也就是该函数被当作组织函数来挪用，这是起首会在函数内部建立一个空对象，然后在将this指向这个空对象，末了将这个对象返回出去。
4.call与apply挪用
这时候this指向的是其第一个参数。

然则自动有了箭头函数后，箭头函数中的this并非动态作用域，而是属于词法作用域，再其定义时就已肯定好了，相当于function () {}.bind(this)。

    原文作者：zp1996
    原文地址: https://segmentfault.com/a/1190000005862930
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞