JS核心之作用域

Alan 发布于2019-08-26 11:29 / 1100人阅读

摘要：作用域链在执行上下文创建的时候，在变量对象之后创建作用域链，作用域链本身就包含变量对象，当函数被调用的时候，作用域链包含的是激活对象。我们可以用这个属性来假定作用域链的连接，它指的是链中的下一个对象。

什么是作用域

作用域是运行代码中某些特定部分的变量，函数和对象的可访问性及生命周期

javascript中的作用域

在javascript中有两种类型的作用域
1.全局作用域
2.局部作用域
在函数内部定义的在局部作用域内，而在函数外定义的变量在全局作用域内，调用时的每个函数创建一个新的作用域

全局作用域

当你开始在文档中编写代码时，你已经在全局作用域内，整个js环境中只有一个全局作用域，如果在函数外部定义了一个变量，他就在全局作用域内。

// 全局作用域
var name = "哈士奇"

全局作用域的变量可以在任何其他作用域内访问或更改

// 全局作用域
var name = "哈士奇";

console.log(name); // 哈士奇

//局部作用域
function logName(){
    name = "泰迪";
    console.log(name);
}

logName();

局部作用域

在函数内定义的变量在局部作用域内，对于每个函数的调用，它们都有不同的作用域，这意味着具有相同名称变量可以用于不同的函数，只是因为这些变量被绑定到它们各自的函数。每个函数具有不同的作用域，并且在其他作用域中是不可访问的。

function foo(){
    var name = "哈士奇";
    console.log(name);
}

function bar(fn){
    var name = "泰迪";
    fn();
}

bar(foo);    // 哈士奇

无论函数在哪里被调用，也无论他如何被调用，他的作用域都只由函数声明时的位置决定的

查找

作用域查找会在找到第一个匹配的标识符时停止。在多层的嵌套作用域中可以可以定义同名的变量，这叫做遮蔽效应(内部的变量遮蔽了外部的变量)

function foo(){
    var name = "哈士奇"
    function bar(){
        var name = "泰迪"
        console.log(name)
    }
    bar(); //泰迪
    console.log(name); // 哈士奇
}

foo();

欺骗词法

javascript中的eval函数可以接受一个字符串为参数，并将其中的内容好像在书写时就存在于程序中这个位置的代码。

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

var b = 2;

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

在执行eval()之后的代码时，引擎并不知道或在意前面的代码是以动态形式插入进来，并对作用域的环境进行修改的，引擎只会如往常对词法作用域进行查找。

块作用域

像块语句if和switch条件或while与for循环不创建一个新的作用域，在块语句内定义的变量将保留在它们已经存在的作用域内

if(true){
    var name = "哈士奇"
}

console.log(name);    // 哈士奇

在ES6中新增的const和let关键字可以在块语句内声明局部作用域。

if(true){
    let name = "哈士奇";
}

console.log(name); // not defined

执行上下文堆栈

因为javascript是单线程语言，一次就只能执行一个函数，其他的函数会在执行上下文中排队，
即会形成执行上下文堆栈。

在javascript引擎开始执行代码时，它进入全局执行上下文，它是堆栈的底部和第一个元素。然后，全局代码提供一些初始化，创建所需的对象和函数。在执行全局上下文期间，其代码可能激活一些其他（已创建的）函数，这些函数将进入其执行上下文，将新函数推送到堆栈上，依此类推。初始化完成后，运行时系统正在等待一些事件（例如用户的鼠标点击），这将激活一些功能，并将进入新的执行上下文。

执行上下文

每个函数都会创建自己的执行上下文，但只能有一个全局上下文。执行上下文可以被简单的表示一个对象，它拥有下面的属性

变量对象(Variable object)

变量对象是一个数据容器与执行上下文相关联。这是一个存储上下文中定义的变量和函数声明的特殊对象(请注意函数表达式)不包括在变量对象。

var name = "哈士奇"
function foo(){}
(function bar(){});

console.log(this.name = "哈士奇"); //true
console.log(bar); //bar is not defined;

全局上下文的变量对象将具有以下属性

激活对象

当调用函数时，将创建一个称为激活对象的特殊对象，他填充了形式参数和arguments对象，然后激活对象被用作函数上下文的变量对象。

function foo(x, y){
    var z = 30;
    function bar(){}
    (function baz(){});
}

foo(10, 20);

foo函数的上下文里有这些属性，并且函数表达式bar没有被包含在变量对象中。

作用域链

在执行上下文创建的时候，在变量对象之后创建作用域链，作用域链本身就包含变量对象，当函数被调用的时候，作用域链包含的是激活对象。
当被要求解析变量时，JavaScript始终从代码嵌套的最内层开始，并保持对父作用域的连接，直到找到变量或其他所需的资源。作用域链可以简单地定义为包含其自己的执行上下文的变量对象的对象，以及父作用域的所有执行上下文。

var x = 10;
 
(function foo() {
  var y = 20;
  (function bar() {
    var z = 30;
    console.log(x + y + z);
  })();
})();

我们可以用__parant__这个属性来假定作用域链的连接，它指的是链中的下一个对象。

海外云主机服务器托管 js作用域和上下文作用域中作用域作用域规则

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107016.html

【JavaScript】核心语法之作用域

摘要：作用域一作用域是什么就是变量和函数所被访问范围，控制变量和函数的可见性和生命周期作用域分为全局作用域和局部作用域全局作用域是指在所有函数之外声明的变量，因为当前文档中的其他代码可以访问它局部作用域是指在函数内部声明的变量，因为该函数只能在它 JS(JavaScript)作用域；一.作用域是什么；就是变量和函数所被访问范围，控制变量和函数的可见性和生命周期作用域分为全局作用域和局部作用域...

huashiou 2019-08-23 11:32 评论0 收藏0
1-5. Vue.js核心知识之组件化

摘要：组件是最强大的功能之一。组件的创建和注册我们可以使用注册一个全局组件。父组件的数据需要通过才能下发到子组件中。如果传入的数据不符合要求，会发出警告。这对于开发给他人使用的组件非常有用。组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件的创建和注册我们可以使用 Vue.component(tagName, opti...

weknow619 2019-08-23 18:00 评论0 收藏0
JavaScript 闯关记

摘要：对象数组初始化表达式，闯关记之上文档对象模型是针对和文档的一个。闯关记之数组数组是值的有序集合。数组是动态的，根闯关记之语法的语法大量借鉴了及其他类语言如和的语法。《JavaScript 闯关记》之 DOM（下） Element 类型除了 Document 类型之外，Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素...

mj 2019-08-21 18:45 评论0 收藏0
JavaScript 之核心语法 [ 函数和作用域 ]

摘要：函数描述表示定义一段代码，并且可重复使用函数的定义函数声明方式字面量表达方式函数声明方式语法函数名称小括号不可省去函数体函数声明方式在定义函数时，函数体中的内容不会被执行哑吼吼调用函数使用函数名称调用函数的时候会执行函数体中的内容字面量方函数描述表示定义一段JavaScript代码，并且可重复使用函数的定义函数声明方式字面量表达方式函数声明方式语法 function...

joy968 2019-08-23 10:59 评论0 收藏0
node学习系列之基础(二)

摘要：由于这种特性，某一个任务的后续操作，往往采用回调函数的形式进行定义。另外，回调函数本身的第一个参数，约定为上一步传入的错误对象。这种写法有一个很大的好处，就是说只要判断回调函数的第一个参数，就知道有没有出错，如果不是，就肯定出错了。 REPL环境在命令行键入node命令，后面没有文件名，就进入一个Node.js的REPL环境（Read–eval–print loop，读取-求值-输出...

zhaot 2019-08-22 10:40 评论0 收藏0