美文网首页
如何理解JS中的作用域与作用域链?

如何理解JS中的作用域与作用域链?

作者: Meetin空白 | 来源:发表于2017-12-29 20:13 被阅读0次

大家好~  我是一枚正直纯洁的苦逼程序员!!!!!

1.背景介绍

什么是作用域呢,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

2.知识剖析

1.全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:

(1)在函数外面定义的变量拥有全局作用域,例如:

var a ="全局变量";

function tion(){

console.log(a);

}

tion();

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

function tion(){

var a="变量";

b="全局变量";

console.log(a);

}

tion();//变量

console.log(b);//全局变量

console.log(a);//脚本错误

变量b拥有全局作用域,而a在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都都拥有全局作用域,例如window.name、window.top等等。

var a ='baidu.com';

function text(){

console.log(this.a);

}

text();// 'baidu.com'

window.text();// 'baidu.com'

console.log(window.a);// 'baidu.com'

在上面示例中,a变量和text()函数方法没有指定上级对象,所在二者会被添加到window全局对象,所以直接访问二者与通过window访问本质相同(如,直接访问text()与使用window.text()访问一样)。

3.常见问题

如何更加直观的体现作用域链

4.解决方案

5.编码实战

                  dome

6.扩展思考

如何运用作用域链的知识进行性能优化

其实作用域链就是JS引擎查询数据的一个链表,后定义的覆盖先定义的,查询不到定义的数据就往深一层查询,一直到全局作用域为止 但是越往内层延伸,读写速度就会越慢,查找全局变量是最慢的。所以,在编写代码的时候应尽量少使用全局变量,尽可能使用局部变量。 如果一个跨作用域的对象被引用了一次以上,则先把它存储到局部变量里再使用。例如下面的代码: 

function changeColor(){

document.getElementById("a").onclick=function(){

document.getElementById("b").style.backgroundColor="red";

document.getElementById("a").style.backgroundColor="red"; };

}

这个函数引用了两次全局变量document,查找该变量必须遍历整个作用域链,直到最后在全局对象中才能找到。这段代码可以重写如下: 

function changeColor(){

var a=document.getElementById("a");

var b=document.getElementById("b")

a.onclick=function(){

a.style.backgroundColor="red";

b.style.backgroundColor="red";

}; } 这段代码比较简单,但是如果程序中有大量的全局变量被从新反复访问,那么重写后的代码性能会有显著改善。

7.参考文献

参考: JavaScript 开发进阶:理解 JavaScript 作用域和作用域链

8.更多讨论

三个问题

1.

意思是作用域链就是JS引擎查询数据的一个链表,后定义的覆盖先定义的,查询不到定义的数据就往深一层查询,一直到全局作用域为止 但是越往内层延伸,读写速度就会越慢,查找全局变量是最慢的。所以,在编写代码的时候应尽量少使用全局变量,尽可能使用局部变量。 如果一个跨作用域的对象被引用了一次以上,则先把它存储到局部变量里再使用。

2.

回答 局部变量,因为查询的时候一一级一级的从局部到全局。

3.

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

ppt

视频

相关文章

  • JavaScript 函数闭包(colsure)

    理解闭包,你首先必须理解JS的变量作用域,JavaScript作用域和作用域链。 ES6之前,变量的作用域分为全局...

  • 干货!月薪80k前端大佬面试笔记:JS闭包解析!

    三点注意事项 JS没有块级作用域,只有全局作用域和局部作用域(函数作用域)。 JS中的作用域链,内部的作用域可以访...

  • js中作用域与作用域链

    js中作用域与作用域链 作用域 *作用域基本概念 作用域一般指变量的作用范围,变量分为全局变量和局部变量,对应的作...

  • js 闭包

    一、js 作用域 讲闭包首先就要理解 js 的作用域。再 ES5 中,js 有两种作用域,全局作用域和函数作用域(...

  • 作用域和作用链

    关键词:作用域作用链 作用域 js中没有块级作用域 全局作用域,函数作用域太简单,就不演示(≧▽≦)/啦啦啦 作用...

  • 你不知道的JS-上卷

    作用域整体理解:JS作用域分为函数作用域,全局作用域,with和try catch形成的块级作用域。 JS引擎在编...

  • 作用域与作用域链

    作用域与作用域链 一、作用域 一个变量的作用域(scope)是程序源代码中定义的这个变量的区域。 在JS中使用的是...

  • web性能实践

    一. 作用域 前面我们了解作用域概念的以及作用域链是如何运作的。 随着作用域链中的作用域数量的增加,访问当前作用域...

  • 闭包

    一、理解闭包前js基础1、作用域链(作用域、作用域链中有说)。2、js的内存回收机制。一个函数在执行开始的时候,会...

  • JavaScript函数的执行-作用域链、执行上下文、闭包

    1、作用域与作用域链 作用域 作用域是指程序源代码中定义变量的区域。 作用域规定了如何查找变量,也就是确定当前执行...

网友评论

      本文标题:如何理解JS中的作用域与作用域链?

      本文链接:https://www.haomeiwen.com/subject/tgswgxtx.html