JavaScript基础(三)对象

1.创建对象-new/原型链

    function foo(){}

    foo.prototype.z = 3;//原型链

    var obj = new foo();

    obj.y = 2;

    obj.x = 1;

    //返回

    obj.y = 2; 

    obj.x = 1;

    obj.z = 3; //在属性中没有找到z,会去原型链中找到z的属性

    typeof obje.toString;//function

    'z' in obj;

    obj.hasOwnProerty('z');//false //对象没有这个属性


    obj.z = 5; //不会给原型链赋值,会创建一个z属性

    obj.hasOwnProerty('z');//true //obj 有这个属性了

    obj.prototype.z ;//3

    obj.z = 5;//5   

    

    obj.z = undefined;

    obj.z;//undefined;

    //如何取原型链上的z的值

    delete obj.z;//true

    obj.z;//3

    delete obj.z;//true; //再次delete也不会删除,原型链上的z的属性

    obj.z;//3 //就是继承过来的值不会被修改

2.对象创建-Object.create

    var obj = Object.create({x:1});

    obj.x;//1

    typeof obj.toString;//Object.prototype = function

    obj.hasOwnProperty('x');//false 因为是原型链属性,所以返回false;

   

    var obj = Object.create(null);

    obj.toString;//undefined; 因为赋值个原型链中修改默认的Object.prototype方法 所以返回undefined

3.读写对象属性

    3.1属性的读写

        var obj = {x:1,y:2};

        obj.x;//1

        obj["y"];//2


        obj["x"];//1

        obj.y;//2

        

        var obj = {x1:1,x2:2,x3:3,......}

        var I = 1 ,n=2

        for(;I<=n,i++){

            console.log(obj['x'+i]);

         }


        var p;

       for(p in obj){

            console.log(obj[p]);//输入的对象的内容包括原型链的数据,并且是无序的。

         }

   3.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;  //undefined

         }               

   3.3 删除属性

        var person = {age:28,title:'fe'};

        delete person.age;//true

        delete person['title'];//true

        person.age;//undefined

        delete person.age;//true  删除不存在的属性,仍然返回true;


        delete Object.proptotype;//false delete 无法删除原型链里的数据


        var descripto = object.getOwnPropertyDesciptor(Object,'prototype');//查看Object下prototype属性标签

        descriptot.configurable;//false configurable=false 所以此标签不可配置,所以不能删除

        //不能delete删除的如下

        var globalVal = 1;

        delete globalVal;//false var直接赋值的不可删除

        

        function fd()

        delete fd;//false 方法不能delete

    

        (function(){

            var localVal = 1;

            retrun delete localVal;//false var直接赋值的不能delete

         }());


       

        (function(){

            function fd();

            retrun delete fd();//false 方法直接赋值的不能delete

         }());


        ohNo = 1;//隐式创建全部变量,delete是可以删除其值得

        window.ohNo;//1

        delete ohNo;//true    

   3.4 检测属性

        var cat = new Object;

        cat.legs = 4;

        cat.name = 'Kitty';

        

       'legs' in cat;//true 属性在cat对象中

       'abc' in cat;//false 属性没有在cat对象中

        'toString' in cat;//true in 是包换原型链的,所以返回true


        cat.hasOwnProperty('legs');//true cat中包含legs属性

        cat.hasOwnProperty("toString");//false 使用hasOwnProperty判断属性是不包含原型链的

    

        cat.propertyIsEnumerable('legs');//true  判断枚举中是否包含这个属性

        cat.propertyIsEnumerable('toString');//false 默认toString是不能被枚举的;

        

        Object.defineProperty(cat,'price',{enumerable:false,value:1000});//给cat添加属性price,并且设置枚举enumerable为flase是可以被枚举的,true是可以枚举的,并且赋值为1000

        cat.properfyIsEnumerable('price');//false 所以返回false

        cat.hasOwnProperty('price');//true  但是他仍然对象的属性

        

        if(cat && cat.legs){  cat.legs * = 2 ;}

        if(cat.legs != undefined){} //!==undefined or !==null

        if(cat.legs !== undefined){} //!==undefined    

    3.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  因为o.propertyIsEnumerable("toString");//false所以是不能枚举的,所以不能输出原型链数据

         }

        //输出枚举中原型链的数据如下

        var obj = Object.create(o);

        obj.a = 4;

        var key;

        for(key in o){

            console.log(key);//a,x,y,z   x,y,z是obj原型链上的数据

            //不输出原型链上的数据

            //if(obj.hasOwnProperty(key)){ console.log(key);  // a }

         }

4.另一种读写属性的方法( getter/setter方法)

    var man = {

        name:'Bosn',

        webo:'@Boson',

        get age(){

            return new Date(),getFullYear() - 1988; //使用get 给man对象的age属性赋值

         },

        set age(val){

            console.log('Age can\'t be set to ' + val); //val 是给man对象中的age修改的值,因为没有赋值语,所以会输出括号的恩内容;

         };    

        console.log(man.age);//30

        man.age = 100 ;//Age can't be set to 100; //赋值不成功的返回值

        console.log(man.age);//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;//给一般属性age赋值            

             }else{

                throw new Error('Incorrect val = ' + val);

             }

         }

     }

    console.log(man.age);//30

    man.age = 100;

    console.log(man.age);//100

    man.age = 'abc';

    console.log(man.age);//error : Incorrect val = NaN;

get/set与原型链结合

    function foo(){}

    Object.defineProperty(foo.prototype , 'z' , {get:function(){return 1;} } ); //给原型链z属性赋值为1

    var obj = new foo();

    obj.z;//1

    obj.z = 100;

    obj.z;//1  如果原型链是用get/set赋值 obj.z = 100;不会被创建,也不会被赋值。

    //如何给obj.z赋值

    Object.defineProperty( obj , 'z' , { value:100 , configurable:true } ); //给对象添加了一个z的属性,添加的这个并不是原型链中的属性z;

    obj.z;//100

    delete obj.z;//true

    obj.z;//back to 1

    

    var o = {};

    Object.defineProperty( o , 'x' , {writable = false ,configurable = false, value: 1 } );//默认都是writable 、configurable = false;true 就是可以修改的;

    var obje = new Objcet.create( o );

    obj.x;//1

    obj.x = 200;

    obj.x ;//1

5.属性级的权限设置

    Object.getOwnPropertyDescriptor({ pro : true } , 'pro');

    返回一个Object{ value:true , writable:true , enumerable:true , configurable:true};

    Object.getOwnPropertyDescriptor({ pro : true } , 'a');//不存在的属性返回undefined

    

    var person = {};

        Objcet.defineProperty(person , 'name' , {

            configurable : false,

            writable : false,

            enumerable : true,

            value :"Bosn Ma";

         });

    person.name;//Bosn Ma;

    person.name = 1;

    person.name;//Bosn Ma;

    delete person.name;//false


    Objcet.defineProperty(person , 'type' , {

         configurable : true,

        writable : true,

        enumerable :false,

        value : "Objcet"

     });

    Object.key(person);//["name"] 因为person中的type属性  enumerable :false(枚举类型为false),所以只能显示属性名称【‘‘name’’】
    

    Object.defineProperties(person,{

        title:{value:'fe' , enumerable:true},

        corp:{value:'BABA' , enumerable:true},

        salary:{value:5000 , enumerable:true , writable:true}

     })

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

    对象标签

        [[proto]]  //原型

        对象中原型链中的原型和对象属性的中的原型。

        [[class]] //表示对象是哪一个类型的,没有办法直接查看可以间接查看如下:

            var toString = Object.prototype.toString;

            function getType(o){ return toString.call( o ).slice(8,-1);};

            toString.call(null);//"[objcet Null]"

           getType(null);//Null

            getType(undefined);//undefined

            getType(1);//Number

            typeof new Number(1);//object

            getType(new Number(1));//Number

            getType(true);//boolean

            getType(new Boolean(true));//boolean

        [[extensible]] //判断对象是否可扩展

            var obj = {x:1,y:2};

            Objcet.isExtensible(obj);//true;

            Objcet.preventExtensions(obj);//设置对象不可扩展

            Objcet.isExtensible(obj);//false;

            obj.z = 1;

            obj.z;//undefined.add new property failed;

            Object.getOwnPropertyDescriptor(obj , 'x'); 

            //Object(value:1 , writable:true , enumerable:true , configurable:true)


            Objcet.seal(obj);//属性不可删除 configurable:false 默认不会修改原型链的属性

            Object.getOwnPropertyDescriptor(obj , 'x');

            //Object(value:1 , writable:true , enumerable:true , configurable:false)

            Objcet.isSealed(obje);//false

            

            Object.freeze(obj);//冻结 不可修改 默认不会修改原型链的属性

            Object.getOwnPropertyDescriptor(obj , 'x');           

            //Object(value:1 , writable:false, enumerable:true , configurable:false)

            Object.isFrozen(obj);//true 

    序列化

        var obj = {x:1 , y:true , z:[1,2,3] , nullVal :null} ;

        JSON.stringify(obje);//转换成json格式

        //"{"x":1 , "y":true , "z":[1,2,3] , "nullVal" : null}"


        obj = {val:undefined , a:NaN , b:Infinity , c:new Date()};

       JSON.stringify(obj);//undefined 不做转换 ,a,b的值是null ,c的值是当前日期

       //"{"a":null , "b":null , "c":"2015-01-23T14:15:43:43.910Z" }" utc时间格式


        obj = JSON.parse('{"x":1}');//json的属性必须用“”号

        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}" //转换这转换toJSON方法


    其他对象方法

        var obj = {x:1 , y:2};

       obj.toString;//[object,object]

       obj.toString = function(){return this.x + this.y};//自定义toString

      "Result" + obj;//"Result 3"

       

       +obj;//3


        obj.valueOf = function(){return this.x + this.y + 100};//尝试将对象转换成基本类型

        +obj;//103

        "Result" + obj;//Result 103 如果有valueOf和toString,先找valueOf; 如果valueOf 不合法,会找toString;如果valueOf和toString都不合法,则报错;

        


    总结:JavaScript 中主要的章节,需要反复的看几遍。



    

    


    

猜你喜欢

转载自blog.csdn.net/jianghai_csdn/article/details/79351119