javascript 作用域详解

作用域理解:定义的变量、函数生效的范围。javascript 有全局作用域和函数作用域两种。注:es6实现let 块级作用域不是js原生的,底层同样是通过var实现的。如果想了解具体细节,请访问babel官方 对es6中let 进行解析。

执行上下文

范围:一段内或者一个函数内;
全局:函数声明、变量声明 。范围:;
函数:函数声明、变量声明、this、arguments。范围:一个函数内部;

函数、变量声明提升

<script>
        foo(); //打印a
        var foo = 1;
        function foo (){
            console.log(’a‘)
        };
        console.log(foo); //1
</script>

//实际的执行顺序为
<script>
        function foo(){  //函数声明优先于变量的声明
            console.log("a");
        }
        //var a ;  重复声明,这儿被省略了。
        foo(); //打印a
        foo = 1;  //给foo赋值为1
        console.log(foo); //1
</script>

当js引擎执行一个 执行上下文代码块时,执行顺序为:
1.函数声明 function a(){};(函数优先) 注:let a = function (){}; 这是变量的声明和赋值,不是函数的声明。
2.变量声明 var a; 注:刚开始只对变量进行声明,没有进行赋值,如果 在赋值之前使用到这个变量 值为:undefined。
3.执行上下文为函数作用域时:确定this和arguments。
4.按照js单线程和异步策略依次执行 作用域中的代码。

我们习惯将 var a = 2; 看作一个声明,而实际上 JavaScript 引擎并不这么认为。它将 var a和 a = 2 当作两个单独的声明,第一个是编译阶段的任务,而第二个则是执行阶段的任务。这意味着无论作用域中的声明出现在什么地方,都将在代码本身被执行前首先进行处理。可以将这个过程形象地想象成所有的声明(变量和函数)都会被“移动”到各自作用域的最顶端,这个过程被称为提升。要注意避免重复声明,特别是当普通的 var 声明和函数声明混合在一起的时候,否则会引起很多危险的问题!

作用域链

自由变量:当前作用域没有定义的变量,但是上层作用域定义了,可以在此层作用域中使用的变量。
作用域链:当使用一个变量时候,先在自己的作用域里找,如果没有找到,再到父级作用域找,一直找到全局作用域,如果都没有找到即报错。

块级作用域

js无块级作用域,仅有全局作用域和函数作用域两种作用域。
ES6 通过对全局作用域的特殊实现,实现了js的块级作用域 let;
let 的生效范围为 { };
const 为定义常量。注:定义的常量的值存储的内存地址不可变动,值是可变的比如常量中定义的是数组 或者对象时候,可以通过数组或对象方法操作原数据,只要不重新赋值就没问题。

原文地址:https://www.cnblogs.com/honkerzh/p/10566804.html

时间: 2024-10-11 07:13:58

javascript 作用域详解的相关文章

javascript运动详解

javascript运动详解 本文给大家详细介绍下如何使用javascript来实现运动效果,总结的十分全面,附上各种效果的详细示例和演示图,有需要的小伙伴可以参考下. 物体运动原理:通过改变物体的位置,而发生移动变化. 方法: 1.运动的物体使用绝对定位 2.通过改变定位物体的属性(left.right.top.bottom)值来使物体移动.例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动. 步骤: 1.开始运动前,先清除已有定时器 (因为:是连续点击按钮,

javascript事件详解笔记

javascript事件详解笔记: 一.事件流 1.事件流: 描述的是页面中接受事件的顺序,有事件冒泡.事件捕获两种. 2.事件冒泡: 由最具体的元素接收,然后逐级向上传播到最不具体的元素的节点(文档). 3.事件捕获: 最不具体的节点先接收事件,而最具体的节点应该是最后接收事件. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title&

JavaScript prototype 详解(对prototype 使用的一些讲解)

对JavaScript有一定了解的你,对jquery不陌生吧,那你看jQuery源代码的时候对prototype 也一定有见过,如果对prototype有疑问或者想更深入的去了解与使用它,欢迎你继续往下阅读. 最初的用法是, 为了避免方法在构造器里随机数据被实例化时而产生重复的副本  后来被用在"继承"上面了, 注意, JS语义上是没有继承的, 这里说的是人为的实现.对于下面对JavaScript中类型名称叫做"对象"."函数"."类型

Javascript学习--------详解window窗口对象

对话框: 警告对话框:alert(): 语法:window.alert(src)或者alert(src); 询问回答对话框:confirm(): 语法:window.confrim(question)或者confrim(question); 单击确认,返回true: 单击取消,返回false 提示对话框:prompt(): 语法:window.prompt([showtxt],[defaultTxt])或者prompt([showtxt],[defaultTxt]); 单击确认,返回输入的文本:

JavaScript事件详解-zepto的事件实现

zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们可以看到,整个event模块,事件绑定核心就是on和off,还有一个trigger用来触发,类观察者模式,可以先看看汤姆大叔的深入理解JavaScript系列(32):设计模式之观察者模式,其余皆为实现的处理函数.首先来个demo: $("#btn").on("click&quo

javascript 函数详解2 -- arguments

今天我们接着上篇文章来继续javascript函数这个主题.今天要讲的是函数对像中一个很重要的属性--arguments. 相关阅读: javascript 函数详解1 -- 概述 javascript 函数详解2 -- arguments Javascript 函数详解3 -- this对象 Javascript 函数详解4 -- 函数的其他属性 Javascript 函数详解5 -- 函数对象的内部函数 arguments对象参数数组引用 arguments是函数对象内部一个比较特殊的类数组

JavaScript正则表达式详解(一)正则表达式入门

JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望对于大家学习JavaScript正则表达式有一定的帮助. 建立正则表达式对象语法 re = new RegExp(/pattern/[flags]) flags 参数说明: g (全文查找出现的所有 pattern) i (忽略大小写) m (多行查找) 普通字符 描述 \ 将下一个字符标记为一个特

JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 exec方法的返回值 exec方法返回的其实并不是匹配结果字符串,而是一个对象,简单地修改一下execReg函数,来做一个实验就可以印证这一点: function execReg(reg, str) { var result = reg.exec(str); alert(typeof result

JavaScript 对象详解

1 创建对象的方法 最常见的创建对象方法是通过new调用构造函数,此外还有一个方法就是使用Object.create(),将一个原型对象作为参数传递给Object.create也可以创建一个继承了其属性的新对象.但是和使用new创建对象还有一点差别,那就是构造函数不会被调用.所以如果使用这种方法创建一个foo新对象,其foo.f是undefined的: function Foo(z) { this.f = z; } Foo.prototype.add = function(x, y) { ret