Javascript中对象的Obeject.defineProperty()方法-------------(ES5/个人理解)
在讲到Obeject.defineProperty()方法之前先得说明一下ECMAScript中有两种属性:数据属性和访问器属性。
两种属性存在的意义:描述对象属性(key)的一些特性,因为这些属性是内部值,一般放到 [[两个中括号]] 中。
Object.defineProperty(obj , 'key' , {描述信息,是个对象,类似配置项} ) 方法接收三个参数,属性所在的对象,属性名 和一个描述符对象。
数据属性的描述符是下面的一个或者多个(configurable、enumerable、writable 和 value)
访问器属性的描述符是以下的一个或多个(configurable、enumerable、get 和 set)
通过 Object.defineProperty()
方法,可以创建数据属性(并设定其内部属性),也可以创建访问器属性(访问器属性包含 getter
和 setter
函数)
数据属性的各项解释:
enumerable : 可枚举性,是否能通过for-in或者Object.keys来遍历
writable : 可修改(可写入),是否能修改value属性值
value : 属性的属性值 (读出和写入都是从这里读出和保存的),默认undefined 数据属性是可以直接通过 对象.属性obj.key
的形式访问和赋值的
configurable : 是否可配置,当它为false的时候,1、上面三项的true和false值都不能改变了,2、对象本身也不能通过delete来删除3、数据属性和访问器属性也不能来回转化了
访问器属性的各项解释:
configurable 、enumerable同上
get : 读取属性的时候调用,默认值undefined
set : 设置属性的时候调用,默认值undefined
对比数据属性和访问器属性的属性异同
数据属性作用: 修改属性默认的特性 (会新建出数据属性)
访问器的作用: 访问和设置数据属性的属性值,不会创建出 .
1、对象属性的创建对比----- 这里创建的是数据属性不是访问器属性,访问器属性只有一种创建方式
A、字面量创建对象的形式:var obj = {key : value } ------ var person1 = {age : 3} 直接创建了age属性和属性值
B、Object.defineProperty(obj ,'key' {...} )创建对象 ------ var person2 = {}; Object.defineProperty(person2, "age", { value: 3 });
通过统一的操作 :
① console.log(person1 .name) ② person1.age = 4 ③ console.log(person1 .name) 得出 // 3 , 赋给了新的值
① console.log(person2 .name) ② person2.age = 4 ③ console.log(person2 .name) 得出 // 3 , 3 赋值没有成功
原理:
直接在对象上定义的属性var obj = {key : value }(字面量形式和new Object()形式
) ,它们的Configurable、Enumerable 和Writable特性都被设置为 true,而Value特性被设置为指定的值
通过 Object.defineProperty()定义的属性 它们的Configurable、Enumerable 和Writable特性都被设置为 false,而Value特性被设置为指定的值,这时候的属性值是只读的
2、重点:数据属性不仅可以直接访问和设置(对象.属性/obj.key的形式),也可以通过定义的访问器(getter setter)来专门访问和设置。
得出结论:
① 通过发现book下面并没有真正的year属性,证明了数据属性并不能根据访问器属性来定义创建,访问器属性只是操作访问器属性,这个属性可以理解为是在get和set这一动态读取和设置的过程中发挥作用。
② set
和get
是一对勾子(hook)函数,要理解触发机制(是根据调用book.year或者设置book.year=2005这个时间点触发的,所以这个year可以随便取值):就是访问器属性在调用时,实际上对应触发访问器属性中定义的 get
方法(最后返回的值是其中return出来的结果),当对一个对象的某个属性赋值时,则会自动触发调用相应的set
函数。(如果不了解运行机制,需要打断点走一遍即可)
③ book只有_year和edtion两个数据属性(是不是数据属性,要看带不带value属性),year不是数据属性(访问属性不包含数据值,也不会显式的写出来),但是但是book.hasOwnProperty("year");
确实返回 true
。说明了访问器属性也属于对象自己添加的属性。只是读写方式和普通的不一样。
3、再来撸一遍代码,看看运行的原理具体是怎样的??


4、怎么区分数据属性还是访问器属性???看里面的描述符对象。两者是不能混用的。
5、js中的属性的理解:
javascript中一共有三种属性:
普通属性:也就是常规的数据属性,这种属性是用户来添加修改等,把它设置成什么样,就返回出来什么样,不会做些额外的事情。 var obj ={name : "yang"};那么console.log(obj.name) //yang
内部属性:比如数组arr的length属性,函数的prototype属性,DOM节点的innerHTML属性,用户赋完值以后,取值的时候,不一定按预期,有时候还会额外的做一些事情,也难以改变他们的行为。
比如说某一数组,它的长度为10, 当我们设置它为11时,它就会增加一个undefined元素,再设置为9时,就会从后面删掉两个元素。
函数的prototype如果被改变,相当于将其父类改变了,会new不同类型的实例。
DOM的innerHTML,我们赋值时是一个字符串,再取出时,这字符串可能会与原来的不一样, 并且在原元素上生成了不一样的子节点。
访问器属性,允许用户在赋值或取值都经过预先设定的函数,从而实现内部属性的那一种特殊效果。
6、应用(可以代替对象中的getter和setter函数)
==
其他地方:vue框架MVVM的数据双向绑定,数据的实时观察,不同于angular使用的脏检查。
7、和Object.defineProperty()相关的一些对象方法。
obj.propertyIsEnumerable('key')
obj.hasOwnProperty('key') 可以检测出访问器属性
Obeject.getOwnpropertyDescriptor(obj , 'key') 或者描述符对象 ----- 有就返回对象,否则是undefined。
Object.keys(obj)方法,遍历key值 。 当Object.defineProperty()中enumerable为false的时候,是遍历不出来的。
8、其他
Obeject.prototype的configurable是false,代表不可配置
对象obj的toString方法是原型链上的是不可枚举的 obj.propertyIsEnumerable(toString') // false
最后:不要再IE8 及以前版本 中使用 Object.defineProperty()
Javascript中对象的Obeject.defineProperty()方法-------------(ES5/个人理解)的更多相关文章
- javascript中对象的不同创建方法
javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascr ...
- 【你不知道的javaScript 上卷 笔记7】javaScript中对象的[[Prototype]]机制
[[Prototype]]机制 [[Prototype]]是对象内部的隐试属性,指向一个内部的链接,这个链接的作用是:如果在对象上没有找到需要的属性或者方法引用,引擎就 会继续在 [[Prototyp ...
- 深入了解JavaScript中的Symbol的使用方法
这篇文章主要介绍了深入了解JavaScript中的Symbol的使用方法,本文针对ES6版本的JS进行讲解,需要的朋友可以参考下 Symbol 是什么? Symbols 不是图标,也不是指在代码中可以 ...
- JavaScript中对象的属性
在JavaScript中,属性决定了一个对象的状态,本文详细的研究了它们是如何工作的. 属性类型 JavaScript中有三种不同类型的属性:命名数据属性(named data properties) ...
- javascript中对象字面量的理解
javascript中对象字面量与数组字面量 第一部分 我们知道JavaScript中的数据类型有基本数据类型和引用类型,其中Object类型就是非常常用的类型.那么如果创建一个Object类型的实例 ...
- 关于JavaScript中对象的继承实现的学习总结
一.原型链 JavaScript 中原型链是实现继承的主要方法.其主要的思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.实现原型链有一种基本模式,其代码如下. function Super ...
- javascript中对象的深度克隆
记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...
- 总结Javascript中数组各种去重的方法
相信大家都知道网上关于Javascript中数组去重的方法很多,这篇文章给大家总结Javascript中数组各种去重的方法,相信本文对大家学习和使用Javascript具有一定的参考借鉴价值,有需要的 ...
- JavaScript中对象转换为原始值的规则
JavaScript中对象转换为原始值遵循哪些原则? P52 对象到布尔值对象到布尔值的转换非常简单:所有的对象(包括数字和函数)都转换为true.对于包装对象亦是如此:new Boolean(fal ...
随机推荐
- 史上最全的SpringMVC学习笔记
SpringMVC学习笔记---- 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于Spring ...
- Leetcode: Battleships in a Board
Given an 2D board, count how many different battleships are in it. The battleships are represented w ...
- 1.1 C#简介
大家好,这是我的C#(读做 "C sharp")学习之旅,先简介一下我了解的C#吧! 首先,说到C#,就不得不提到微软的.NET..NET是微软推出的软件开发和运行平台,允许应用程 ...
- Git 一些关于 Git、Github 的学习资源
一些关于 Git.Github 的学习资源 昨天浏览 Github 的是时候发现了 Githug 这个游戏,这个游戏用来帮助菜鸟们学习使用 Git 的. Githug is designed to g ...
- Android开发新手学习总结(一)——使用Android Studio搭建Android集成开发环境
[新手连载]一:使用Android Studio搭建Android集成开发环境http://bbs.itcast.cn/forum.php?mod=viewthread&tid=87055&a ...
- ThinkPHP讲解(十)——第三方类的引入:以分页为主
第三方类的引入,以分页类为例: 1.在控制器里新建一个分页的操作方法FenYe() 注意:第三方类Page.class.php放在Think或Home文件夹下,并新近一个文件夹,放在里面,并在其类里加 ...
- 白话LINQ系列2---以代码演进方式学习LINQ必备条件
今天,我们通过一个简单的示例代码的演进过程,来学习LINQ必备条件:隐式类型局部变量:对象集合初始化器:委托:匿名函数:lambda表达式:扩展方法:匿名类型.废话不多说,我们直接进入主题. 一.实现 ...
- uber 真是垃圾
uber司机好几次都不认识路,态度也不好,最开始使用是因为它价格最便宜,随着滴滴/快的价格下调,已经没有再使用uber的必要,果断卸载.
- Centos7下安装配置Redsocks
Redsocks是一个开源的网络程序,代码依赖开源的libevent网络库.Redsocks允许你将所有TCP连接重定向到SOCKS或HTTPS代理,比如Shadowsocks(Centos7下安装配 ...
- IOS new Date() 时间转换失败问题以及其他问题
一: ios下必须标准格式用'/'分割格式 转换没问题: new Date('2016/5/30 12:15:20') 二:ie9兼容模式以及以下ie版本 console用前需判断 if(windo ...