面试官:请你介绍一下let const Object.freeze() ,set和get

2019-11-01 admin

image.png

前端巅峰 每日一题 :

这个系列,每个小伙伴都可以参与出题,可以把你的答案在评论区秀出来,javaScript是一个相当动态的语言,每个人都有自己的风格和见解,欢迎大家踊跃提供每日问题和在下面提供不同的答案~

我每天都会邀请一些人来回答问题,只要回答问题,就可以在评论区打广告

不定期发放奖品(和小姐姐)给大家

第一季:ES6基础系列:

思考题:

let , const , object.freeze() 的区别

从最简单的const开始:

image.png

按上面这样写 会报错

提示:

Assignment to constant variable.

赋值给了常量

但是当我们:

image.png

发现代码正常运行,没有报任何错

那么我再试一下对象:image.png

发现一切运行正常

接下来尝试let:

image.png

发现代码运行正常无报错

我们翻看阮一峰老师的ES6入门:

const:

image.png

let: image.png

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。

但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。

总结来说:const 并不能真正意义上保证 ‘不变’

ES5的浅冻结,使用API Object.freeze()

正常情况下,下面这段代码:

image.png

最终输出:

{a: "a", b: {…}}

a的值是被改变了 可是打开注释的代码 Object.freeze(obj)

最终输出:

{a: 1, b: {…}}

此时a的值并没有被改变,因为它被“冻结”了

上面有提到浅冻结,那么看看修改b的值会不会有效果:

image.png

最终输出如下:

{a: 1, b: {…}}
a: 1
b: {c: 2}

证明b也被冻结了

再次尝试修改C的值:

image.png

输出:

{a: 1, b: {…}}
a: 1
b: {c: 2}

看来Object.freeze()也不能完全冻结,但是万能的程序员小哥哥是不可能屈服的,简单粗暴的递归,深冻结 :

image.png

这时候我们修改了c的值:

发现输出:


{a: 1, b: {…}}
a: 1
b: {c: 2}

看来这次是真的冻住了,不过深冻结也要根据数据的类型判断进行冻结,否则就不能真正意义上的完全冻结。

vue 1.0.18+Object.freeze()提供了支持,对于datavuex里使用freeze冻结了的对象,vue不会做gettersetter的转换。

如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。

但它冻结的是值,你仍然可以将变量的引用替换掉

上面提到的:

可枚举性、可配置性、可写性,以及不能修改已有属性的值

image.png

上面通过Object.defineProperty()定义的属性,访问得到打印输出2

下面对三个属性描述符进行解析:

writable:决定是否可以修改属性的值

image.png

打印输出还是2 ,属性a的值不能被改变

解析:writable:false 可以看作为属性不可改变,在严格模式(“use strict”;)下,引擎会抛出TypeError的异常,这表示我们无法修改一个不可写的属性

configurable:只要属性是可配置的,就可以使用 defineProperty(...)方法来修改属性描述符

注意⚠️

false情况下,如果修改,不管是不是严格模式,都会抛出TypeError的错误

在这种情况下,我们仍可以将可写性的状态由true改为false

delete属性也会被禁止(delete myObject.a;)

emumerable:可枚举,如果将它设置为false,则这个属性将不会出现在枚举中,但可以正常访问他

属性描述符上面有介绍,最后介绍下访问描述符

定义对象时,加入访问描述符:

image.png

正常情况下,访问 p.age 输出18

但是设置p.age=101后:

就会抛出错误


index.html:65 Uncaught Error: invalid value
    at Object.set age [as age] (index.html:65)
    at index.html:71

访问描述符的作用:

get : 每次获取属性时候调用 例如 console.log(p.age) 这时候会调用get

set : 每次设置属性的时候调用 例如 p.age = 101 他们两个甚至可以完全无关

特别提示 ,它们两个的调用逻辑一定要捋清楚,耦合度太高容易进入死循环

著名的Vue框架在2.x版本就借此实现的响应式~

例如 :

image.png

只需要通知所有订阅这个数据改变的组件进行更新,并且传递新的值~

上面只是伪代码,但是大致思想如此

如果感觉写得不错,欢迎点个在看,推荐到朋友圈

另外开源项目 Palantir 目前已经接入微前端,微前端框架正在编写中~

仓库地址:

https://github.com/JinJieTan/Palantir

Palantir仓库地址

欢迎加入~ 我们的大群体,以及交流群,公众号回复:加群

即可加群

[转载]原文链接:https://segmentfault.com/a/1190000020882702

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78767.html

文章标题:面试官:请你介绍一下let const Object.freeze() ,set和get

相关文章
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax <form id="myForm" action="#"&...
2017-04-01
Ant design pro 开发笔记 - 表单和数据绑定
antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecorator('email&#x...
2018-05-25
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
JavaScript和Java
JavaScript和Java在某些方面相似但完全不同。 JavaScript语言类似于Java但是没有Java的静态类型和强类型检查,不过它们的语法和 C 语言都很相似。 JavaScript基于原型的对象模型,而不是更常见的基于类的对象...
2015-11-12
JavaScript基本语法和规范
JavaScript是区分大小写的,使用Unicode字符集。 在JavaScript中,语句以“;”结尾。 JavaScript脚本的源文本被从左到右执行。 虽然有时“;”是不必要的,但我们建议总是在你的语句结束处添加分号;它将避免副作用...
2015-11-12
回到顶部