1. 程式人生 > 其它 >JavaScript 建立物件方法 Object.create()、new Object()、{} 比較

JavaScript 建立物件方法 Object.create()、new Object()、{} 比較

1 Object.create()

Object.create(null) 建立的物件是一個空物件,在該物件上沒有繼承 Object.prototype 原型鏈上的屬性或者方法,例如:toString()、hasOwnProperty() 等方法
Object.create() 方法接受兩個引數: Object.create(obj, propertiesObject)

obj: 一個物件,新建立的物件的原型。
propertiesObject:可選。該引數物件是一組屬性與值,該物件的屬性名稱將是新建立的物件的屬性名稱,值是屬性描述符(這些屬性描述符的結構與Object.defineProperties()的第二個引數一樣)。

注意:propertiesObject 引數物件不能是 undefined,另外只有該物件中自身擁有的可列舉的屬性才有效,即 該物件的原型鏈上屬性是無效的。

var obj = Object.create(Object.prototype, {
  // foo會成為所建立物件的資料屬性
  foo: {
    configurable: true, //能否使用delete、能否需改屬性特性、或能否修改訪問器屬性,預設為false不可重新定義
    enumerable:false, //物件屬性是否可通過for-in迴圈,預設值為flase不可迴圈
    writable: true, //物件屬性是否可修改,預設值為flase不可修改
    value: "hello" //物件屬性的預設值,預設值為undefined
  },

  // bar會成為所建立物件的訪問器屬性
  bar: {
    configurable: false,
    get: function () { return 10 },
    set: function (value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

console.log(obj.foo); // hello
console.log(obj.foo = '你好!') // 你好!
var other = Object.create(null);
console.log(other); // {} No Properties

2 new Object() 和 {}

new Object() 和 {} 的本質並無區別,預設都是繼承了Object物件上的prototype

var test0 = {}
var test1 = { x: 1 }

var test2 = new Object()
var test3 = new Object(test1) // 繼承test1

var test4 = Object.create(test1)

var test5 = function () { } // 建構函式
test5.prototype = test1 // 繼承test1

var test6 = new test5()

console.log(`test0:`, test0) // test0: {}      __proto__.constructor: Object()
console.log(`test1:`, test1) // test1: { x: 1} __proto__.constructor: Object()
console.log(`test2:`, test2) // test2: {}      __proto__.constructor: Object()
console.log(`test3:`, test3) // test3: {x:1}   __proto__.constructor: Object()
console.log(`test4:`, test4) // test4: {}      __proto__ 為test1
console.log(`test5:`, test5) // test5: f(){}
console.log(`test6:`, test6) // test6: test5 {}
console.log(test0.__proto__ === test2.__proto__) // true
console.log(test1.__proto__ === test3.__proto__) // true
console.log(test3.__proto__ === test4.__proto__) // false
console.log(test6.__proto__ === test1) // true
console.log(test6.__proto__ === test3.__proto__) // false
console.log(test6.__proto__ === test4.__proto__) // true