js对象

125 阅读1分钟
  1. 对象中包含一系列属性,这些属性是无序的。每个属性都有一个字符串key和对应的value
  2. js对象结构属性标签:writable、enumerable--是否可枚举、configurable--是否可配置、value、get/set class标签 proto extensible是否可增加新属性
  3. 创建对象
  • 字面量
var obj2 = {x:1,y:2,0:{z:3,n:4}};
  • new方式 原型
  • Object.create 系统内置 对象原型指向参数

图片.png

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. 原型链
function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.y = 2;
obj.x = 1l
obj.x; //1
obj.y; //2
obj.z; //3
typeof obj.toString; //"function"
'z' in obj; //true
obj.hasOwnProperty('z'); //false
  1. js属性操作
  • 读写对象属性
    var obj = {x:1,y:2};
    obj.x; //1
    obj["y"]; //2
    obj["x"] = 3;
    obj.y=4;
    var obj = {x1:1,x2:2};
    var i = 1,n = 2;
    for(;i<=n;i++){
        console.log(obj["x"+i])
    }
    //输出1,2 
    //注:for循环遍历可能会把原型链上的也会读出来,顺序还不确定
    var p;
    for(p in obj){
        console.log(obj[p]);
    }
  • 属性异常---读写不存在的
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.z){
yz = obj.y.z
}
var yz = obj && obj.y && obj.y.z
  • 删除属性
var person = {age:28,title:'fe'};
delete person.age; // true
delete person['title']; //true
person.age; //undefined
delete person.age; //true  v 对象上已不存在删除的标签

delete Object.prototype; //false
var descriptor = Object.getOwnPropertyDescriptor(Object,'prototype');
descriptor.configurable; //false

注:不可删除局部变量或全局变量 图片.png

  • 检测属性
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  是否可枚举
Object.defineProperty(cat,'price',{enumerable:false,value:1000});
cat.propertyIsEnumerable('price'); //true
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
}
  • 枚举属性
var o = {x1,y:2,z:3};
'toString' in o; //true
o.propertyiEnumerable('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 读写方法

图片.png

  • get/set与原型链

图片.png

图片.png

  1. js属性标签
//获取所在对象的属性标签
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.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

总结:

图片.png

  1. 对象标签 [[proto]] [[class]] [[extensible]]
  • proto 原型标签

图片.png

  • class

图片.png

  • extensible标签 表示对象是否可扩展,是否可以继续添加

图片.png

  1. 序列化

图片.png

图片.png

图片.png