object.js definepropertyy 的属性怎么获得

Object.defineProperty(Object.prototype, 'foo', {value: function() {console.log(foo);}});
(这样添加的属性是不可修改不可枚举不可再次配置的)
当你非要给原生类原型添加方法时,不用 defineProperty 就会给其它程序(如 for in)添加麻烦
当然 getter/setter 要兼容性的话也得要,不然
var obj = {
_name: null,
get name() {
return this._
set name(val) {
this._name =
会在不支持的浏览器报语法错(没救了,除非 eval)
此时的使用方法:
Object.defineProperty(obj,&'name', {get:&function()&{return&this._}, set:&function(val)&{this._name =}});
本文已收录于以下专栏:
相关文章推荐
使用Object.defineProperty重新定义属性时需要注意的一点,具体来说:当一个对象已存在某属性,重新定义该属性(如果允许)时,若未指定属性描述器的enumerable或configura...
这个方法可牛比了。这么说吧,vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可...
双向数据绑定的常规实现方式
封装属性访问器
封装属性访问器在php中有 魔术方法 这样一种概念,比如php中的 __get() 和 __set() 方法。在javascript中也有...
首先我们来说一下何为前端的 双向数据绑定 。简单的来说,就是框架的控制器层(这里的控制器层是一个泛指,可以理解为控制view行为和联系model层的中间件)和UI展示层(view层)建立一个双向的数据...
什么时候创建Servlet或者class文件:
处理用户请求的,接收用来页面发来的请求,要返回到jsp页面就servlet,如登录(获取用户名密码),注册等(获取用户信息),分页。
具体业务逻辑的实现...
虽然说现在并不是所有的浏览器都已经支持ECMAScript5的新特性,但相比于ECMAScript4而言ECMAScript5被广大浏览器厂商广泛接受,目前主流的浏览器中只有低版本的IE不支持,其它都...
最近在研究右值引用的时候碰到这个问题,还没有解决,将问题贴在这里,待更新:
const int* printAddress(const int & v)
cout && v && endl...
对象实例何时被创建,这个问题也许你用一句话就能回答完了。但是它的潜在陷阱却常常被人忽视,这个问题也许并不像你想的那么简单,不信请你耐心看下去。
我前几天问一个同学,是不是在调用构造函数后,对象才...
问题提出:
1、Struts2框架在什么时候将Action对象放到了值栈ValueStack的栈顶了?
2、在哪里设置Debug断点能够最恰当的观察到这一过程?
.cn/s/blog_6ab0b9ah.html
 上一篇文章中提到了一种使用副本构造函数初始化类对象的情况,这里也会陈述几种情况。
...
他的最新文章
讲师:汪剑
讲师:刘道宽
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)在 SegmentFault,解决技术问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们,都在这里:
获取验证码
已有账号?
标签:至少1个,最多5个
Object.defineProperty
The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
直接在一个对象上定义一个新的属性,或修改一个已经存在的属性。这个方法会返回该对象。
Object.defineProperty(obj, prop, descriptor)
Object obj 目标对象
String prop 需要定义的属性
Object descriptor 该属性拥有的特性,可设置的值有:
value 属性的值,默认为 undefined。
writable 该属性是否可写,如果设置成 false,则任何对该属性改写的操作都无效(但不会报错),默认为 false。
get 一旦目标对象访问该属性,就会调用这个方法,并返回结果。默认为 undefined。
set 一旦目标对象设置该属性,就会调用这个方法。默认为 undeinfed。
configurable 如果为false,则任何尝试删除目标属性或修改属性以下特性(writable, configurable, enumerable)的行为将被无效化,默认为 false。
enumerable 是否能在for...in循环中遍历出来或在Object.keys中列举出来。默认为 false。
在 descriptor 中不能同时设置访问器 (get 和 set) 和 wriable 或 value,否则会报以下错误:
Invalid property.
A property cannot both have accessors and be writable or have a value
我们知道,在 Express.js 升级到 4.0 之后,它把很多功能从核心库中移除了。当我们访问那些被移除的属性时,它会报错,告诉我们该属性已经被移除了。这个功能就是通过 Object.defineProperty 来实现的。看看源码吧:
'urlencoded',
'bodyParser',
'compress',
'cookieSession',
'session',
'cookieParser',
'favicon',
'responseTime',
'errorHandler',
'timeout',
'methodOverride',
'directory',
'multipart',
'staticCache',
].forEach(function (name) {
Object.defineProperty(exports, name, {
get: function () {
throw new Error('Most middleware (like ' + name + ') is no longer bundled with Express and must be installed separately. Please see /senchalabs/connect#middleware.');
configurable: true
Object.defineProperties
The Object.defineProperties() method defines new or modifies existing properties directly on an object, returning the object.
和 Object.defineProperty 类似,只不过这个方法可以设置多个属性。
Object.defineProperties(obj, props)
Object obj 目标对象
Object props 要为目标对象添加的属性,其中 key 和 value 分别代表 Object.defineProperty 中的第二和第三个参数。
1 收藏&&|&&5
你可能感兴趣的文章
1 收藏,1.8k
2 收藏,990
8 收藏,4.8k
分享到微博?
我要该,理由是:Javascript Object.defineProperty()
script作为一种语言,有个美誉,开发者可以重新定义任何事情。虽然这在过去的一些javascript可以,但是ECMAScript5中已经开始得到改变,例如,我们可以使用Object.defineProperty创建一个不能被修改的对象的属性。本文中我们将讲述Object.defineProperty的基本用法。 如果你想在文章开始之前,深入了解Object.defineProperty方法,请戳。
一、基本用法
假如我想构建一个math.js库,看下面的实例:
var mathObj = {
& & constants: {
& & & & &pi&: 3.14
& & areaOfCircle: function(radius) {
& & & & return this.constants.pi*radius*
在上例中,如果有人改变pi的值,那么我们将不会得到正确的计算结果,虽然有很多方法可以解决此问题,但是最简单的方法是使用pi属性不可写。看下面实例:
var mathObj = {
& & constants: {},
& & areaOfCircle: function(radius) {
& & & & return this.constants.pi*radius*
Object.defineProperty(mathObj.constants, &pi&, {
& & value: 3.14,
& & writable: false
mathObj.constants.pi = &Benjamin&;
//Outputs: 3.14
console.log(mathObj.constants.pi);
Object.defineProperty(obj, prop, descriptor)方法接收三个参数:需要添加或修改属性的对象,属性名称,属性描述options。从上例可以看出,当给pi赋值为&Benjamin&时,最后输出的值还是3.14。 但是如果给math.js使用&use strict&,将会报错,和给undefined赋值一样:
&use strict&;
var mathObj = {
& & constants: {},
& & areaOfCircle: function(radius) {
& & & & return this.constants.pi*radius*
Object.defineProperty(mathObj.constants, &pi&, {
& & value: 3.14,
& & writable: false
mathObj.constants.pi = &Benjamin&;
//&span style=&color: #ff0000;&&Outputs: Uncaught TypeError: Cannot assign to read only property 'pi' of #&Object&&/span&&
console.log(mathObj.constants.pi);
第三个参数的options中,writable默认值为false,所以在上例中可以省略,configurable默认值为false,如果你想使用你的库的用户故意重写pi的值,你可以设置configurable值为true。
Object.defineProperty(principia.constants, &pi&, {
& & value: 3.14,
& & configurable: true
但是当你使用Object.defineProperty时,也有一种相当大的Hack,即使设置了writable的值,它也不会保持属性值不变的:
var container = {};
Object.defineProperty(container, &arr&, {
& & writable: false,
& & value: [&a&, &b&]
container.arr = [&new array&];
// Outputs: [&a&, &b&]
console.log(container.arr);
container.arr.push(&new value&);
// Outputs: [&a&, &b&, &new value&]
console.log(container.arr);
arr数组是不可写的,所以始终指向同一个数组,但是数组的成员是可以变化的,所以将来可能会增加锁定数组或者对象来解决此问题。
二、兼容性
因为Object.defineProperty方法是ES5的一部分,所以在IE9及现代,IE8中只得到了部分实现,尽可以使用在DOM对象上,不幸的是,并没有IE8相关的shim来兼容。但是,如果你不需要处理旧的浏览器,defineProperty可能会有你使用的地方。 以上就是对Object.defineProperty方法的描述,文中不妥之处,还望批评指正。Object.defineproperty语法
在一个对象上定义新的属性
var o = {}; // 创建一个新对象
// Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(o, "a", {value : 37,
writable : true,
enumerable : true,
configurable : true});
// 对象o拥有了属性a,值为37
// Example of an object property added with defineProperty with an accessor property descriptor
Object.defineProperty(o, "b", {get : function(){ return bV },
set : function(newValue){ bValue = newV },
enumerable : true,
configurable : true});
数据和视图联动
给对象o定义新的属性b,并且定义属性b的get和set方法,当o.b的时候会调用b属性的get方法,给b属性赋值的时候,会调用set方法,这就是修改数据的时候,视图会自动更新的关键
前端获取数据后,需要根据数据操作dom,视图变化后,需要修改不少代码,有没有方法将数据和dom操作隔离,看一个例子
显示用户信息的html模版
&p&你好,&span id='nickName'&&/span&&/p&
&div id="introduce"&&/div&
&/div&      
//视图控制器var userInfo = {};
Object.defineProperty(userInfo, "nickName", {
get: function(){
return document.getElementById('nickName').innerHTML;
set: function(nick){
document.getElementById('nickName').innerHTML =
Object.defineProperty(userInfo, "introduce", {
get: function(){
return document.getElementById('introduce').innerHTML;
set: function(introduce){
document.getElementById('introduce').innerHTML =
//数据//todo 获取用户信息的代码
userInfo.nickName = "xxx";
userInfo.introduce = "我是xxx,我来自云南,..."
设置userInfo的nickName属性时会调用set方法,更新dom节点的html
移动端兼容性
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support
参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
阅读(...) 评论()Javascript apply的巧妙用法和Object.defineProperty的扩展使用-js教程-PHP中文网QQ群微信公众号还没有收藏Javascript apply的巧妙用法和Object.defineProperty的扩展使用Math.max 实现得到数组中最大的一项var array = [1,2,3,4,5];var max = Math.max.apply(null, array);
console.log(max); // 5调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,只需要用这个方法帮助运算,得到返回的结果就行,所以直接传递了一个null过去。Math.min 实现得到数组中最小的一项var array = [1,2,3,4,5];var min= Math.min.apply(null, array);console.log(min); // 1在原生对象上面添加max与min方法那就会需要用到原生对象方法Object.defineProperty(),会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象
Object.defineProperty(Array.prototype, 'max', {
writable: false,
enumerable: false,
configurable: true,
value: function () {
return Math.max.apply(null, this);
Object.defineProperty(Array.prototype, 'min', {
writable: false,
enumerable: false,
configurable: true,
value: function () {
return Math.min.apply(null, this);
});直接在数组上调用即可:var arr = [54,545,];
console.log(arr.max());
console.log(arr.min()); 上面讲到了Object.defineProperty的方法,下面我们来理解下。Object.defineProperty的使用对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。定义对象可以使用构造函数或字面量的形式:var obj = new O
//obj = {}obj.name = &张三&;
//添加描述obj.say = function(){};
//添加行为除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性。Object.defineProperty()描述语法:Object.defineProperty(obj, prop, descriptor)参数说明:obj:必需。目标对象prop:必需。需定义或修改的属性的名字descriptor:必需。目标属性所拥有的特性返回值:传入函数的对象。即第一个参数obj针对属性,我们可以给这个属性设置一些特性,比如是否只读不可以写;是否可以被for..in或Object.keys()遍历。给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。数据描述当修改或定义对象的某个属性的时候,给这个属性添加一些特性:var obj = {
test:&hello&}//对象已有的属性添加特性描述Object.defineProperty(obj,&test&,{
configurable:true | false,
enumerable:true | false,
value:任意类型的值,
writable:true | false});//对象新添加的属性的特性描述Object.defineProperty(obj,&newKey&,{
configurable:true | false,
enumerable:true | false,
value:任意类型的值,
writable:true | false});数据描述中的属性都是可选的,来看一下设置每一个属性的作用。value属性对应的值,可以使任意类型的值,默认为undefinedvar obj = {}//第一种情况:不设置value属性Object.defineProperty(obj,&newKey&,{
console.log( obj.newKey );
//undefined------------------------------//第二种情况:设置value属性Object.defineProperty(obj,&newKey&,{
value:&hello&});
console.log( obj.newKey );
//hellowritable属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false。var obj = {}//第一种情况:writable设置为false,不能重写。Object.defineProperty(obj,&newKey&,{
value:&hello&,
writable:false});//更改newKey的值obj.newKey = &change value&;
console.log( obj.newKey );
//hello//第二种情况:writable设置为true,可以重写Object.defineProperty(obj,&newKey&,{
value:&hello&,
writable:true});//更改newKey的值obj.newKey = &change value&;
console.log( obj.newKey );
//change valueenumerable此属性是否可以被枚举(使用for...in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。var obj = {}//第一种情况:enumerable设置为false,不能被枚举。Object.defineProperty(obj,&newKey&,{
value:&hello&,
writable:false,
enumerable:false});//枚举对象的属性for( var attr in obj ){
console.log( attr );
}//第二种情况:enumerable设置为true,可以被枚举。Object.defineProperty(obj,&newKey&,{
value:&hello&,
writable:false,
enumerable:true});//枚举对象的属性for( var attr in obj ){
console.log( attr );
//newKey}configurable是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。这个属性起到两个作用:目标属性是否可以使用delete删除目标属性是否可以再次设置特性//-----------------测试目标属性是否能被删除------------------------var obj = {}//第一种情况:configurable设置为false,不能被删除。Object.defineProperty(obj,&newKey&,{
value:&hello&,
writable:false,
enumerable:false,
configurable:false});//删除属性delete obj.newK
console.log( obj.newKey ); //hello//第二种情况:configurable设置为true,可以被删除。Object.defineProperty(obj,&newKey&,{
value:&hello&,
writable:false,
enumerable:false,
configurable:true});//删除属性delete obj.newK
console.log( obj.newKey ); //undefined//-----------------测试是否可以再次修改特性------------------------var obj = {}//第一种情况: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除了可以给新定义的属性设置特性,也可以给已有的属性设置特性//定义对象的时候添加的属性,是可删除、可重写、可枚举的。var obj = {
test:&hello&}//改写值obj.test = 'change value';
console.log( obj.test ); //'change value'Object.defineProperty(obj,&test&,{
writable:false})//再次改写值obj.test = 'change value again';
console.log( obj.test ); //依然是:'change value'提示:一旦使用Object.defineProperty给对象添加属性,那么如果不设置属性的特性,那么configurable、enumerable、writable这些值都为默认的falsevar obj = {};//定义的新属性后,这个属性的特性中configurable,enumerable,writable都为默认的值false//这就导致了newkey这个是不能重写、不能枚举、不能再次设置特性//Object.defineProperty(obj,'newKey',{
});//设置值obj.newKey = 'hello';
console.log(obj.newKey);
//undefined//枚举for( var attr in obj ){
console.log(attr);
}设置的特性总结:value: 设置属性的值writable: 值是否可以重写。true | falseenumerable: 目标属性是否可以被枚举。true | falseconfigurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false存取器描述当使用存取器描述属性的特性的时候,允许设置以下特性属性:var obj = {};
Object.defineProperty(obj,&newKey&,{
get:function (){} | undefined,
set:function (value){} | undefined
configurable: true | falseenumerable: true | false});注意:当使用了getter或setter方法,不允许使用writable和value这两个属性getter/setter当设置或获取对象的某个属性的值的时候,可以提供getter/setter方法。getter 是一种获得属性值的方法setter是一种设置属性值的方法。在特性中使用get/set属性来定义对应的方法。var obj = {};var initValue = 'hello';
Object.defineProperty(obj,&newKey&,{
get:function (){//当获取值的时候触发的函数return initV
set:function (value){//当设置值的时候触发的函数,设置的新值通过参数value拿到initValue =
});//获取值console.log( obj.newKey );
//hello//设置值obj.newKey = 'change value';
console.log( obj.newKey ); //change value注意:get或set不是必须成对出现,任写其一就可以。如果不设置方法,则get和set的默认值为undefined兼容性在ie8下只能在DOM对象上使用,尝试在原生的对象使用 Object.defineProperty()会报错。以上就是Javascript apply的巧妙用法和Object.defineProperty的扩展使用的详细内容,更多请关注php中文网其它相关文章!共3篇474点赞收藏分享:.&猜你喜欢PHP中文网:独家原创,永久免费的在线,php技术学习阵地!
All Rights Reserved | 皖B2-QQ群:关注微信公众号}

我要回帖

更多关于 defineproperty兼容性 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信