JavaScript深入浅出学习笔记（四）—对象

        对象中包含一系列属性，这些属性是无序的。每个属性都有一个字符串key和对应的value。

var obj = {};
obj[1] = 1;
obj['1'] = 2;
obj;//Object{1:2}

obj[{}] = true;
obj[{x:1}] = true;
obj;//Object{1:2,[object Object]:true}

 

一.创建对象

1.字面量

var obj1 = {x:1,y:2};
var obj2 = {
     x:1,
     y:2,
     o: {
         z:3,
         n:4
     }
};

2.new/原型链

function foo() {}
foo.prototype.z = 3;

var obj = new foo();
obj.y=2;
obj.x=1;

obj.x;//1
obj.y;//2
obj.z;//3
typeof obj.toString;//'function'
'z' in obj;//true
obj.hasOwnProperty('z');//false

obj.z = 5;
obj.hasOwnProperty('z');//true
foo.prototype.z;//still 3
obj.z;//5

obj.z = undefined;
obj.z;//undefined

delete obj.z;//true
obj.z;//3

3.Object.create

var obj = Object.create({x:1});
obj.x;//1
typeof obj.toString;//"function"
obj.hasOwnProperty('x');//false

var obj = Object.create(null);
obj.toString;//undefined

 

二.属性操作

1.读写对象属性

var obj = {x:1,y:2};
obj.x;//1
obj["y"];//2

var obj = {x1:1,x2:2};
var i=1,n=2;
for(;i<=n;i++) {
     console.log(obj['x'+i]);
}
//输出:1,2

var p;
for(p in obj) {
     console.log(obj[p]);
}

2.属性读写-异常

var obj = {x:1};
obj.y;//undefined
var yz=obj.y.z;//TypeError:Cannot read property 'z' of undefined
obj.y.z=2;//TypeError:Cannot set property 'z' of undefined

var yz;
if(obj.y) {
   yz = obj.y.z;
}
var yz = obj && obj.y && obj.y.z;

3.删除属性

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');//获得Object对象的prototype属性描述器
descriptor.configurable;//false

var定义的全局变量或局部变量，不能被删除。

 

var globalVal = 1;
delete globalVar;//false

(function() {
     var localVal = 1;
     return delete localVal;
}());//false

function fd(){}
delete fd;//false

(function() {
    function fd() {};
    return delete fd;
}()); //false

ohNo = 1;
window.ohNo;//1
delete ohNo;//true

 

4.检测属性

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

自定义属性，可以让其枚举为false，可用Object.defineProperty

//自定义属性，可以让其枚举为false
Object.defineProperty(cat, 'price', {enumerable:false, value:1000});
cat.propertyIsEnumerable('price');//false
cat.hasOwnProperty('price');//true

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
}

5.枚举属性

var o = {x:1,y:2,z:3};
'toString' in o;//true
o.propertyIsEnumerable('toString');//false
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
    }
}

 

三.get/set方法

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

get/set与原型链

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

 

四.属性标签

//Object.getOwnPropertyDescriptor方法第一个参数是要判断的对象，第二个参数是要判断的属性名
Object.getOwnPropertyDescriptor({pro:true}, 'pro');
//Object {value:true, writable:true, enumerable:true,configurable:true}
Object.getOwnPropertyDescriptor({pro:true}, 'a');//undefined

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.defineProperty(person, 'type', {
   configurable: true,
   writable:true,
   enumerable:false,
   value:"Object"
});
Object.keys(person);//["name"],因为type属性的enumerable为false

writable：表示这个属性是否可以被修改或可写

enumeralbe：表示这个属性是否可以被枚举

configurable：表示这个属性是否可以再被修改，是否可以用delete删除

Object.defineProperties(person, {
     title: {value:'fe', enumeralbe: true},
     corp: {value: 'BABA', enumerable:true},
     salary: {value:50000, enumeralbe: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

 

五.对象标签、对象序列化

1.原型标签_proto_

2.class标签

var toString = Object.prototype.toString;
function getType(o) {return toString.call(o).slice(8,-1);};
toString.call(null);//"[object Null]"
getType(null); //"Null"
getType(undefined);//"Undefined"
getType(1);//"Number"
getType(new Number(1));//"Number"
typeof new Number(1);//"object"
getType(true);//"Boolean"
getType(new Boolean(true));//"Boolean"

3.extensible标签：对象是否可扩展

 

var obj = {x:1, y:2};
Object.isExtensible(obj);//true
Object.preventExtensions(obj);
Object.isExtensible(obj);//false
obj.z = 1;
obj.z;//undefined,add new property failed
Object.getOwnPropertyDescriptor(obj, 'x');
//Object {value:1, writable:true, enumeralbe:true, configurable:true}

Object.seal(obj);//Object.seal方法在Object.isExtensible基础上又增加了一条限制，将对象上所有属性的configurable设置为false
Object.getOwnPropertyDescriptor(obj, 'x');
//Object {value:1, writable:true, enumerable:true, configurable:false}
Object.isSealed(obj);//true

Object.freeze(obj);//Object.freeze冻结对象，即将writable、configurable两属性设为false,不可删除、修改对象属性的值
Object.getOwnPropertyDescriptor(obj,'x');
//Object {value:1,writable:false, enumerable:true, configurable:false}
Object.isFrozen(obj);//true

//[caution] not affects prototype chain!!!不影响原型链!!!

4.序列化、其它对象方法

var obj = {x:1,y:true,z:[1,2,3],nullVal:null};
JSON.stringify(obj);//"{"x":1,"y":true,"z":"[1, 2, 3]","nullVal":null}"

//如果序列化的对象的属性是undefined时，将忽略;如果是Infinity时，将转化为null
obj = {val:undefined, a:NaN, b:Infinity, c:new Date()};
JSON.stringify(obj);//"{"a":null,"b":null,"c":"\"2015-01-28T15:22:10Z\""}"

obj = JSON.parse('{"x":1}');
obj.x;//1

自定义序列化

var obj = {
      x:1,
      y:2,
      o: {
             o1:1,
             o2:2,
             toJSON:function() {
                 return this.o1 + this.o2;
             }
       }
};
JSON.stringify(obj);//"{"x":1,"y":2,"o":3}"

其它对象方法

var obj = {x:1, y:2};
obj.toString();//"[object Object]"
obj.toString = function() {return this.x + this.y};
"Result " + obj;//"Result 3",by toString

+obj;//3,from toString

obj.valueOf = function() {return this.x + this.y + 100;};
+obj;//103, from valueOf

"Result " + obj;//"Result 103"

 

视频学习地址：http://www.imooc.com/learn/277