JavaScript 建立物件方法 Object.create()、new Object()、{} 比較
阿新 • • 發佈:2021-06-22
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