4、ES5对Object对象的扩展。

2019独角兽企业重金招聘Python工程师标准>>>

1、给对象增加属性。

当我们有一个对象，想给这个对象增加一个属性。可以用如下方法实现：

<script type="text/javascript">
    var obj = {username:"张三","age":40};
    obj.sex = "男";
    console.log(obj);

</script>

直接给obj对象增加sex属性。

2、使用Object.defineProperties为对象增加属性。

   Object.defineProperties(object,propertyDescriptors）的定义

• object给哪个对象增加属性。
• propertyDescriptors 对增加的属性进行描述。 

propertyDescriptors 用来描述属性的。可以有下面几个参数。

•  value 属性的值。
• configurable 属性是否能被删除。默认false。
• writable 属性是否能修改。默认false。
• enumerable 属性是否能用 fro in枚举，默认false。
• get 属性的get方法。
• set 属性的set方法。

例子如下：

<script type="text/javascript">
    var obj = {firstName:"张",lastName:"三"};

    Object.defineProperties(obj,{
        fullName: {
            get:function () {
                return this.firstName + this.lastName;
            },
            set:function (name) {
                var names = name.split(" ");
                this.firstName = names[0];
                this.lastName = names[1];
            }

        }
    })
    console.log(obj.fullName);//自动调用fullName的get方法
    obj.fullName = "王 5";//自动调用fullName的set方法
    console.log(obj.fullName);
    console.log(obj);
</script>

  

3、创建对象的时候。直接定义get、set

下面的代码在创建对象的时候，定义了fullName属性的get、set方法。效果和上面一样。

<script type="text/javascript">
    var obj = {
        firstName:"张",
        lastName:"三",
        get fullName() { //fullName直接定义为属性名
            return this.firstName + this.lastName;
        },
        set fullName(name) { //fullName直接定义为属性名
            var names = name.split(" ");
            this.firstName = names[0];
            this.lastName = names[1];
        }

    };
    console.log(obj.fullName);//自动调用fullName的get方法
    obj.fullName = "王 5";//自动调用fullName的set方法
    console.log(obj.fullName);
</script>

4、使用Object.create创建对象。

Object.(object,propertyDescriptors）方法，用给定的对象object做模板创建一个新的对象。也就说创建的新对象继承了object的所有属性。

例子如下：

<script type="text/javascript">
    var obj = {username:"张三","age":40};

    var objExt = Object.create(obj,{
        sex:{
            value:'男',//属性的值
            writable:true,//属性是否能修改。默认false
            configurable:true,//属性是否能被删除。默认false
            enumerable:true//属性是否能用 fro in枚举，默认false

        }
    })
    console.log(obj);
    console.log(objExt);//输出 {sex: "男"}
    console.log(objExt.username);//输出 张三
    console.log(objExt.age);//输出 40
    console.log(objExt.sex);//输出 男


    //改变了原始对象的age属性，扩展对象的age属性也被改变
    obj.age = 2018;
    console.log(objExt.age);//输出2018 ， 改变原始的age属性，继承的属性会被改变。

    //扩展对象重新增加了一个属性，覆盖了原始对象的属性
    objExt.username="李四";

    //改变了原始对象的username属性，不会改变扩展对象的username属性。
    obj.username = "王5";
    console.log(objExt.username);
</script>

这里需要注意：

-- 改变了原始对象的age属性，扩展对象的age属性也被改变
    obj.age = 2018;
    console.log(objExt.age);//输出2018 ， 改变原始的age属性，继承的属性会被改变。
--如果扩展对象重新增加了一个属性，覆盖了原始对象的属性，那这时候改变原始对象的username属性，不会改变扩展对象的username属性。
    objExt.username="李四";
    obj.username = "王5";//改变了原始对象的username属性，不会改变扩展对象的username属性。
    console.log(objExt.username);

 

 

 

转载于:https://my.oschina.net/kunBlog/blog/1634484