北大青鸟设计培训:js解析机制与闭包分析?

JavaScript011

北大青鸟设计培训:js解析机制与闭包分析?,第1张

随着互联网的不断发展,程序员在学习JavaScript编程开发上也有了更多的了解,今天我们就简单分析一下关于JavaScript编程解析机制以及闭包的一些常见问题。

js解析机制:js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{}在扫描js代码时会把:1、用声明的方式创建的函数的名字2、用var定义的变量的名字存到这个词法环境中3、同名的时候:函数声明会覆盖变量,下面的函数声明会覆盖上面的同名函数4、函数的值为:对函数的一个引用变量的值为undefined5、如果用函数表达式的方式创建一个函数:varfn=function(){}这样词法环境中存的是一个变量名fn,并赋值为undefined在调用函数的时候如果在函数上面调用就会出现和变量一样的情况报错undefined这也是以两种不同方式创建函数的区别闭包:定义:(有多种定义)1、(比较通俗的定义):函数嵌套函数,内部函数可以引用外部函数的参数和变量,这些参数和变量不会被垃圾回收机制所回收2、在计算机科学中,闭包是词法闭包的简称,是引用了自由变量的函数,这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外(意思就是不会被销毁)。

3、闭包是由函数和其相关的引用环境组合而成的实体。

(潜台词就是这个函数将和引用环境同时存在,必须有引用)综合来说,不管怎么定义都是在围绕着两个本质:函数在引用变量,这个变量将不会被销毁。

闭包的一个作用就是:我们能够通过闭包的方法来在外部访问到一个内部函数的变量很多人在解释闭包的时候都会把子函数return出去以后在外部调用,其实无论在哪里调用,闭包都已经形成了,只要是函数嵌套函数,并且子函数引用了父函数的变量,(不论子函数有没有被调用,电脑培训http://www.kmbdqn.cn/认为这个用一种方法证明:在子函数内部打断点,在f12中观察闭包里的内容,已经出现了引用函数,这时候调用还没有被执行)这个时候闭包已经形成了。

JS中万物都是对象,今天就深度讲一下Object的里面到底有什么。文章主要讲对象的自有属性和原型中的属性,至于原型链就不在这篇文章多讲了。

创建对象的方法有如下几种

Object.assign() 方法用于将其他对象的可枚举属性复制到目标对象(即第一个参数对象)

常用于将某个对象合并到新对象{}。

常用于继承某个构造函数的原型属性,但是不能继承该构造函数的实例属性,例如上面例子

该属性是实现vue双向数据绑定的核心,这里主要讲它的使用方法。

讲它的相关用法时,就得先理解 的概念。

1.数据属性

数据属性的四个特性

configurable: 表示是否能被delete删除属性且能重新定义该属性。

enumerable: 表示能否通过for-in遍历的属性。

writable: 表示是否能修改属性。

value: 属性的值。

2.访问器属性

数据属性不包含数据值,包含一对get和set的核心方法,在读取访问器属性时,就是通过这两个方法进行操作处理的。

访问器属性的四个特性

configurable: 表示是否能被delete删除属性且能重新定义该属性。

enumerable: 表示能否通过for-in遍历的属性。

get: 读取属性时调用的方法,默认值是undefined。

set: 写入属性时调用的方法,默认值是undefined。

从图中可以看到访问器属性的configurable和enumerable两个属性的默认值都是false,如果后面要对该访问器属性进行delete删除时,将configurable转化成true即可。

从图可以看出该对象具有四个属性,

(defineProperty、defineProperties、getOwnPropertyDescriptor、getOwnPropertyDescriptors)

这四个属性是分为两对:defineProperty vs getOwnPropertyDescriptor、defineProperties vs getOwnPropertyDescriptors。

意思为属性设置和属性的获取解析,第一对上面讲过了,这里就大概说一下第二对的意思,也就是支持设置对个属性,获取多个属性的意思。

Object.defineProperties()

Object.getOwnPropertyDescriptors()

打印出对象的所有属性

Object.entries() 方法返回一个给定对象

Object转Map

new Map()构造函数接受一个二维数组,而Object.entries()方法生成一个二维数组,所以对象、数组、字数串转化为Map结构变得简单。

正常对象的数据属性都可以被 但是通过以下方法,改变了数据属性的四大特性。

相对应的检测方法,返回Boolean。

举例

Object.freeze()方法可冻结对象,冻结后,对象属性不能删除,修改以及添加,只能for...in读取。

该对象方法和==与===运算符相似,但是有明显区别。

Object.is与==比较

== 会将两边的操作数进行隐式转化,之后再进行比较,但是Object.is就不会进行转化。

Object.is与===比较

=== NaN和NaN不等,-0与+0相等,但是Object.is就认为NaN和NaN是相等,而-0和+0是不相等的。

所以总的来说这两个的相似程度比== 运算符更相近。

Object.keys()返回一个 名称(键)的数组

Object.values()返回可枚举属性值得数组

Object.setPrototypeOf(obj, prototype)

为对象obj设置新的原型对象。

注意

如果对象的[[Prototype]]被修改成不可扩展(通过 Object.isExtensible() 查看),就会抛出 TypeError 异常。如果 prototype 参数不是一个对象或者 null (例如,数字,字符串,boolean,或者 undefined ),则什么都不做。否则,该方法将 obj 的 [[Prototype]] 修改为新的值。

下篇文章 JS 对象(Object)的深入解析—原型属性