文档章节

JavaScript中的属性操作

达摩码者
 达摩码者
发布于 2015/04/06 16:07
字数 594
阅读 199
收藏 10

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'}
}}

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

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

© 著作权归作者所有

共有 人打赏支持
达摩码者
粉丝 4
博文 12
码字总数 6735
作品 0
海淀
前端工程师
客户端的js js脚本的引入 js的解析过程

web浏览器中的JavaScript web浏览器中的js通常称为客户端的JavaScript 客户端 JavaScript window对象是所有客户端JavaScript特性和api的主要接入点。 即,表示web浏览器一个窗口或窗体。使用...

小小____
08/03
0
0
js调用cs中函数的方法 和 在cs中调用js函数的方法

在前台js代码里写上<%method();%> 举例: cs文件中写的有 public void method() { ....执行某些操作. } 这个函数,然后在前台页面的js里面调用. <script type="text/javascript"> <%method();......

黄献
2012/11/04
0
0
JavaScript面向对象技术(一)

看了很多JavaScript的书,但是设计到一些具体的JavaScript问题,书也解决不了问题。 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也会尽量按照原书的...

oecp
2011/04/20
0
2
JS中style属性(网上整理)

解决办法: 1、先定义一个CSS规则,然后this.className='' 2、document.getElementByIdx_x("a").style.cssText="border-collapse:collapse;border-spacing:1;border:1 solid #0B2565;backgro......

The-duke
2014/01/16
0
0
深入理解 JavaScript 原型继承

继承的本质:重用 在探讨 JavaScript 的原型继承之前,先不妨想想为什么要继承? 考虑一个场景,如果我们有两个对象,它们一部分属性相同,另一部属性不同。通常一个好的设计方案是将相同逻辑...

穿越过来的键盘手
07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day58-20180816-流利阅读笔记-待学习

苹果市值破万亿,iPhone 会涨价吗? Lala 2018-08-16 1.今日导读 苹果教父乔布斯曾经说过:“活着就是为了改变世界。”虽然他在 56 岁时就遗憾离世,但他极具创新和变革的精神早已深埋进苹果...

aibinxiao
23分钟前
4
0
[雪峰磁针石博客]python3快速入门教程1 turtle绘图-2函数

菲波那契序列: >>> # Fibonacci series:... # the sum of two elements defines the next... a, b = 0, 1>>> while b < 10:... print(b)... a, b = b, a+b...112......

python测试开发人工智能安全
今天
0
0
java环境变量配置最正确的方式

原贴:https://blog.csdn.net/qq_40007997/article/details/79784711,十分详细,亲测有效

kitty1116
今天
0
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
2
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部