视频学习地址:

http://www.imooc.com/video/6002

原文PPT下载地址:

http://img.mukewang.com/down/54c5ec1a000141f100000000.zip

1、属性删除

var person = {age : 28, title : 'fe'};
delete person.age; // true
delete person['title']; // true
person.age; // undefined
delete person.age; // true delete Object.prototype; // false, var descriptor = Object.getOwnPropertyDescriptor(Object, 'prototype');
descriptor.configurable; // false

2、属性检测

var cat = new Object;
cat.legs = 4;
cat.name = "Kitty"; 'legs' in cat; // true
'abc' in cat; // false
"toString" in cat; // true, inherited property!!! cat.hasOwnProperty('legs'); // true
cat.hasOwnProperty('toString'); // false cat.propertyIsEnumerable('legs'); // true
cat.propertyIsEnumerable('toString'); // false if (cat && cat.legs) {
cat.legs *= 2;
} if (cat.legs != undefined) {
// !== undefined, or, !== null
} if (cat.legs !== undefined) {
// only if cat.legs is not undefined
}

3、属性枚举

var o = {x : 1, y : 2, z : 3};
'toString' in o; // true
o.propertyIsEnumerable('toString'); // false 说明原型链上Object.prototype中的toString()方法不可枚举
var key;
for (key in o) {
console.log(key); // x, y, z
}

var obj = Object.create(o);
obj.a = 4;
var key;
for (key in obj) {
console.log(key); // a, x, y, z
}

var obj = Object.create(o);
obj.a = 4;
var key;
for (key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key); // a 只枚举自身的属性
}
}

5、属性的getter / setter 

var man = {
name : 'Bosn',
weibo : '@Bosn',
get age() {
return new Date().getFullYear() - 1988;
},
set age(val) {
console.log('Age can\'t be set to ' + val);
}
}
console.log(man.age); //
man.age = 100; // Age can't be set to 100
console.log(man.age); // still 27

var man = {
weibo : '@Bosn',
$age : null,
get age() {
if (this.$age == undefined) {
return new Date().getFullYear() - 1988;
} else {
return this.$age;
}
},
set age(val) {
val = +val;
if (!isNaN(val) && val > 0 && val < 150) {
this.$age = +val;
} else {
throw new Error('Incorrect val = ' + val);
}
}
} console.log(man.age); //
man.age = 100;
console.log(man.age); // 100;
man.age = 'abc'; // error:Incorrect val = NaN

6、getter / setter 和 defineProperty

function foo() {}

Object.defineProperty(foo.prototype, 'z',
{get : function(){return 1;}}); var obj = new foo(); obj.z; //
obj.z = 10;
obj.z; // still 1 Object.defineProperty(obj, 'z',
{value : 100, configurable: true});
obj.z; // 100;
delete obj.z;
obj.z; // back to 1

var o = {};
Object.defineProperty(o, 'x', {value : 1}); // writable=false, configurable=false
var obj = Object.create(o);
obj.x; //
obj.x = 200;
obj.x; // still 1, can't change it Object.defineProperty(obj, 'x', {writable:true, configurable:true, value : 100});
obj.x; //
obj.x = 500;
obj.x; //

7、属性的权限设置 Object.defineProperty

var person = {};
Object.defineProperty(person, 'name', {
configurable : false,
writable : false,
enumerable : true,
value : "Bosn Ma"
}); person.name; // Bosn Ma
person.name = 1;
person.name; // still Bosn Ma
delete person.name; // false


Object.defineProperties(person, {
title : {value : 'fe', enumerable : true},
corp : {value : 'BABA', enumerable : true},
salary : {value : 50000, enumerable : true, writable : true}
}); Object.getOwnPropertyDescriptor(person, 'salary');
// Object {value: 50000, writable: true, enumerable: true, configurable: false}
Object.getOwnPropertyDescriptor(person, 'corp');
// Object {value: "BABA", writable: false, enumerable: true, configurable: false}


Object.defineProperties(person, {
title : {value : 'fe', enumerable : true},
corp : {value : 'BABA', enumerable : true},
salary : {value : 50000, enumerable : true, writable : true},
luck : {
get : function() {
return Math.random() > 0.5 ? 'good' : 'bad';
}
},
promote : {
set : function (level) {
this.salary *= 1 + level * 0.1;
}
}
});
Object.getOwnPropertyDescriptor(person, 'salary');
// Object {value: 50000, writable: true, enumerable: true, configurable: false}
Object.getOwnPropertyDescriptor(person, 'corp');
// Object {value: "BABA", writable: false, enumerable: true, configurable: false}
person.salary; //
person.promote = 2;
person.salary; //

js - object的属性操作的更多相关文章

  1. js object 对象 属性和方法的使用

    //object 对象 属性和方法的使用 var person = new Object(); person.name="张海"; person.age="; perso ...

  2. js Object的属性 Configurable,Enumerable,Writable,Value,Getter,Setter

    对象的数据属性 Configurable,Enumerable,Writable,Value var person = {} Object.defineProperty(person,'name',{ ...

  3. JS基础之属性操作注意事项

    1.js中注意问题 font-size 改成fontSize padding-top 改成paddingTop 2.js动态添加Class class    改成className 3.oInp.ty ...

  4. JavaScript基础学习日志(1)——属性操作

    JS中的属性操作: 属性操作语法 属性读操作:获取 实例:获取Input值 实例:获取select值 字符串连接 属性写操作:修改.添加 实例:修改value值 实例:添加图片的src地址 inner ...

  5. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  6. 第二十一课:js属性操作的兼容性问题

    上一课主要讲了属性的概念,用法,固有属性和自定义属性的区别,class属性操作的方法等,这一课主要讲一些有关属性操作的兼容性问题. IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径,比如 ...

  7. [妙味JS基础]第一课:属性操作、图片切换、短信发送模拟

    知识点总结 HTML的属性操作:读.写 元素.属性名 => “读” 元素.属性名=新的值 => “写” 例如: oBtn.value => “读” oBtn.value='按钮' = ...

  8. js动态参数作为Object的属性取值

    js动态参数作为Object的属性取值var myObj = {"a":1,"b":2};var a = 'a';myObj[a] 就可以获取到 属性a的值了

  9. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

随机推荐

  1. php过滤函数

    addcslashes — 以 C 语言风格使用反斜线转义字符串中的字符 addslashes — 使用反斜线引用字符串 strip_tags — 从字符串中去除 HTML 和 PHP 标记 stri ...

  2. .Net日期处理之格式化

    一.默认格式 2015/9/3 9:04:31 二.格式2 2015年9月3日 9:28:51 三.格式3 2015年9月3日 9:31 四.格式4 2015/9/3 9:39:01 五.格式5 20 ...

  3. hdu1950 Bridging signals 最长递增子序列

    用一个数组记下递增子序列长度为i时最小的len[i],不断更新len数组,最大的i即为最长递增子序列的长度 #include<cstdio> #include<algorithm&g ...

  4. CDialog上使用CToolBar+CReBar

    最经在做一些用户界面的东西,对话框上有很多按钮和组合框,全部加起来差不多有20多个吧,界面非常凌乱,最后决定用CToolBar + CReBar来重新设计界面,为什么选用这个呢?一是因为看到IE用的也 ...

  5. PostConstruct注解

    应用场景:当你需要往Bean里注入一个其父类中定义的属性,而你又无法复写父类的属性或属性的setter方法时 public class UserDaoImpl extends HibernateDao ...

  6. [转]LayoutInflater的inflate函数用法

    LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 获取LayoutInflater的方法有如下三种: LayoutInflater inflater=(Layo ...

  7. 转:LR的响应时间与使用IE所感受时间不一致的讨论

    在做性能测试时,有时碰到这样一种情况,使用性能工具LR测试出来的响应时间比实际使用IE感受到的时间要长,例如,实际使用IE打开一个系统时只需要1~2秒,而使用LR跑一个用户所得出的结果可能是8秒.10 ...

  8. 转:Eclipse Debug 界面应用详解——Eclipse Debug不为人知的秘密

    今天浏览csdn,发现一文详细的描述了Eclipse Debug中的各个知识点,非常详尽!特此记录. Eclipse Debug不为人知的秘密 http://blog.csdn.net/mgoann/ ...

  9. 初学HTML5的一点理解

    刚接触了一点点用h5移动端的一点知识,用自己最浅薄的理解来看解决自适应屏幕尺寸问题和适应屏幕尺寸的布局问题.这里,为了解决自适应屏幕尺寸问题大概需要做的就是把HTML中的元素的尺寸尽可能的用百分比表示 ...

  10. Redis SAVE 命令 返回 ERR

    今天使用redis-cli客户端中执行SAVE命令返回 (error) ERR Baidu找不到答案,去Google找一下 应该是redis-server服务没有root权限 然后sudo kill ...