添加属性到对象,或修改现有属性的特性
 
用法:
    Object.defineProperty(object, propertyName, descriptor);
参数:
    object : 作用的对象,可以是javascript对象,或dom对象。
    propertyName : 属性名,字符串。
    descriptor : 属性的特性描述,区分数据属性或访问器属性。
返回值:
    修改后的对象。
异常:
   1. object不是对象。
    2. object不可扩展。
    3. descriptor有value或writable特性,同时有get和set特性。
    4. descriptor的get和set特性不是函数。
    5. 对象的属性名已存在,同时descriptor的configurable特性为false,且descriptor包含一个以上与现有属性的特性不同的特性。但configurable为false,且writable为true时,允许value或writable特性不同。
 
defineProperties和defineProperty差不多,就不介绍了。
 
例子:
'use strict';
(function(){
if(!Object.defineProperty){
console.log('浏览器不支持defineProperty');
return;
} var person = {}; //向person添加name属性和它的访问器
Object.defineProperty(person, 'name', {
set : function(n){
console.log('set 访问器');
this.nameValue = n; //一个新的属性,如果同样是name的话,就死循环了。
},
get : function(){
console.log('get 访问器');
return 'my name is ' + this.nameValue;
},
//value : 'jeck', //如果在这里有value或writable特性,就会报错:Uncaught TypeError: Invalid property. A property cannot both have accessors and be writable or have a value。
enumerable: true,
configurable: true
});
person.name = "haha"; //触发set访问器
console.log(person.name); //触发get访问器 output: my name is haha
console.log(person.nameValue); //output: haha //向person添加id数据属性。
Object.defineProperty(person, 'id', {
value : '1234567890',
writable : false,
enumerable : false,
configurable : false
});
console.log(person.id); //output: 1234567890
//person.id = '0987654321'; //报错,因为id是只读的,不可写。 //列出对象的属性
var propertyNames = Object.getOwnPropertyNames(person);
for(var i = 0, len = propertyNames.length; i < len; i++){
var name = propertyNames[i]
console.log(name + ': ' + person[name]);
}
/*output:
name: my name is haha
nameValue: haha
id: 1234567890*/ //列出某一属性的所有特性。
var descriptor = Object.getOwnPropertyDescriptor(person, 'id');
descriptor.writable = true;//这里将原来的writable特性改为了true。
for(var prop in descriptor){
console.log(prop + ': ' + descriptor[prop]);
}
/*output:
value: 1234567890
writable: true
enumerable: false
configurable: false*/ //defineProperty的复数版:
Object.defineProperties(person, {
sex : {
value : 'boy',
writable : true,
enumerable : false,
configurable : true
},
age : {
set : function(x){
this.ageValue = x;
},
get : function(){
return this.ageValue;
}
}
}); person.sex = 'girl'; //变性成功!
person.age = 23; console.log('sex: ' + person.sex);
console.log('age: ' + person.age);
/*output:
sex: girl
age: 23*/
})();

Object.defineProperty和Object.defineProperties的更多相关文章

  1. 对象是否拥有某个属性,in和for in以及object.hasOwnProperty('×××')的异同,以及Object.defineProperty(),Object.keys(),Object.getOwnPropertyNames()的用法

    1.在某个对象是否拥有某个属性,判断的方法有很多,常用的方法就是object.hasOwnProperty('×××'),这个方法是不包括对象原型链上的方法的,举个例子: var obj = { na ...

  2. Object.defineProperty和Object.freeze、Object.seal

    目录 一 Object.defineProperty 1.1 用法 1.2 数据描述 1.2.1 value 1.2.2 writable 1.2.3 enumerable 1.2.4 configu ...

  3. MVVM双向绑定实现之Object.defineProperty

    随着web应用的发展,直接操作dom的应用已渐行渐远,取而代之的是时下越来越流行的MVVM框架,dom操作几乎绝迹,这里面自然是框架底层封装的结果.MVVM框架的双向数据绑定使开发效率大大提高:然后在 ...

  4. 关于Object.defineProperty 的基础知识

    Object.defineProperty 这个方法大家耳熟能详,可以对 对象的属性进行添加或修改的操作.即可以进行  数据劫持 .vue就是通过这个方法来劫持数据的. 平时我们创建对象的时候,一般通 ...

  5. Object.defineProperty实现数据绑定

    1.Object.defineProperty方法 Object.defineProperty(obj, prop, descriptor); (1)参数:  obj:目标对象 prop:需要定义的属 ...

  6. vue实现双向数据绑定之Object.defineProperty()篇

    前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...

  7. JS属性描述符之Object.defineProperty()定义对象属性特性

    一.Object.defineProperty的作用 用来给对象新增属性,和修改对象中的属性. 二.JS对象中的描述符 js对象中两种属性描述符:数据描述符和存取描述符(访问描述符). 注意事项: 1 ...

  8. Object.defineProperty和proxy

    Object.defineProperty问题 Object.defineProperty() 无法监控到数组下标的变化.vue只能通过以下几种方法来监听 pop() shift() unshift( ...

  9. js中的Object.defineProperty()和defineProperties()详解

    ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...

随机推荐

  1. java基础---->Java中图片的缩放

    缩略图代表网页上或计算机中图片经压缩方式处理后的小图 ,其中通常会包含指向完整大小的图片的超链接.缩略图用于在 Web 浏览器中更加迅速地装入图形或图片较多的网页.今天,我们就开始java中图像的缩略 ...

  2. 【python系列】SyntaxError:Missing parentheses in call to 'print'

    打印python2和python3的区别 如上图所示,我的 PyCharm安装的是python3.6如果使用print 10会出现语法错误,这是python2.x和python3.x的区别所导致的.

  3. PHP获取POST的原始数据的方法

    一般我们都用$_POST或$_REQUEST两个预定义变量来接收POST提交的数据.但如果提交的数据没有变量名,而是直接的字符串,则需要使用其他的方式来接收. 方法一: 使用全局变量$GLOBALS[ ...

  4. for update 和 t.rowid的区别

    select * from table_name for update; 和 select t.*, t.rowid from table_name t 的区别 前者会对你查询出来的结果加上锁,而后者 ...

  5. 170718、springboot编程之发送邮件

    Spring提供了非常好用的JavaMailSender接口实现邮件发送.在Spring Boot的Starter模块中也为此提供了自动化配置.下面通过实例看看如何在Spring Boot中使用Jav ...

  6. Java面试题全集(上)

    2013年年底的时候,我看到了网上流传的一个叫做<Java面试题大全>的东西,认真的阅读了以后发现里面的很多题目是重复且没有价值的题目,还有不少的参考答案也是错误的,于是我花了半个月时间对 ...

  7. vs 2015

    基于应用要求和要使用的语言选择所需工具. Xamarin for Visual Studio:针对所有设备的 C# 中的常用基本代码 Apache Cordova with Visual Studio ...

  8. python装饰器的应用案例

    目录 一.过程编程 二.面向装饰器和函数的编程 三.二的加强版 一.过程编程 (一)需求:打印菱形 1.空格.*号组成的菱形 2.输入菱形上半部分的行数即可打印 3.支持循环输入 (二)代码 from ...

  9. 如何编写一个python项目

    https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397616003925a ...

  10. 用Python实现的数据结构与算法:队列

    一.概述 队列(Queue)是一种先进先出(FIFO)的线性数据结构,插入操作在队尾(rear)进行,删除操作在队首(front)进行. 二.ADT 队列ADT(抽象数据类型)一般提供以下接口: Qu ...