前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Object.definePropety

Object.definePropety

作者头像
WindRunnerMax
发布于 2020-08-27 02:38:56
发布于 2020-08-27 02:38:56
53800
代码可运行
举报
文章被收录于专栏:Czy‘s BlogCzy‘s Blog
运行总次数:0
代码可运行

defineProperty

Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,也就是说,该方法允许精确地添加或修改对象的属性。

语法

Object.defineProperty(obj, prop, descriptor) obj: 要定义属性的对象。 prop: 要定义或修改的属性的名称或Symboldescriptor: 要定义或修改的属性描述符。

属性描述符

对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可以是可写的,也可以是不可写的。存取描述符是由getter函数和setter函数所描述的属性。一个描述符只能是数据描述符和存取描述符这两者其中之一,不能同时是两者。

属性描述符

configurable

enumerable

value

writable

get

set

数据描述符

可以

可以

可以

可以

不可以

不可以

存取描述符

可以

可以

不可以

不可以

可以

可以

如果一个描述符不具有valuewritablegetset中的任意一个键,那么它将被认为是一个数据描述符。如果一个描述符同时拥有valuewritablegetset键,则会产生一个异常。 此外,这些选项不一定是自身属性,也要考虑继承来的属性。为了确认保留这些默认值,在设置之前,可能要冻结Object.prototype,明确指定所有的选项,或者通过Object.create(null)__proto__属性指向null

configurable

当且仅当该属性的configurable键值为true时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除,默认为false,默认值是指在使用Object.defineProperty()定义属性时的默认值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
// 非严格模式下操作静默失败,即不报错也没有任何效果
// 严格模式下操作失败抛出异常

var obj = {};
Object.defineProperty(obj, "key", {
    configurable: true,
    value: 1
});
console.log(obj.key); // 1
Object.defineProperty(obj, "key", {
    enumerable: true // configurable为true时可以改变描述符
});
delete obj.key; // configurable为true时可以删除属性
console.log(obj.key); // undefined
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = {};
Object.defineProperty(obj, "key", {
    configurable: false,
    value: 1
});
console.log(obj.key); // 1
Object.defineProperty(obj, "key", {
    enumerable: true // configurable为false时不可以改变描述符 // Uncaught TypeError: Cannot redefine property: key
});
delete obj.key; // configurable为false时不可以删除属性 // Uncaught TypeError: Cannot delete property 'key' of #<Object>
console.log(obj.key); // undefined

enumerable

当且仅当该属性的enumerable键值为true时,该属性才会出现在对象的枚举属性中,默认为 false

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = { a: 1 };
Object.defineProperty(obj, "key", {
    enumerable: true,
    value: 1
});
for(let item in obj) console.log(item, obj[item]); 
/* 
  a 1
  key 1
*/
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = { a: 1 };
Object.defineProperty(obj, "key", {
    enumerable: false,
    value: 1
});
for(let item in obj) console.log(item, obj[item]); 
/* 
  a 1
*/

value

该属性对应的值,可以是任何有效的JavaScript值,默认为undefined

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = {};
Object.defineProperty(obj, "key", {
    value: 1
});
console.log(obj.key); // 1
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = {};
Object.defineProperty(obj, "key", {});
console.log(obj.key); // undefined

writable

当且仅当该属性的writable键值为true时,属性的值,才能被赋值运算符改变,默认为 false

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = {};
Object.defineProperty(obj, "key", {
    value: 1,
    writable: true
});
console.log(obj.key); // 1
obj.key = 11;
console.log(obj.key); // 11
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = {};
Object.defineProperty(obj, "key", {
    value: 1,
    writable: false,
    configurable: true
});
console.log(obj.key); // 1
obj.key = 11; // Uncaught TypeError: Cannot assign to read only property 'key' of object '#<Object>'
Object.defineProperty(obj, "key", {
    value: 11 // 可以通过redefine来改变值,注意configurable需要为true
});
console.log(obj.key); // 11

get

属性的getter函数,如果没有getter,则为undefined。当访问该属性时,会调用此函数,执行时不传入任何参数,但是会传入this对象,由于继承关系,这里的this并不一定是定义该属性的对象。该函数的返回值会被用作属性的值,默认为undefined

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = { __x: 1 };
Object.defineProperty(obj, "x", {
    get: function(){ return this.__x; }
});
console.log(obj.x); // 1
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = { __x: 1 };
Object.defineProperty(obj, "x", {
    get: function(){ return this.__x; }
});
console.log(obj.x); // 1
obj.x = 11; // 没有set方法 不能直接赋值 // Uncaught TypeError: Cannot set property x of #<Object> which has only a getter

set

属性的setter函数,如果没有setter,则为undefined。当属性值被修改时,会调用此函数,该方法接收一个参数,且传入赋值时的this对象,从而进行赋值操作,默认为undefined

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = { __x: 1 };
Object.defineProperty(obj, "x", {
    set: function(x){ this.__x = x; },
    get: function(){ return this.__x; }
});
obj.x = 11;
console.log(obj.x); // 11
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"use strict";
var obj = { __x: 1 };
Object.defineProperty(obj, "x", {
    set: function(x){ 
        console.log("在赋值前可以进行其他操作");
        this.__x = x; 
    }
});
obj.x = 11;

相关

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Js严格模式 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/Js%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F.md
Js遍历对象 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/Js%E9%81%8D%E5%8E%86%E5%AF%B9%E8%B1%A1%E6%80%BB%E7%BB%93.md

每日一题

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://github.com/WindrunnerMax/EveryDay

参考

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
学习VUE总得知道Object.defineProxy怎么使用吧
工作归工作,不要觉得会用就完事了,很多时候得多看看基础。今天就专门讲一下Object.defineProxy是如何使用的,这样在以后讲到Vue2.X的源码时,就更容易理解了。
伯约同学
2022/02/14
2870
双向数据绑定中重要属性-Object.defineProperty()详解
给这个对象添加一个fullName属性,fullName的值为obj.firstName-obj.lastName
用户10106350
2022/10/28
8070
双向数据绑定中重要属性-Object.defineProperty()详解
详解JavaScript之神奇的Object.defineProperty
摘要: JavaScript有个很神奇的Object.defineProperty(),了解一下?
Fundebug
2018/07/05
6130
[OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-中-es6-Object.defineProperty()定义属性
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
landv
2020/07/17
7010
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
**通过结果我们发现, enumerable属性值为true 时可以被枚举, 不为true时是不可以被枚举的 **
全栈若城
2024/02/29
1170
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
聊聊 Object.defineProperty()
如果我们直接为对象添加一个属性,比如 obj.a = 10 我们说 a 是 普通属性,他的值既可以被改变,也可以被删除,还可以被for..in 或 Object,keys 枚举遍历。
mafeifan
2019/06/17
6920
彻底搞懂Object.defineProperty
早在大半年前,掘金某位用户分享的面试题整理中有一题,简述let与const区别,你能自己模拟实现它们吗?,题目意思大概如此,时间久远我也很难找到那篇文章,当时看到此题对于const实现我的想法就是有个writable属性可以定义值是否可以修改,不过也只是脑中一闪,并未细究。
zz_jesse
2021/01/06
1.7K0
彻底搞懂Object.defineProperty
【春节日更】理解Object.defineProperty方法
经常听到使用Object.defineProperty 数据劫持,它是如何实现劫持的呢?除了数据劫持还可以做啥呢?今天,就来详细认识一下它
用户9914333
2022/07/22
2600
【春节日更】理解Object.defineProperty方法
Object.defineProperty方法详解
Object.defineProperty() 方法在 JavaScript 中被用来直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。这个方法允许你精确地控制属性在对象上的行为,包括属性的值、可写性、可枚举性和可配置性。
jack.yang
2025/04/05
1240
JS入门难点解析13-属性描述符,数据属性和访问器属性
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
2.1K0
JS入门难点解析13-属性描述符,数据属性和访问器属性
代码世界的构建有一个不可或缺的支柱(如何让代码更加稳健)
最近学JavaScript的过程中,有幸学到了一个新的知识点----属性描述符,尽管它在业务代码中可能并不常见,但是许多库源码中都有它的身影,比如vue
一枕眠秋雨
2024/03/11
1090
【面试题解】Object.defineProperty 都能 \&#34;define\&#34; 什么?
可以看到,我分别打印了原始对象,修改属性后的对象,添加属性后的对象。如果第二个参数 prop 存在,则是修改属性操作,如果 prop 不存在,则是添加属性操作。
一尾流莺
2022/12/10
3100
【面试题解】Object.defineProperty 都能 \&#34;define\&#34; 什么?
强大的JS方法Object.defineProperty详解及VUE.JS双向绑定原理
我们知道对象是由多个键/值对组成的无序集合。对象当中的属性可以是任意类型的值。我们可以通过构造函数以及字面量的形式来定义对象。
用户1272076
2019/03/26
1.2K0
不会Object.defineProperty你就out了
IMWeb前端团队
2017/12/29
1.1K0
javascript 中Object一些操作方法
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
chuchur
2022/10/25
6960
全面梳理JS对象的访问控制及代理反射
在 Javascript 中,读取、赋值、调用方法等等,几乎一切操作都是围绕“对象”展开的;长久以来,如何更好的了解和控制这些操作,就成了该语言发展中的重要问题。
江米小枣
2020/06/16
2.3K1
《javascript高级程序设计》笔记:对象数据属性和访问器属性
创建自定义对象最简单的方式就是以字面量的形式创建对象(或创建一个Object实例),然后再为它添加属性和方法,如下所示:
全栈程序员站长
2022/07/20
1K0
ES6 系列之 defineProperty 与 proxy
我们或多或少都听过“数据绑定”这个词,“数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:var obj = {value: 1},我们该怎么知道 obj 发生了改变呢?
夜尽天明
2019/07/17
5360
Object.defineProperty 与 Proxy 有什么区别?
大家好,我是前端西瓜哥,今天来看看 Object.defineProperty 和 Proxy 的区别。
前端西瓜哥
2022/12/21
5000
Object.defineProperty 与 Proxy 有什么区别?
JS中属性描述符
属性描述符是ES5中的一个重要的概念。它可以对对象做一些特定的高级操作,今天我们就学习一下ES5中的属性描述符。 ES5中的属性描述符是由Object类的一个静态方法defineProperty来设置的,该方法接收三个参数,分别是:属性操作的对象、属性名和一个属性描述符的对象。我们来看一个简单的例子:
kai666666
2020/10/18
2.4K0
相关推荐
学习VUE总得知道Object.defineProxy怎么使用吧
更多 >
加入讨论
的问答专区 >
1技术专家擅长2个领域
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
    本文部分代码块支持一键运行,欢迎体验
    本文部分代码块支持一键运行,欢迎体验