JavaScript中的属性操作
JavaScript中的属性操作
达摩码者 发表于3年前
JavaScript中的属性操作
  • 发表于 3年前
  • 阅读 197
  • 收藏 10
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 最近开始系统的学习一下js,记录一下自己的学习过程

JavaScript中的属性操作

一、 原型链

在js中,任何一个对象都有一个prototype属性,在js中记做:_proto_。

比如,我们创建一个对象:

<!-- lang: js -->
var foo = {
    x:1,
    y:2
}

虽然看起来我们只为foo对象创建了两个属性,实际上,它还有一个属性_proto_,如图: 在此输入图片描述

即使我们不定义_proto_,在js中也会预留一个属性。

如果我们定义一个空对象,foo

<!-- lang: js -->
foo = function(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x = 1;
obj.y =2;
//运行结果
obj //结果是:foo {x: 1, y: 2, z: 3}

很显然。我们并没有给obj定义z值,但是却返回了z值,从这可以看出,obj中没有,它便会顺着原型链向上查找。

此时,我们给obj定义z值:

<!--lang:js-->
obj.z =10;
//运行结果
obj;//返回foo {x: 1, y: 2, z: 10}

接着,删除z属性:

<!--lang:js-->
delete obj.z
//运行结果
obj;//结果是:foo {x: 1, y: 2, z: 3}

可见,我们的删除操作也只是obj上的,并不会对其原型产生影响。

二、属性操作

属性定义:调用Object.defineProperty(object, propertyname, descriptor),三个项都是必须的。

<!-- lang: js -->
Object.defineProperty(obj,'title',{
    value:'helloworld',
});

其中,defineProperty()中的descriptor有四个属性,分别为:

  • value //值
  • enumerable //是否允许for-in进行遍历,默认为true
  • configurable //是否允许使用delete进行操作并重新定义,默认为true
  • writable //是否允许修改,more为true

此外,我们还可以查看属性,通过:Object.getOwnPropertyDescriptor(object, propertyname),两个项都是必须。如:

<!--lang:js-->
var foo = {
	title:'hello'
};
console.log(Obejct.getOwnPropertyDescriptor(obj,'title'));
//运行结果是
//Object {value: "hello", writable: true, enumerable: true, configurable: true}

其次,我们也可以通过for-in来遍历输出每项属性。

<!--lang:js-->
var des = Object.getOwnPropertyDescriptor(obj,'title');
for(var key in des){
    console.log(key+':'+des[key]);
}
//运行结果
//value:hello
//writable:true
//enumerable:true
//configurable:true

补充一点刚才定义属性用的是Object.defineProperty(),如果我们想一次性定义多个属性,只要修改一点就可以:

<!--lang:js-->
Object.defineProperties{person,{
    name:{value:'Gavin',writable:false,enumerable:false},
    salaty:{value:5000,writable:true,enumerable:false},
    sex:{value:'man'}
}}

如果我们已经定义了这些属性,那么如何修改呢,其实也很简单,只要再次定义一下就可以了。

先记录这些,继续学习,继续补充笔记。

标签: javascript
共有 人打赏支持
粉丝 5
博文 12
码字总数 6735
×
达摩码者
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: