个人理解：Object.defineProperty

lieeps 发布于2019-08-26 11:42 / 555人阅读

摘要：数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。描述符必须是这两种形式之一不能同时是两者。注意点运算符和为对象的属性赋值时，数据描述符中的属性默认值是不同的，如下例所示。

一、概念语法

</>复制代码 
Object.defineProperty(obj,prop,descriptor)
参数：
1.obj:要在其上定义属性的对象
2.key:要定义或者修改的属性
3.descriptor:将被定义或者修改的属性描述符
返回值：
obj：传递给函数的对象
作用：
直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
默认情况下，使用Object.defineProperty()添加的属性值是不可变的。

</>复制代码 
var obj = {},person="xiaoming"
Object.defineProperty(obj,"name",{
    get:function(){   // 获取属性值
        return person
    },
    set:function(value){    //设置属性值
        person = value
    }
})
console.log(obj);            //{}   obj的属性值  颜色是虚的，但是可以更改
console.log(obj.name);       //xiaoming
//设置属性值
obj.name = "xiaohong";
console.log(obj)             //{}
console.log(obj.name);       //xiaohong

总结：直接设置存取器属性是无法直接在对象中体现出来console.log(obj); //{}，需要执行获取方法

二、属性描述符

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。

数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。

访问器描述符是由getter-setter函数对描述的属性。

描述符必须是这两种形式之一；不能同时是两者。

注意1：点运算符和Object.defineProperty()为对象的属性赋值时，数据描述符中的属性默认值是不同的，如下例所示。

</>复制代码 
var o = {};
o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});
// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});
因此：默认情况下，使用Object.defineProperty()添加的属性值是不可变的。
因为默认writalbe:false,不可写

示例

</>复制代码 
Object.defineProperty(obj,"name",{
    value:"xiaoming"
});
console.log( obj.name );  //xiaoming 
console.log(obj)            //{name:"xiaoming"}
//此时修改属性值不可变
obj.name = "";
console.log(obj.name);    //xiaoming  仍然是，值不变

GPU云服务器云服务器全面理解理解理解对象语义理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107414.html

defineProperty详解

摘要：搁置了几天我还是决定再次重写下边我们来具体聊聊先从开始说起有个定义属性的功能，应该没几个人用，因为相对于这种方式简直不能再难用。搁置了几天我还是决定再次重写！下边我们来具体聊聊先从defineProperty开始说起 defineproperty //defineproperty 有个定义object属性的功能，应该没几个人用，因为相对于obj.a = 1这种方式简直不能再难用。 ...

charles_paul 2019-08-23 14:30 评论0 收藏0
JavaScript中的Object.defineProperty()和defineProperti

摘要：语法将要被添加属性或修改属性的对象该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置张三张三功能该方法返回指定对象上一个自有属性对应的属性描述符。文章同步到github ECMAS-262第5版在定义只有内部采用的特性时，提供了描述了属性特征的几种属性。ECMAScript对象中目前存在的属性描述符主要有两种，数据描述符(数据属性)和存取描述符(访问器属性)，数据描述...

sanyang 2019-08-21 16:40 评论0 收藏0
Vue 响应式实现原理（个人在学习完Vue基础的情况下的理解）

摘要：对象用户看到的对象用户看到的是这个对象即是实际使用的对象实际使用的对象复制更新相应的代码实现对象代理响应式原理前提官网说过，限于现代浏览器限制，无法监测通过这种方式添加的属性，所以，他的响应式是建立在实例化对象的时候，预定义属性的基础上的。 1. Vue 对象 1.1 用户看到的对象 var app = new Vue({ el: #app , /* * 用...

zsy888 2019-08-20 19:00 评论0 收藏0
数据劫持与数据代理

摘要：数据劫持数据劫持即使用实现了的双向绑定。不输出内容数据代理即代理的意思。的拦截处理器除了外还支持多种拦截方式，具体请查阅官方文档嵌套查询。实际上也是不支持嵌套查询的。数据劫持数据劫持即使用Object.defineProperty()实现了vue的双向绑定。先来看看它是如何实现的 let obj = {}, txt = Object.defineProperty(obj,txt,...

468122151 2019-08-23 18:31 评论0 收藏0
160行代码仿Vue实现极简双向绑定[详细注释]

摘要：兼容性更详细的可以看一下实现思路系列的双向绑定，关键步骤实现数据监听器，用重写数据的，值更新就在中通知订阅者更新数据。 showImg(https://segmentfault.com/img/remote/1460000015375220?w=640&h=426); 前言现在的前端面试不管你用的什么框架，总会问你这个框架的双向绑定机制，有的甚至要求你现场实现一个双向绑定出来，那对于...

endiat 2019-08-22 18:15 评论0 收藏0