1. 程式人生 > >Object.create()和new object()和{}的區別

Object.create()和new object()和{}的區別

define pset operator 不能 div 有效 兩個 property table

Object.create()介紹
Object.create(null) 創建的對象是一個空對象,在該對象上沒有繼承 Object.prototype 原型鏈上的屬性或者方法,例如:toString(), hasOwnProperty()等方法

Object.create()方法接受兩個參數:Object.create(obj,propertiesObject) ;

obj:一個對象,應該是新創建的對象的原型。

propertiesObject:可選。該參數對象是一組屬性與值,該對象的屬性名稱將是新創建的對象的屬性名稱,值是屬性描述符(這些屬性描述符的結構與Object.defineProperties()

的第二個參數一樣)。註意:該參數對象不能是 undefined,另外只有該對象中自身擁有的可枚舉的屬性才有效,也就是說該對象的原型鏈上屬性是無效的。

var o = Object.create(Object.prototype, {
  // foo會成為所創建對象的數據屬性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar會成為所創建對象的訪問器屬性
  bar: {
    configurable: false,
    get: function() { return
10 }, set: function(value) { console.log("Setting `o.bar` to", value); } } });

console.log(o);//

var o = Object.create(Object.prototype, {
  // foo會成為所創建對象的數據屬性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar會成為所創建對象的訪問器屬性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

console.log(o);//{foo:‘hello‘}

var test1 = Object.create(null) ;
console.log(test1);// {} No Properties

因為在bar中設置了configurable 使用set,get方法默認都是不起作用,所以bar值無法賦值或者獲取
這裏的o對象繼承了 Object.prototype Object上的原型方法

我們可以 對象的 __proto__屬性,來獲取對象原型鏈上的方法 如:

console.log(o.__proto__);//{__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …}
console.log(test1.__proto__);//undefined

通過打印發現, 將{}點開,顯示的是 No Properties ,也就是在對象本身不存在屬性跟方法,原型鏈上也不存在屬性和方法,

new object()

var test1 = {x:1};

var test2 = new Object(test1);

var test3 = Object.create(test1);
console.log(test3);//{}
//test3等價於test5
var test4 = function(){
  
}
test4.prototype = test1;
var test5 = new test4();
console.log(test5);
console.log(test5.__proto__ === test3.__proto__);//true
console.log(test2);//{x:1}

{}

var test1 = {};
var test2 = new Object();
var test3 = Object.create(Object.prototype);
var test4 = Object.create(null);//console.log(test4.__proto__)=>undefined 沒有繼承原型屬性和方法
console.log(test1.__proto__ === test2.__proto__);//true
console.log(test1.__proto__ === test3.__proto__);//true
console.log(test2.__proto__ === test3.__proto__);//true

總結:使用Object.create()是將對象繼承到__proto__屬性上

var test = Object.create({x:123,y:345});
console.log(test);//{}
console.log(test.x);//123
console.log(test.__proto__.x);//3
console.log(test.__proto__.x === test.x);//true

var test1 = new Object({x:123,y:345});
console.log(test1);//{x:123,y:345}
console.log(test1.x);//123
console.log(test1.__proto__.x);//undefined
console.log(test1.__proto__.x === test1.x);//false

var test2 = {x:123,y:345};
console.log(test2);//{x:123,y:345};
console.log(test2.x);//123
console.log(test2.__proto__.x);//undefined
console.log(test2.__proto__.x === test2.x);//false

參考資料:

  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new

  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Object.create()和new object()和{}的區別