【JS】Object扩展-Object.create和Object.defineProperties区别

104 阅读1分钟

Object.create(prototype, descriptors)

Object.create 方法可以以指定对象为原型创建新的对象,同时可以为新的对象设置属性, 并对属性进行描述

属性描述包含以下值

  • value : 指定值
  • writable : 标识当前属性值是否是可修改的, 默认为 false
  • configurable:标识当前属性是否可以被删除 默认为 false
  • enumerable:标识当前属性是否能用for in 枚举 默认为 false
  • get:getter方法,当获取当前属性时的回调函数
  • set:setter方法,当设置当前属性时的回调函数
//创建一个汽车的对象
var car = {
    name : '汽车',
    run: function(){
        console.log('我可以行驶!!');
    }
};

//以 car 为原型对象创建新对象
var aodi = Object.create(car, {
    brand: {
        value: '奥迪',
        writable: false,         //是否可修改
        configurable: false,     //是否可以删除
        enumerable: true         //是否可以使用 for...in 遍历
    },
    color: {
        value : '黑色',
        wriable: false,
        configurable: false,
        enumerable: true
    },
    price:{
        get:function(){
            return this.t;
        },
        set:function(v){
            this.t = v;
        }
    }
});

delete aodi.color; //刪除属性

Object.defineProperties(object, descriptors)

直接在一个对象上定义新的属性或修改现有属性,并返回该对象。

  • object 要操作的对象
  • descriptors 属性描述
    • get :作为该属性的 getter 函数,如果没有 getter 则为undefined。函数返回值将被用作属性的值。
    • set :作为属性的 setter 函数,如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。
// 定义对象
var star = {
    firstName: '刘',
    lastName : '德华'
};

// 批量为 star 定义额外的属性
Object.defineProperties(star, {
    age:{
        value:18,
        writable:true,
        configurable:false,
        enumerable:false,
    },
    fullName: {
        get: function(){
            return this.firstName + this.lastName;
        },
        set: function(name){
            var res = name.split('-');
            this.firstName = res[0];
            this.lastName = res[1];
        }
    }
});

// 修改 fullName 属性值
star.fullName = '张-学友';

// 打印属性
console.log(star.fullName);


//单独设定属性
Object.defineProperty(obj,name,{
    get:function(){
        
    }
})

总结:

Object.create()是继承于某个对象创建的新对象,Object.defineProperties()是对对象属性的扩展