js - object的属性操作
视频学习地址:
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); // 27 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); // 27 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; // 1 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; // 1 obj.x = 200; obj.x; // still 1, can't change it Object.defineProperty(obj, 'x', {writable:true, configurable:true, value : 100}); obj.x; // 100 obj.x = 500; obj.x; // 500
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; // 50000 person.promote = 2; person.salary; // 60000