ES6参考---es5-Object扩展

ES6参考---es5-Object扩展

一、总结

一句话总结:

1、Object.create(prototype, [descriptors]):以指定对象为原型创建新的对象,并且为新的对象指定新的属性, 并对属性进行描述
2、Object.defineProperties(object, descriptors):为指定对象定义扩展多个属性
1. Object.create(prototype, [descriptors])
  * 作用: 以指定对象为原型创建新的对象
  * 为新的对象指定新的属性, 并对属性进行描述
    value : 指定值
    writable : 标识当前属性值是否是可修改的, 默认为false
    configurable: 标识当前属性是否可以被删除 默认为false
    enumerable: 标识当前属性是否能用for in 枚举 默认为false

2. Object.defineProperties(object, descriptors)
  * 作用: 为指定对象定义扩展多个属性
  * get :用来获取当前属性值得回调函数
  * set :修改当前属性值得触发的回调函数,并且实参即为修改后的值
  * 存取器属性:setter,getter一个用来存值,一个用来取值

1、Object.create(prototype, [descriptors]) 作用?

a、prototype: 以指定对象为原型创建新的对象
b、[descriptors]:为新的对象指定新的属性, 并对属性进行描述
var obj = {name : 'curry', age : 29}
var obj1 = {};
obj1 = Object.create(obj, {
    sex : {
        value : '男',
        writable : true
    }
});
obj1.sex = '女';
console.log(obj1.sex);

2、Object.create(prototype, [descriptors]):以指定对象为原型创建新的对象 实例?

Object.create(obj, {sex:{}}):obj做原型,{sex:{}}是添加新属性
var obj = {name : 'curry', age : 29}
var obj1 = {};
obj1 = Object.create(obj, {
    sex : {
        value : '男',
        writable : true
    }
});
obj1.sex = '女';
console.log(obj1.sex);

3、Object.create(prototype, [descriptors]):为新的对象指定新的属性, 并对属性进行描述 中有哪些描述属性?

a、value : 指定值
b、writable : 标识当前属性值是否是可修改的, 默认为false
c、configurable: 标识当前属性是否可以被删除 默认为false
d、enumerable: 标识当前属性是否能用for in 枚举 默认为false
var obj = {name : 'curry', age : 29}
var obj1 = {};
obj1 = Object.create(obj, {
    sex : {
        value : '男',
        writable : true
    }
});
obj1.sex = '女';
console.log(obj1.sex);

4、Object.defineProperties(object, descriptors) 的作用?

为指定对象定义扩展多个属性,扩展的属性里面可以有get和set方法
var obj2 = {
    firstName : 'curry',
    lastName : 'stephen'
};
Object.defineProperties(obj2, {
    fullName : {
        get : function () {
            return this.firstName + '-' + this.lastName
        },
        set : function (data) {
            var names = data.split('-');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    }
});
console.log(obj2.fullName);
obj2.firstName = 'tim';
obj2.lastName = 'duncan';
console.log(obj2.fullName);
obj2.fullName = 'kobe-bryant';
console.log(obj2.fullName);

5、Object.defineProperties(object, descriptors):为指定对象定义扩展多个属性  中的每个属性的get和set方法的作用是什么?

1、get:用来获取当前属性值得回调函数
2、set:修改当前属性值得触发的回调函数,并且实参即为修改后的值
var obj2 = {
    firstName : 'curry',
    lastName : 'stephen'
};
Object.defineProperties(obj2, {
    fullName : {
        get : function () {
            return this.firstName + '-' + this.lastName
        },
        set : function (data) {
            var names = data.split('-');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    }
});
console.log(obj2.fullName);
obj2.firstName = 'tim';
obj2.lastName = 'duncan';
console.log(obj2.fullName);
obj2.fullName = 'kobe-bryant';
console.log(obj2.fullName);

二、es5-Object扩展

博客对应课程的视频位置:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>03_Object扩展</title>
 6 </head>
 7 <body>
 8 <!--
 9 ES5给Object扩展了好一些静态方法, 常用的2个:
10 1. Object.create(prototype, [descriptors])
11   * 作用: 以指定对象为原型创建新的对象
12   * 为新的对象指定新的属性, 并对属性进行描述
13     value : 指定值
14     writable : 标识当前属性值是否是可修改的, 默认为false
15     configurable: 标识当前属性是否可以被删除 默认为false
16     enumerable: 标识当前属性是否能用for in 枚举 默认为false
17 
18 2. Object.defineProperties(object, descriptors)
19   * 作用: 为指定对象定义扩展多个属性
20   * get :用来获取当前属性值得回调函数
21   * set :修改当前属性值得触发的回调函数,并且实参即为修改后的值
22   * 存取器属性:setter,getter一个用来存值,一个用来取值
23 -->
24 <script type="text/javascript">
25     var obj = {name : 'curry', age : 29}
26     var obj1 = {};
27     obj1 = Object.create(obj, {
28         sex : {
29             value : '',
30             writable : true
31         }
32     });
33     obj1.sex = '';
34     console.log(obj1.sex);
35 
36     //Object.defineProperties(object, descriptors)
37     var obj2 = {
38         firstName : 'curry',
39         lastName : 'stephen'
40     };
41     Object.defineProperties(obj2, {
42         fullName : {
43             get : function () {
44                 return this.firstName + '-' + this.lastName
45             },
46             set : function (data) {
47                 var names = data.split('-');
48                 this.firstName = names[0];
49                 this.lastName = names[1];
50             }
51         }
52     });
53     console.log(obj2.fullName);
54     obj2.firstName = 'tim';
55     obj2.lastName = 'duncan';
56     console.log(obj2.fullName);
57     obj2.fullName = 'kobe-bryant';
58     console.log(obj2.fullName);
59 </script>
60 </body>
61 </html>
 
原文地址:https://www.cnblogs.com/Renyi-Fan/p/12554065.html