Javascript writable特性介绍


Posted in Javascript onFebruary 27, 2015

说起js中的那些特性标记,总觉得有些怪怪的,那为什么要说到这个attribute,起源于对一个问题的疑问,我们都知道window对象其实就是

浏览器窗口的一个实例,既然是一个实例,那这个实例就应该有“属性”和“方法“,比如下面这样:

Javascript writable特性介绍

我们平时都在使用function的时候,都会定义一些属性,比如name,age等等,并且还可以对他们进行delete,set和update操作。

Javascript writable特性介绍

那么下面问题来了,既然我的person对象的name都可以动态修改,按照这个道理的话,我也应该可以修改window下的undefined值,然后就非常感兴趣的想看一看。

Javascript writable特性介绍

结果还是可想而知,我并没有成功修改undefined的值,那为什么会这样呢?没有道理呀,它又不是上一篇所说的包装类型,但我们不得不尊重结果,这就说明js底层肯定是做了些什么才会导致这样的结果,其实在底层js默认用了Writable=false标记才让undefined属性不可写入,下面具体看看。

 

一:[Writable]特性

说到属性是否可写,也许你会联想到C#中的get/set访问器,又或者是readonly关键字,下面你肯定会感兴趣我应该怎么做到属性的只读操作。在js中你只要使用defineProperty方法就可以了。

Javascript writable特性介绍

 从上面的例子中可以看到三点好玩的东西:

<1>:  我使用了defineProperty方法将person.name变成了只读字段,那有人要说了,这明明是方法,怎么会是特性,特性在我的思维里面就是

         【xxx】模式,所以这就是js的不同之处,毕竟js没有语法糖,所以定义特性只能是通过底层公开的方法来定义,也就是defineProperty。

 

<2>:  我在方法中不仅看到了writable,还有一个configurable,那这个是干什么的?其实这个就是基础配置,告诉js引擎是否可以delete,update属性,当我把configurable设为false的时候,你就不可以delete p.Name了,因为这会是一个无效操作。  

    Javascript writable特性介绍

看完了这些我觉的你应该明白了,为什么undifined不能delete和update了。都是标记做的怪,是不是觉得很有意思?

<3>: 下一个值得思考的问题就是js引擎到底是怎么做到的,在C#里面也是有Atrribute,并且这个Atrribute被编译器编译后会记录到元数据中,然后你就可以放心大胆的使用反射来获取你的Atrribute中的任何值,比如说Serializable序列化类,它就是告诉SerializableFormat怎么去反射读取类,哪些字段可以序列化,哪些不可以,不可以的你需要用NonSerialized标记。

 [Serializable]

     public class Test

     {

         [NonSerialized]

         public string Name;

    }

Javascript writable特性介绍

从图中可以看到IL中已经记录了Name为notserialized特性了,我们知道js中并没有反射,所以突破口自然就在defineProperty方法里面,但是比较遗憾,我们看不到这个方法底层的源码到底是怎么样的,所以就不知道它对Name这个字段到底做了什么才可以动态的导致它不可写,只能根据理解去猜测js引擎可能会发生的行为。

Javascript 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 #Javascript
JavaScript函数详解
Feb 27 #Javascript
浅谈JavaScript的事件
Feb 27 #Javascript
JS实现图片放大镜效果的方法
Feb 27 #Javascript
浅谈javascript中的instanceof和typeof
Feb 27 #Javascript
js实现有时间限制消失的图片方法
Feb 27 #Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 #Javascript
You might like
PHP中的事务使用实例
2015/05/26 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
js Calender控件使用详解
2015/01/05 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
Vue实现手机计算器
2020/08/17 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python selenium 三种等待方式解读
2016/09/15 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
策划创业计划书
2014/02/06 职场文书
家长通知书教师评语
2014/04/17 职场文书
安全教育主题班会总结
2015/08/14 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Golang 结构体数据集合
2022/04/22 Golang