25 JavaScript对象原型&ES5新的对象方法

JavaScript对象原型

  • 所有JavaScript对象都从原型继承对象和方法
  • 日期对象继承自Date.prototype,数组继承自Array.prototype,对象构造器新建的对象Person继承自Person.prototype
  • Object.prototype位于原型继承连的顶端
  • 日期对象、数组对象、Person对象都继承自Object.prototype

JavaScript prototype允许在对象构造器函数外面为构造器添加新属性和新方法

<script>
     //对象构造器
     function Person(f,l,age,eyeColor){
         this.firstName = f;
         this.lastName = l;
         this.age = age;
         this.eyeColor = eyeColor;
         //为构造器添加属性和方法,必须在构造器函数里面添加,不能在外面添加(除非使用prototype)
         this.changeName = function(name){
             this.lastName = name;
         };
     }

     Person.prototype.nationality = "China";
     Person.prototype.changeAge = function(newAge){
         this.age = newAge;
     };
     var zhangsan = new Person("zhangsan","lisi",13,"blue");
     var liuliu = new Person("liuliu","qiqi",13,"blue");
     zhangsan.changeAge(100);
    //  document.getElementById("demo").innerHTML = zhangsan.nationality;
    document.getElementById("demo").innerHTML = zhangsan.age;
    </script>

 

 

ES5特性

<script>
        //ES5新的对象方法

        //添加或更改对象属性
        Object.defineProperty(obj, property, desc)

        //添加或更改多个对象属性
        Object.defineProperties(obj, descriptions)

        //访问属性
        Object.getOwnPropertyDescriptor(obj, property)

        //以数组形式返回所有属性
        Object.getOwnPropertyNames(obj)

        //以数组形式返回所有可枚举的属性
        Object.keys(obj)

        //访问原型
        Object.getPrototypeOf(obj)

        //组织向对象添加属性
        Object.preventExtensions(obj)

        //如果可将数学添加到对象,返回true
        Object.isExtensible(obj)

        //防止更改对象属性
        Object.seal(obj)

        //如果对象被密封,返回true
        Object.isSealed(obj)

        //防止对对象进行任何更改
        Object.freeze(obj)

        //如果对象被冻结,返回true
        Object.isFrozen(obj)
</script>

 

ES5允许修改以下属性元数据:

writable : true      // 属性值可修改
enumerable : true    // 属性可枚举
configurable : true  // 属性可重新配置
writable : false     // 属性值不可修改
enumerable : false   // 属性不可枚举
configurable : false // 属性不可重新配置

 

设置为只读:

 

列出所有属性,返回数组:

 

 

 

ES5添加getter和setter

 

 

ES5添加getter、setter方法实现计数器:

 

posted @ 2019-11-15 18:54  IslandZzzz  阅读(205)  评论(0编辑  收藏  举报