JS自学——快速了解词法作用域及欺骗词法作用域

简介: JS自学——快速了解词法作用域及欺骗词法作用域

词法作用域

首先,先来说一下词法作用域: 词法作用域就是定义在词法阶段的作用域。用更容易理解的话来说, 词法作用域就是由你在写代码时将块变量和块作用域写在哪里来决定的

if(true){
    let b = 1
   }

如代码所示,在if里面声明了一个变量b,那么b的词法作用域就在if的块区域之中。变量声明'出生'在哪,那么它的词法作用域就是在哪。

欺骗词法作用域

如上所述,词法作用域就是由你在写代码时将块变量和块作用域写在哪里来决定的,但是Javascript中存在两个机制可以去欺骗词法作用域,它们违背了词法作用域的规则,所以我们称之为欺骗词法作用域。

1.eval()

eval()可以接受一个字符串作为参数,它将原本不属于此处的代码搬到此处,让代码执行的就像天生就定义在此处一样

function foo(str, a){
    eval(str)
    console.log(a,b)
    }
    
    foo('var b = 3', 1)   //输出结果为 1 3
其实,这段代码就等同于
js
代码解读
复制代码
function foo(str, a){
    var b = 3   //eval(str)
    console.log(a, b)
    }
    
    foo('var b = 3', 1)

原本'var b = 3'是在全局作用域上,但eval()函数将之搬入函数foo()作用域中,使其成为了foo里面的代码,违背了词法作用域的规则,所以称为欺骗词法。

2.with

with()一般用来批量的去修改一个对象中的值,我们这里来说说with()泄露属性值,以此来欺骗词法作用域


function foo(obj){
    with(obj){
        a = 123
        }
    }
var o1 = {
    a: 555
}
var o2 = {
    b: 555
}
foo(o1.a) 
console.log(o1.a)//输出结果为 123
foo(o2.b) 
console.log(o2.b)//输出结果为 555
console.log(a) //输出结果为123

如同,我们可以看到,我们访问a的结果为123。在全局作用域中,a并没有被声明,由此可见,with()这个语句,把a这个属性泄露到了全局作用域上面。原因是因为当with()修改对象中不存在的属性时,会将该属性直接泄露到全局作用域。所以 a = 123 相当于写在了全局中

总结

词法作用域就是由你在写代码时将块变量和块作用域写在哪里来决定的
1.eval()可以接受一个字符串作为参数,它将原本不属于此处的代码搬到此处,让代码执行的就像天生就定义在此处一样
2.当with()修改对象中不存在的属性时,会将该属性直接泄露到全局作用域。


相关文章
|
17天前
|
JavaScript 前端开发
浅谈js作用域
浅谈js作用域
25 0
|
3月前
|
JavaScript 前端开发 开发者
JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。
【6月更文挑战第27天】JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。变量默认值为`undefined`,函数则整体提升。`let`和`const`不在提升范围内,存在暂时性死区。现代实践推荐明确声明位置以减少误解。
32 2
|
6天前
|
JavaScript 前端开发
JavaScript基础知识-作用域(action scope)
关于JavaScript基础知识中作用域的介绍。
15 1
JavaScript基础知识-作用域(action scope)
|
4天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域
18 9
|
10天前
|
JavaScript 前端开发
使用 let 将有助于避免 JavaScript 中各种 var 引起的作用域问题。
这段内容介绍了JavaScript编程时的一系列最佳实践,包括使用`===`而非`==`进行比较、以`let`和`const`取代`var`定义变量、始终使用分号、采用合适的命名规范、利用模板字符串拼接、偏好ES6箭头函数、在控制结构中使用大括号、减少代码嵌套、应用默认参数、正确使用`switch`语句中的`break`与`default`分支、避免通配符导入以及简化布尔判断和避免不必要的三元运算符。遵循这些规则有助于提升代码的清晰度和可维护性。
13 2
|
25天前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
28天前
|
自然语言处理 资源调度 JavaScript
JS 逆向基础篇:JS作用域和浏览器对象属性补环境
JS 逆向基础篇:JS作用域和浏览器对象属性补环境
46 1
|
1月前
|
自然语言处理 JavaScript 前端开发
探析JS作用域
【8月更文挑战第2天】探析JS作用域
31 11
|
9天前
|
JavaScript 前端开发
|
11天前
|
自然语言处理 JavaScript 前端开发
JavaScript 中的作用域
【8月更文挑战第29天】
9 0