如何延长作用域链_谈一谈javascript作用域

最新推荐文章于 2022-10-13 15:18:44 发布

weixin_39667652

最新推荐文章于 2022-10-13 15:18:44 发布

阅读量102

点赞数

文章标签：如何延长作用域链

本文链接：https://blog.csdn.net/weixin_39667652/article/details/111285492

版权

从今天开始研究讨论javascript作用域，感兴趣的同学请保持关注

什么是javascript作用域？

作用域是指程序源代码中定义变量的区域。
作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。谈起javascript作用域你会想到哪些知识点？

函数作用域块级作用域闭包变量提升let 暂时性死区var let constthis一个变量的生命周期(从有到无)全局作用域局部作用域作用域链

等等，这些都是关于作用域的知识点，
我下载了几个源码，我们观察一些图片
jquery.js

vue.js

axios.js

上面的三个图，你会发现他们在结构上有一个共同点

(function(){

//。。。代码

}('参数'))

为什么要这么设计？

我们看一个栗子?

let hisName = '郭靖'

function hero() {

let herName = "黄蓉"

let hisName = "洪七公"

console.log(hisName);//=>洪七公

}

hero()

console.log(hisName);//=>郭靖

console.log(herName);//Uncaught ReferenceError: herName is not defined

输出

//=>洪七公

//=>郭靖

//Uncaught ReferenceError: herName is not defined

hero内部的hisName变量覆盖了外部的全局的hisName变量，hero外部无法访问hero内部的变量(hero内部的变量被保护起来，形成了私有变量)

上面的栗子?做一下改动

let hisName = '郭靖'

function hero() {

let herName = "黄蓉"

function likeFun() {

let like = '喜欢'

console.log(`${herName}喜欢${hisName}`);//=>黄蓉喜欢郭靖

}

likeFun()

console.log(like);//ReferenceError: like is not defined

}

hero()

输出

//=>黄蓉喜欢郭靖

//ReferenceError: like is not defined

通过上面的两个小栗子，我们可以得出以下结论：

内部可以访问外部变量，外部不可以访问内部变量函数进行了嵌套，其实也是作用域进行了嵌套，js 会从内向外一层一层查找，找到后就返回，找不到就报错，形成了作用域链

一个栗子?

const element='123321'

const arr1 = [1, 2, 3, 4, 5]

const arr2 = ['a', 'b', 'c', 'd', 'e']

arr1.forEach(element => {

console.log('element1:', element);

arr2.forEach(element => {

console.log('element2:', element);

})

});

虽然可读性很差，但是当内部没有对外部进行引用时，这么写也是允许的，

继续看一个栗子?

let a = 1;

let b = 2;

function add(x,y) {

let a = 10;

let b = 20;

return a+b+x+y

}

function sum(x,y) {

let a = 'a';

let b = 'b'

console.log(a+b+x+y);

}

console.log(add(a,b));//=>33

sum(a,b)//=>ab12

add 和sum两个函数，它们将内部逻辑和全局进行了隔离，尽管外部(全局)存在变量a和变量b，
但是对函数内部没有影响，拿add来说，函数add如何与window进行交流，
(当然，交流不是必须的)如果要交流，以参数作为输入，以return作为输出(联想一下import和export)

打印一下全局变量

console.log(window)

现在全局作用域下多了几个变量：add，sum 。a和b呢？
⚠️：let和const声明的变量不在window下，用var声明的变量会在window下，我们今天不讨论var

所以上面的栗子中的全局变量只有函数add和函数sum
当我们的项目越来越庞大的时候，过多的全局变量必然存在危险，首当其冲的就是变量的命名冲突，
或许你千方百计的对你的变量名称进行唯一化，命名了一些很长的，自认为不会引起冲突的名字，但是当你引入了第三方js库时，并且那个第三方库并没有妥善的处理自有变量，这时候依然存在命名冲突的风险，这并不能从根本上解决问题。
我们要最大限度的减少全局变量
现在我们对上面的栗子进行优化

function aFun(params) {

let a = 1;

let b = 2;

function add(x, y) {

let a = 10;

let b = 20;

return a + b + x + y

}

function sum(x, y) {

let a = 'a';

let b = 'b'

console.log(a + b + x + y);