js词法作用域和作用域的理解_什么是javascript词法作用域?

时间: 2018-01-17阅读: 1190标签: js知识

一、作用域

1. JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像var a = 2 这样的声明会被分解成两个独立的步骤:
第一步(编译阶段):var a 在其作用域中声明新变量。这会在最开始的阶段,也就是代码执行前进行。
第二步(运行阶段):a = 2 会查询变量a(LHS查询)并对其进行赋值。

2. LHS & RHS(当前作用域->上级作用域->...->全局作用域)
LHS(左侧):试图找到变量的容器本身
RHS(右侧):查找某个变量的值
function foo(a){  
    var b = a;  
    return a + b;  
}  
var c = foo(2);  
// LHS(3处):c;a(隐式变量分配);b;  
// RHS(4处):foo(2);=a;a;b;


3. 异常  

function foo(a){  
    console.log(a + b);  
    b = a;  
}  
foo(2);

(1)在ES5“严格模式”下,LHS抛出ReferenceError;“非严格模式”下,LHS会自动隐式的创建一个全局变量。
(2)RHS查询在所有嵌套的作用域中遍寻不到所需遍历会抛出ReferenceError。
(3)RHS查询到一个变量,但你尝试对其不合理的操作(引用null或undefined类型中的属性),会抛出TypeError。
一句话概括之:ReferenceError同作用域判别失败相关;而TypeError则代表作用域判别成功了,但是对结果的操作是非法或不合理的。
PS:从原理上阐述了博客中《JavaScript函数及其prototype》函数执行覆盖等问题!!! 

 

二、词法作用域

词法作用域:定义在词法阶段的作用域,即书写代码时函数声明的位置决定的。词法分析器处理代码时会保持作用域不变(大部分是这样的),会知道全部标识符在哪里以及如何声明的,从而预测在执行过程中如何对他们进行查找。

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。JavaScript中有两个机制可以“欺骗”词法作用域:eval(...)和with。


1. eval
eval函数可以接受一个字符串参数,并将其中的内容视为好像在书写时存在于程序中这个位置的代码(在当前位置,可生成代码,并运行)。
eval可以对一段包含一个或多个声明的“代码”字符串进行演算,并借此修改已经存在的词法作用域(运行阶段)。  

function foo(str,a){  
    eval(str);  
    console.log(a, b);          //1 , 3  
    console.log(a, window.b);   //1 , 2  
}  
var b = 2;  
foo("var b = 3;", 1);

解释:上述全局变量b被覆盖了,由于b是全局的,可以window.b获取到;但非全局的变量如果被覆盖,就无法访问到了!
严格模式下: 

function foo(str,a){  
    "use strict";  
    eval(str);  
    console.log(a, b);          //1 , 2  
    console.log(a, window.b);   //1 , 2  
}  
var b = 2;  
foo("var b = 3;", 1);


 2. with

with通常被当作重复引用一个对象中的多个属性的快捷方式,可以不需要重复引用对象本身。
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,表明a泄漏到全局作用域上了!

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化,导致代码运行速度变慢,建议不要使用它们!
PS:从原理上阐述了博客《 JavaScript语言精粹【糟粕、毒瘤】》中with不能使用的原因!!! 


 

三、函数作用域和块作用域

1. 匿名和具名
/* 匿名(引用自身只能用过期的arguments.callee引用) */  
setTimeout(function(){  
    console.log("i wait 1 second!")  
},1000);  
/* 具名(可读性好) */  
setTimeout(function timeoutHandler(){  
    console.log("i wait 1 seco nd!")  
},1000);

2. 立即执行函数表达式
/* IIFE模式 */  
var a = 2;  
(function IIFE(global){  
    var a = 3;  
    console.log(a);         //3  
    console.log(global.a);  //2  
})(window);  
/* UMD模式 */  
var b = 2;  
(function UMD(def){  
    def(window);  
})(function tmpF(global){  
    var b = 3;  
    console.log(b);         //3  
    console.log(global.b);  //2  
});


3. 块作用域
try/catch会创建一个块作用域
try{  
    undefined();  
}catch(err){  
    console.log(err);   //可以正常使用  
}  
console.log(err);   //ReferenceError: err is not defined  
  
/* 坑1 */  
for(var i=0;i<10;i++){}  
console.log(i);     //10  
/* 坑2 */  
{  
    console.log(bar);   //undefined 不会报错!!  
    var bar = 2;  
}

4.ES6中引入新的let关键字!!
/* 填坑1 */  
for(let i=0;i<10;i++){}  
console.log(i);     //SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode  
/* 填坑2 */  
{  
    console.log(bar);   //SyntaxError 报错!!  
    let bar = 2;  
}


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/365

javascript中什么是句柄?

一个句柄是指使用的一个唯一的整数值,即一个4字节(64位程序中为8字节)长的数值,来标识应用程序中的不同对象和同类中的不同的实例。

javascript不可变性是什么?

不可变性即某个变量在进行了某个操作之后,其本身没有发生变化,比如对于字符串而言,对字符串的任何操作都会改变字符串本身的值,而是在字符串的基础上复制出来一个然后再改变,这样我们就说是不可变的

为什么javascript不起作用?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

javascript怎么判断按钮被点击?

JavaScript可以通过Event对象的target事件或srcElement(IE浏览器支持)来判断按钮是否被点击。Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

javascript由几部分组成?

JavaScript有三部分组成。分别为核心(ECMAScript) 、文档对象模型(DOM)、浏览器对象模型(BOM)。这三部分分别描述了该语言的语法和基本对象、处理网页内容的方法和接口、与浏览器进行交互的方法和接口。

Js输出方式有哪些?

在编写JavaScript代码的时候, 一定要记住每一句代码后面都需要添加一个分号, 并且这个分号必须是英文的分号,我们会发现有时候不写分号程序也能够运行, 这里并不是因为不需要分号, 而是浏览器自动帮助我们添加了分号

7个常见的 JavaScript 测验及解答

我相信学习新事物并评估我们所知的东西对自己的进步非常有用,可以避免了我们觉得自己的知识过时的情况。在本文中,我将介绍一些常见的 JavaScript 知识。请享用!

Js中constructor指向问题

首先用一个例子指出来constructor存在形式。由上面的代码我们总结出结论1:上面的代码在控制台可以看出constructor是指向构造器Fruit的引用。这个地方就有点奇怪了。这个constructor到底指向的是那个实例的构造器?

javascript难点是什么?

javascript难点是什么?下面本篇文章就来给大家介绍一下10个JavaScript难点,感兴趣的小伙伴们可以参考一下,希望对大家有所帮助。立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字

Js如何获取ul中li的个数?

javascript如何获取ul中li的个数?下面本篇文章就来给大家介绍一下使用javascript获取ul中li个数的方法,希望对大家有所帮助。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广