四、Object.defineProperty总结
Object.defineProperty()
参考:https://segmentfault.com/a/1190000007434923
定义:
方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
语法
Object.defineProperty(obj,prop,descriptor)
#### 参数
obj
需要定义属性的对象。
prop
需定义或修改的属性的名字。
descriptor
将被定义或修改的属性的描述符。
返回值
==返回传入函数的对象,即第一个参数obj==
```
value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
```
一、writable default : false
当writable 为false 时 属性值不允许被修改
var obj={};
Object.defineProperty(obj,"a",
{
value:1
});
obj.a++;
console.dir(obj.a); // 1
02:
var obj={};
Object.defineProperty(obj,"a",
{
value:"shangyy,
writable:true
});
obj.a="huyating";
console.dir(obj.a); //huyating
二、 enumerable 默认为false 是否允许属性被遍历
var obj={uname:"shangyy",age:18};
Object.defineProperty(obj,"a",
{
value:1,
writable:false,
enumerable:false
});
console.dir(Object.keys(obj)); // 0: "uname" 1: "age"
var obj={uname:"shangyy",age:18};
Object.defineProperty(obj,"a",
{
value:1,
writable:false,
enumerable:false
});
console.dir(Object.keys(obj)); // 0: "uname" 1: "age" 2:"a"
三、configurable
是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。
这个属性起到两个作用:
目标属性是否可以使用delete删除
目标属性是否可以再次设置特性
var obj = {}
#### 001 测试目标属性是否能被删除
```
//第一种情况:configurable设置为false,不能被删除。
Object.defineProperty(obj,"newKey",{
value:"hello",
writable:false,
enumerable:false,
configurable:false
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //hello
//第二种情况:configurable设置为true,可以被删除。
Object.defineProperty(obj,"newKey",{
value:"hello",
writable:false,
enumerable:false,
configurable:true
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //undefined
```
002 测试是否可以再次修改特性
```
//第一种情况:configurable设置为false,不能再次修改特性。
Object.defineProperty(obj,"newKey",{
value:"hello",
writable:false,
enumerable:false,
configurable:false
});
//重新修改特性
Object.defineProperty(obj,"newKey",{
value:"hello",
writable:true,
enumerable:true,
configurable:true
});
console.log( obj.newKey ); //报错:Uncaught TypeError: Cannot redefine property: newKey
//第二种情况:configurable设置为true,可以再次修改特性。
Object.defineProperty(obj,"newKey",{
value:"hello",
writable:false,
enumerable:false,
configurable:true
});
//重新修改特性
Object.defineProperty(obj,"newKey",{
value:"hello",
writable:true,
enumerable:true,
configurable:true
});
console.log( obj.newKey ); //hello
```
#### ****getter或setter
==注意:当使用了getter或setter方法,不允许使用writable和value这两个属性==
注意:get或set不是必须成对出现,任写其一就可以。如果不设置方法,则get和set的默认值为undefined
var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
get:function (){
//当获取值的时候触发的函数
return initValue;
},
set:function (value){
//当设置值的时候触发的函数,设置的新值通过参数value拿到
initValue = value;
}
});
//获取值
console.log( obj.newKey ); //hello
//设置值
obj.newKey = 'change value';
console.log( obj.newKey ); //change value
四、Object.defineProperty总结的更多相关文章
- 深入了解Object.defineProperty
原来写文章都是一次写两三个小时写完,偶尔看到一个人的博客了解到还有草稿箱这个功能,所以以后写文章的时候就舒服多了哈哈,可以存起来再发,不需要一口气写完了 最近一直在看JavaScript高级程序设计, ...
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- JS属性描述符之Object.defineProperty()定义对象属性特性
一.Object.defineProperty的作用 用来给对象新增属性,和修改对象中的属性. 二.JS对象中的描述符 js对象中两种属性描述符:数据描述符和存取描述符(访问描述符). 注意事项: 1 ...
- Vue双向绑定的实现原理系列(一):Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- javascript-object对象属性操作之Object.defineProperty
一.基本用法简介 声明一个简单的对象,如下 var obj = { name: 'ldld' } 我们可以用Object.defineProperty来声明这个对象 var obj = {} Obje ...
- 双向绑定Proxy VS Object.defineProperty
Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...
- javascript之Object.defineProperty的奥妙
直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age ...
- Object.defineproperty实现数据和视图的联动
Object.defineproperty语法 var o = {}; // 创建一个新对象 // Example of an object property added with definePro ...
- Vue 双向数据绑定原理分析 以及 Object.defineproperty语法
第三方精简版实现 https://github.com/luobotang/simply-vue Object.defineProperty 学习,打开控制台分别输入以下内容调试结果 userInfo ...
随机推荐
- PostgreSQL 数据库NULL值的默认排序行为与查询、索引定义规范 - nulls first\last, asc\desc
背景 在数据库中NULL值是指UNKNOWN的值,不存储任何值,在排序时,它排在有值的行前面还是后面通过语法来指定. 例如 -- 表示null排在有值行的前面 select * from tbl or ...
- vue源码分析—数据绑定
放进沙里附件拉萨就发牢骚:剑飞:啊撒
- 寒假特训——I - Fair
Some company is going to hold a fair in Byteland. There are nn towns in Byteland and mm two-way road ...
- Loj #6069. 「2017 山东一轮集训 Day4」塔
Loj #6069. 「2017 山东一轮集训 Day4」塔 题目描述 现在有一条 $ [1, l] $ 的数轴,要在上面造 $ n $ 座塔,每座塔的坐标要两两不同,且为整点. 塔有编号,且每座塔都 ...
- 16.ajax_case02
# 抓取当当网书评 # http://product.dangdang.com/25340451.html import json import requests from lxml import e ...
- SQLite也可能出现死锁
提到锁就不得不说到死锁的问题,而SQLite也可能出现死锁.下面举个例子:连接1:BEGIN (UNLOCKED)连接1:SELECT ... (SHARED)连接1:INSERT ... (RESE ...
- 洛谷P1274-魔术数字游戏
Problem 洛谷P1274-魔术数字游戏 Accept: 118 Submit: 243Time Limit: 1000 mSec Memory Limit : 128MB Probl ...
- php设计模式-依赖注入模式(Dependency Injection)
依赖注入模式用来减少程序间的耦合.当一个类要使用另一个类时,一般的写法如下: <?php class Test1 { public function say() { echo 'hello'; ...
- linux命令之df
功能:查看文件系统的磁盘空间使用情况 常用选项: -a 包含虚拟文件系统 -h 可易读单位显示 -i 显示 inode 信息而非块使用量 -k 1K 块的数量 -t 只显示指定文件系统为指定类型的信息 ...
- Python 在 Windows 下安装第三方包,报 Python 未注册的问题解决
保存一些代码为 reg.py,运行之即可. #/usr/bin/env python # -*- coding: utf-8 -*- import sys from _winreg import * ...