美文网首页
js高级知识点(第五天)

js高级知识点(第五天)

作者: js66 | 来源:发表于2019-08-08 22:18 被阅读0次

所用域

什么是作用域

变量起作用的范围

什么是块级作用域,使用代码块限定的作用域是块级作用域(let声明的变量是块级作用域)

js的作用域叫词法作用域

词法作用域

在代码写好的时候,就能确定变量的作用域,这种作用域就是词法作用域。

动态作用域。(是词法作用域就不可能是动态作用域)

在js中只有函数才能创造作用域。

var num = 123

function f1(){

console.log(num) // 123

}

function f2(){

var num = 456;

f1();

}

f2();

变量提升

js代码的运行分为两个阶段

预解析阶段

变量名和函数提升

将var声明的变量名和function开头的函数进行提升

提升到作用域的最上方

执行阶段

注意:

1.变量和函数同名的时候

只提升函数,忽略变量名

2.函数同名的时候

都提升,但是后面函数覆盖前面的函数

3.函数表达式,只会提升变量名,不会提升函数

4.变量提升只会将变量和函数提升到当前作用域的最上方。

5.变量提升是分块的

function foo(){

var num = 123;

}

6.条件函数式声明是否会被提升(取决于浏览器,有的浏览器支持,有的浏览器不支持)

条件式声明不推荐去写

foo()// 报错,未被提升

if(true){

function foo(){

console.log(1)

}

}

7.作用域链

只要是函数都有作用域,函数内部的作用域可以访问外面的作用域

当多个嵌套的时候,就会形成一个链式的结构,这就是作用域链

绘制作用域图的步骤

1.先绘制0级作用域链

2.在全局作用域中查找,变量和函数的声明,找到之后,将所用的变量和函数用小方格放在0级作用域上。

3.再从0级作用域链上的函数引出1级作用域链

4.再去每一个1级作用域链中查找变量和函数声明,知道之后。。。。

5.以此重复,就画好了整个作用域链。

变量的搜索规则

1.首先在访问变量的作用域中查找该变量,如果找到直接使用

2.如果没有找到,就去上一级作用域中查找,如果找到了就直接使用

3.如果没有找到,继续去上一级作用域中查找,如果找到了就直接使用

4.如果找到了就用,如果没有没有找到就报错。

闭包。

闭包是什么,

一个封闭的对外不公开的包裹结构

js的闭包是函数

闭包要解决的问题

1.在函数外部访问不到函数的数据

2。要解决的问题就是需要在外部访问函数内部的变量

闭包的基本结构

function outer(){

var data = '21321';

return data;

}

function outer(){

            var data = "数据";

            return {

                getData:function(){

                    return data;

                },

                setData:function(value){

                    data = value;

                    return data;

                }

            }

        }

闭包的作用

如果把数据放在全局作用域内,那么所有人都可以随意更改,这个数据就不再可靠。

闭包可以创建一个私有空间,在这个空间内部的数据,外部无法直接访问。

外部空间想要访问函数内部的数据,只能通过闭包提供的指定的方法,在这个方法内部设置校验规则,让数据变得更加安全。

作用域链图如下:

相关文章

  • js高级知识点(第五天)

    所用域 什么是作用域 变量起作用的范围 什么是块级作用域,使用代码块限定的作用域是块级作用域(let声明的变量是块...

  • JS高级知识点

    TDZ(暂时性死区) 学习暂时性死区之前需要先了解一下var,let和const的区别(变量提升可分为创建提升和初...

  • js高级知识点(第六天)

    # js高级知识点 ## 线程 - 一个线程一次只能处理一件事情,多个线程可以多个事情同是进行。 **js中,分三...

  • JS高级知识点汇总

    1.作用域 局部作用域:函数内部就是局部作用域。 ①在局部作用域申明的变量称为局部变量,局部变量只能在当前函数内部...

  • js常见知识漏洞整理

    前言 本文主要摘录《js高级程序设计》,也就是我们常说的红宝书,其中一些比较少见的知识点,处理技巧。 知识点列表 ...

  • 程序员用javascript实力打造流星雨特效

    知识点:canvas高级绘图标签API运用,数组方法,js逻辑思维,代码性能优化等。?css代码: ?javasc...

  • css3动画高级应用开发唱吧首页图片飞入效果

    知识点: html/css布局思维,定位、浮动详解,css3动画高级应用,过渡属性解析,js应用,企业布局思维运用...

  • 最新web前端相关课程学习链接

    js基础篇 js进阶篇 js高级篇 vue基础篇 vue高级篇 react基础 react高级 Nodejs基础 ...

  • js小知识点

    js小知识点 整理 js小知识点 (一):获取元素 1:document.getElementById('id名'...

  • JS高级

    JS高级 原型 函数高级 对象高级 本地存储 cookie localStorage sessionStorage...

网友评论

      本文标题:js高级知识点(第五天)

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