全局作用域和局部作用域

全局作用域

局部作用域：函数作用域

全局作用域在全局和局部都可以访问到，局部作用域只能在局部被访问到

var name="cyy";

function fn(){

    var age=25;

    console.log(name);//cyy

    console.log(age);//25

}

fn();

console.log(name);//cyy

console.log(age);//报错age is not defined

js没有块级作用域，此处依然是全局变量

if(){

    //全局变量

}

for(){

    //全局变量

}

在函数内，用var声明的变量是局部变量，没有用var的是全局变量

function fn(){

    var x=y=1;

}

fn();

console.log(y);//1

console.log(x);//x is not defined
var name="cyy";

function fn(){

    name="cyy2";//没有用var，所以这里修改的直接是外面的全局变量name

    console.log(name);//cyy2

}

fn();

console.log(name);//cyy2

变量对象和作用域链

此处全局作用域下有name变量和fn函数，实际上都是window对象上的

全局作用域的变量对象的属性和方法，看得见摸得着，可以访问

var name="cyy";

function fn(){

    var age=25;

    function fn2(){

        var gender="girl";

    }

}

console.log(window.name===name);//true

console.log(window.fn===fn);//true

此处fn下有age变量和fn2函数

局部作用域的变量对象的属性和方法，看不见摸不着

访问不存在的变量，会报错

访问不存在的属性，不会报错

这里补充一下：一开始我用name进行测试，出现了意想不到的情况

后来发现name是js对象的内置属性，应尽量避免命名时使用，建议使用 _name

打印window对象即可查看到name

console.log(window._name);

console.log(_name);

 作用域链：

如果要查找一个变量，首先会在当前作用域内查找；

如果没有，就去上一级作用域内查找；

直至到window

因此，里层可以访问到外层的变量，但是外层无法访问到里层的变量

延长作用域链的方法

with()相当于开辟了一个新的作用域

里面的属性，找不到的话会去外层window上查找

但是不推荐使用with，会带来后续其他问题

var person={};

person.name="cyy";

person.age=25;

var score=90;

console.log(person.name);//cyy

console.log(person.age);//

console.log(score);//

with(person){

    name="cyy2";

    age=cyy2;

    score=99;

}

console.log(person.name);//cyy2

console.log(person.age);//cyy2

console.log(score);//

循环添加点击事件，获取到每个点击按钮的index

单击方法需要在循环外面定义，否则只会输出循环结束后的 i 的值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button>1</button>

    <button>2</button>

    <button>3</button>

<script>

var btns=document.querySelectorAll("button");

for(var i=0,len=btns.length;i<len;i++){

    myClick(i);

}

function myClick(i){

    btns[i].onclick=function(){

        alert(i);

    }

}

</script>

</body>

</html>

不存在的变量或函数会报错；不存在的属性或方法，返回undefined；||是短路操作，形如a||b，如果a的值转换成布尔值是true的话，a||b等于a；如果a的值转换成布尔值是false的话，a||b等于b

此处window.person = undefined，因此返回window.person="cyy"

//console.log(person || (person="cyy"));//报错，person is not defined

console.log(window.person || (window.person="cyy"));//cyy

如果在循环中直接绑定点击事件，由于在循环时只是绑定；等到去点击按钮是，循环早已结束，因此 i 永远都是循环结束后的值

var btns=document.querySelectorAll("button");

for(var i=0,len=btns.length;i<len;i++){

    btns[i].onclick=function(){

        alert(i);//

    }

}

JS解析机制：预解析

最简单的情况

var age=25;

function fn(){

    var age=26;

    console.log(age);//

}

fn();

JS的解析过程：

预解析

逐行读代码

var age=25;

function fn(arg){

    console.log(age);

    var age=26;

}

fn();

/*

js的解析机制：

window:

    age undefined 25

    fn function fn(arg){

            console.log(age);//undefined

            var age=26;

            console.log(age);//25

        }

fn:

    arg（参数也作为局部变量） undefined

    age undefined

首先查找所有的var，将var声明的变量都赋值给undefined

函数直接拿过来

读取时，由于函数已经声明完了，所以正常执行时直接跳过

直接执行fn()

console.log(age)中的age是预解析的undefined

*/

变量名冲突：预解析时都是undefined

var age=25;//预解析：undefined

...

var age=26;//预解析：undefined

变量和函数名冲突：预解析时跳过变量名，只声明函数

var age=25;//预解析：undefined

function age(){

}

函数与函数名冲突：预解析时选择后面一个函数，第一个函数被干掉

function age(){

    var age=24;

}

function age(){

    var age=25;

}

在某些老版本浏览器，比如低版本火狐中，无法解析 if 或者 for 内部的函数

所以不推荐在代码块里定义函数

if(){

    function fn(){

    }

}

for(){

    function fn2(){

    }

}

变量的解析机制：

以var 声明的变量会预解析

以let 声明的变量不会预解析

函数的声明会预解析

函数表达式不会预解析

document.write(fn);

function fn(){}

函数的声明在预解析时就已经被提前声明了

函数变量的赋值，预解析时被定义为undefined

document.write(fn);//undefined

var fn=function(){}

提前打印后面的变量，打印出来是undefined

console.log(age);//预解析为undefined

var age=25;

如果没有用var声明，则无法进行预解析，这样提前打印时，不知道有该变量的存在，就会报错

console.log(age);//报错

age=25;
console.log(a);//打印出预解析的结果，是函数a()

var a=1;

console.log(a);//

function a(){

    console.log(2);//跳过没有执行

}

console.log(a);//

var a=3;

console.log(a);//

function a(){

    console.log(4);//跳过没有执行

}

console.log(a);//

a();//此时a是3，不能当做函数执行，因此报错

/*

预解析时先查找var：找到var a=1;和var a=3；预解析结果为undefined

然后查找到函数，发现函数a与变量重名，此时变量被干掉

由于存在两个重名函数，前面的函数被干掉，因此a的预解析结果为：

function a(){

    console.log(4);

}

*/

预解析是分标签进行的

此处上下没有联系，会报错

<script>

    console.log(a);//报错

</script>

<script>

    var a=1;

</script>

但是上下顺序对换不会出现问题，因为已经正常执行了，与预解析无关

<script>

    var a=1;

</script>

<script>

    console.log(a);//

</script>
    var a=1;//undefined 1

    function fn(){

        console.log(a);//undefined

        var a=2;//undefined 2

    }

    fn();

    console.log(a);//

当函数内部没有var时，不会进行预解析，变量就会通过作用域链进行查找

如果函数内部存在var，会进行预解析，变量提前打印就会是undefined

    var a=1;//undefined 1

    function fn(){

        console.log(a);//1 没有var进行预解析，通过作用域链找到外面的a

        a=2;//没有var进行预解析，通过作用域链改变a

    }

    fn();

    console.log(a);//

参数作为局部变量，也会进行预解析

    var a=1;//undefined 1

    function fn(a){

        //a作为参数，也是局部变量，也会进行预解析

        console.log(a);//undefined

        a=2;//此处修改参数a为2，全局变量没有影响

    }

    fn();

    console.log(a);//
    var a=1;//undefined 1

    function fn(a){

        //a作为参数，也是局部变量，也会进行预解析

        console.log(a);//undefined 1

        a=2;//此处修改参数a为2，全局变量没有影响

    }

    fn(a);//执行时参数为a=1

    console.log(a);//

内存管理与垃圾收集机制

释放无用的数据，回收内存

自动  JS

手动  Objective-C

原理：找出无用的数据，打上标记，释放内存；周期性执行

标记策略：标记清除   引用计数（不常用）

IE

JS : BOM  DOM

老版本IE的BOM和DOM，是在c++ COM的基础上来实现的，基于引用计数法

因此即使使用了标记清除法，还是存在循环引用的问题

内存管理

设置为null，即为解除引用

JS中变量、作用域的本质，定义及使用方法的更多相关文章

  1. JS中变量和常量的定义

    var只能声明一个变量,这个变量可以保存任何数据类型的值 ES6之前并没有定义声明常量的方式,ES6标准中引入了新的关键字const来定义常量 使用const定义常量后,常量无法改变 const a= ...

  2. JS中的作用域及闭包

    1.JS中的作用域 在 es6 出现之前JS中只有全局作用域和函数作用域,没有块级作用域,即 JS 在函数体内有自己的作用域,但是如果不是在函数体的话就全部都是全局作用域.比如在 if.for 等有 ...

  3. 聊一下JS中的作用域scope和闭包closure

    聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...

  4. JS中的作用域以及全局变量的问题

    一. JS中的作用域 1.全局变量:函数外声明的变量,称为全部变量 局部变量:函数内部使用var声明的变量,称为局部变量在JS中,只有函数作用域,没有块级作用域!!!也就是说,if/for等有{}的结 ...

  5. js中变量的声明

    大家都知道js中变量的声明是要提前的,下面有4个样例: 1.if(!"t" in window){  var t = 1; }       alert(t);答案是undefine ...

  6. 【详解】JS中的作用域、闭包和回收机制

    在讲解主要内容之前,我们先来看看JS的解析顺序,我们惯性地觉得JS是从上往下执行的,所以我们要用一个变量来首先声明它,来看下面这段代码: alert(a); var a = 1; 大家觉得这段代码有什 ...

  7. 【授课录屏】JavaScript高级（IIFE、js中的作用域、闭包、回调函数和递归等）、MySQL入门（单表查询和多表联查）、React（hooks、json-server等） 【可以收藏】

    一.JavaScript授课视频(适合有JS基础的) 1.IIFE 2.js中的作用域 3.闭包 4.表达式形式函数 5.回调函数和递归 资源地址:链接:https://pan.baidu.com/s ...

  8. JS中数值类型的本质

    一.JS中的数值类型 众所JS爱好友周知,JS中只有一个总的数值类型--number,它包含了整型.浮点型等数值类型.其中,浮点数的实现思想有点复杂,它把一个数拆成两部分来存储.第一部分是有效位数,也 ...

  9. 第7.26节 Python中的@property装饰器定义属性访问方法getter、setter、deleter 详解

    第7.26节 Python中的@property装饰器定义属性访问方法getter.setter.deleter 详解 一.    引言 Python中的装饰器在前面接触过,老猿还没有深入展开介绍装饰 ...

  10. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

随机推荐

  1. .net core 常见设计模式-IChangeToken

    场景 一个对象A,希望它的某些状态在发生改变时通知到B(或C.D),常见的做法是在A中定义一个事件(或直接用委托),当状态改变时A去触发这个事件.而B直接订阅这个事件 这种设计有点问题B由于要订阅A的 ...

  2. XSS Challenges学习笔记 Stage#1~ Stage#19

    开门见山 Stage #1 http://xss-quiz.int21h.jp/?sid=2a75ff06e0147586b7ceb0fe68ee443b86a6e7b9 这一道题发现我们写入的内容直 ...

  3. 使用shiro 框架 报错No WebApplicationContext found: no ContextLoaderListener or DispatcherServlet registered?

    1.问题描述:ssm 框架中使用shiro  中出现问题 原来web.xml 文件如下: <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, ...

  4. ogg trail文件序列号不一致

    一.Cause 在某些情况下,对于一个已经running的OGG进程,对已同步的数据(正确的同步或者错误的同步)做修改,修改完之后,需要保持一个一致点,从一致点继续同步. 这时需要人工干涉产生一个新的 ...

  5. .net core3.1 下由Autofac接管IOC

    我们都知道,.net core天生自带IOC容器,但是他的功能其实并不强大,而且有坑:在构造注入的时候,他默认找参数最少的构造函数. 这里,我讲解如何使用Autofac去接管IOC,至于为什么要选Au ...

  6. 使用.NET Core优雅获取并展示最新疫情数据

    前言 新型冠状病毒的出现,着实让人紧张.我每天一大早都会去查看今天的最新数据,可是每次的数据都挺让人揪心的.今天突然间很想看看过去的历史的数据,结果查了很多资料都不是很全.反正国家让我们待在家里做贡献 ...

  7. 深入理解JVM-类加载及类加载器

    深入理解JVM 2020年02月06日22:43:09 - 记录学习过程 终于开始了.在学习这个之前,看了zhanglong老师的 java 8 和springboot 迫不及待了.先开始吧. 写在前 ...

  8. Codeforces_733_D

    http://codeforces.com/problemset/problem/733/D 先给边排序,然后按3条边排序,只要判断相邻是否能组成长方体. #include<iostream&g ...

  9. Flyway 的使用及Spring Boot集成Flyway

    一.简单介绍 Flyway 是一个开源.跨环境的数据库迁移工具,它强烈主张简单性和约定性而不是配置. Flyway 是一个便于多人开发对数据库管理的工具,将sql语句写入文件中,只需要在控制台输入指令 ...

  10. Android Spinner 下拉框简单应用 详细注解

    目录 Android Spinner 代码部分 Spinner代码介绍 核心代码 说在最后 @ Android Spinner Spinner 提供下拉列表式的输入方式,该方法可以有效节省手机屏幕上的 ...