This translation is incomplete. Please help translate this article from English.
เมธอด Object.create()
ใช้สร้าง object ขึ้นใหม่ตาม prototype และ properties ที่ระบุ
ไวยากรณ์
Object.create(proto[, propertiesObject])
พารามิเตอร์
proto
- คือ object ที่ซึ่งจะเป็น prototype ของ object ที่สร้างขึ้นใหม่นี้
propertiesObject
- Optional. If specified and not
undefined
, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype chain) specify property descriptors to be added to the newly-created object, with the corresponding property names. These properties correspond to the second argument ofObject.defineProperties()
.
Throws
Throws a TypeError
exception if the proto
parameter isn't null
or an object.
ตัวอย่าง
Classical inheritance with Object.create()
Below is an example of how to use Object.create()
to achieve classical inheritance. This is for single inheritance, which is all that JavaScript supports.
// Shape - superclass function Shape() { this.x = 0; this.y = 0; } // superclass method Shape.prototype.move = function(x, y) { this.x += x; this.y += y; console.info('Shape moved.'); }; // Rectangle - subclass function Rectangle() { Shape.call(this); // call super constructor. } // subclass extends superclass Rectangle.prototype = Object.create(Shape.prototype); Rectangle.prototype.constructor = Rectangle; var rect = new Rectangle(); console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle);// true console.log('Is rect an instance of Shape?', rect instanceof Shape);// true rect.move(1, 1); // Outputs, 'Shape moved.'
If you wish to inherit from multiple objects, then mixins are a possibility.
function MyClass() { SuperClass.call(this); OtherSuperClass.call(this); } MyClass.prototype = Object.create(SuperClass.prototype); // inherit mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin MyClass.prototype.myMethod = function() { // do a thing };
The mixin
function would copy the functions from the superclass prototype to the subclass prototype, the mixin function needs to be supplied by the user. An example of a mixin like function would be jQuery.extend().
Using propertiesObject
argument with Object.create()
var o; // สร้าง object โดยใช้ค่า null เป็น prototype o = Object.create(null); o = {}; // ซึ่งมีค่าเท่ากับ: o = Object.create(Object.prototype); // Example where we create an object with a couple of sample properties. // (Note that the second parameter maps keys to *property descriptors*.) o = Object.create(Object.prototype, { // foo is a regular 'value property' foo: { writable: true, configurable: true, value: 'hello' }, // bar is a getter-and-setter (accessor) property bar: { configurable: false, get: function() { return 10; }, set: function(value) { console.log('Setting `o.bar` to', value); } /* with ES5 Accessors our code can look like this get function() { return 10; }, set function(value) { console.log('setting `o.bar` to', value); } */ } }); function Constructor() {} o = new Constructor(); // is equivalent to: o = Object.create(Constructor.prototype); // Of course, if there is actual initialization code in the // Constructor function, the Object.create() cannot reflect it // Create a new object whose prototype is a new, empty object // and add a single property 'p', with value 42. o = Object.create({}, { p: { value: 42 } }); // by default properties ARE NOT writable, enumerable or configurable: o.p = 24; o.p; // 42 o.q = 12; for (var prop in o) { console.log(prop); } // 'q' delete o.p; // false // to specify an ES3 property o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });
Polyfill
This polyfill depends on Object.prototype.hasOwnProperty
working correctly.
if (typeof Object.create != 'function') { // Production steps of ECMA-262, Edition 5, 15.2.3.5 // Reference: https://es5.github.io/#x15.2.3.5 Object.create = (function() { // To save on memory, use a shared constructor function Temp() {} // make a safe reference to Object.prototype.hasOwnProperty var hasOwn = Object.prototype.hasOwnProperty; return function (O) { // 1. If Type(O) is not Object or Null throw a TypeError exception. if (typeof O != 'object') { throw TypeError('Object prototype may only be an Object or null'); } // 2. Let obj be the result of creating a new object as if by the // expression new Object() where Object is the standard built-in // constructor with that name // 3. Set the [[Prototype]] internal property of obj to O. Temp.prototype = O; var obj = new Temp(); Temp.prototype = null; // Let's not keep a stray reference to O... // 4. If the argument Properties is present and not undefined, add // own properties to obj as if by calling the standard built-in // function Object.defineProperties with arguments obj and // Properties. if (arguments.length > 1) { // Object.defineProperties does ToObject on its first argument. var Properties = Object(arguments[1]); for (var prop in Properties) { if (hasOwn.call(Properties, prop)) { obj[prop] = Properties[prop]; } } } // 5. Return obj return obj; }; })(); }
ข้อกำหนด
ข้อกำหนด | สถานะ | หมายเหตุ |
---|---|---|
ECMAScript 5.1 (ECMA-262) The definition of 'Object.create' in that specification. |
Standard | Initial definition. Implemented in JavaScript 1.8.5. |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Object.create' in that specification. |
Standard |
ความเข้ากันได้กับเบราว์เซอร์
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 5 | 4.0 (2) | 9 | 11.60 | 5 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 4.0 (2) | (Yes) | 11.5 | (Yes) |
ดูเพิ่มเติม
Object.defineProperty()
Object.defineProperties()
Object.prototype.isPrototypeOf()
- John Resig's post on getPrototypeOf()