initial commit

1 files changed, 258 insertions, 0 deletions

diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/create/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/create/index.html
new file mode 100644
index 0000000000..f158d36977
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/create/index.html
@@ -0,0 +1,258 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Global_Objects/Object/create
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.create()</strong></code> 指定其原型物件與屬性，創建一個新物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">Object.create(<var>proto</var>[, <var>propertiesObject</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>proto</code></dt>
+ <dd>指定新物件的原型 (prototype) 物件。</dd>
+ <dt><code>propertiesObject</code></dt>
+ <dd>選用，為一物件。如有指定且非 {{jsxref("undefined")}}，則此參數物件中可列舉出的屬性 (即參數物件自身定義的屬性，並非指原型鏈上的 <code>enumerable</code> 特性 ) 對應其屬性名稱，根據其屬性敘述元 (property descriptors) 加進新創建的物件。這些屬性對應到 {{jsxref("Object.defineProperties()")}} 的第二個參數。</dd>
+</dl>
+
+<h3 id="回傳">回傳</h3>
+
+<p>具有指定原型物件與屬性的新物件。</p>
+
+<h3 id="例外">例外</h3>
+
+<p> 如果 <code>proto</code> 參數不是 {{jsxref("null")}} 或一個物件，將會拋出 {{jsxref("TypeError")}} 例外。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Object.create()_實現類別繼承">使用 <code>Object.create() </code>實現類別繼承</h3>
+
+<p>下方是如何使用 <code>Object.create()</code> 去實現類別繼承的示範，此為 JavaScript 支援的單一繼承.。</p>
+
+<pre class="brush: js">// Shape - 父類別
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// 父類別的方法
+Shape.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Shape moved.');
+};
+
+// Rectangle - 子類別
+function Rectangle() {
+  Shape.call(this); // call super constructor.
+}
+
+// 子類別擴展(extends)父類別
+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.'
+</pre>
+
+<p>也可像 mixin 繼承多個物件。</p>
+
+<pre class="brush: js">function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+// 繼承一個父類別
+MyClass.prototype = Object.create(SuperClass.prototype);
+// mixin另一個父類別
+Object.assign(MyClass.prototype, OtherSuperClass.prototype);
+// 重新指定建構式
+MyClass.prototype.constructor = MyClass;
+
+MyClass.prototype.myMethod = function() {
+  // do a thing
+};
+</pre>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">Object.assign</a> 複製 OtherSuperClass 原型上的所有屬性到 MyClass 的原型上，使所有 MyClass 的實例都能使用。Object.assign 為 ES2015 標準且<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill">有 polyfill</a>。如需支援較舊的瀏覽器，可使用第三方套件實現如 <a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a> 或 <a href="https://lodash.com/docs/#assign">_.assign()</a> 。</p>
+
+<h3 id="propertiesObject_參數的使用"><code>propertiesObject</code> 參數的使用</h3>
+
+<pre class="brush: js">var o;
+
+// 建立以null為原型的物件
+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 為數值屬性
+  foo: { writable: true, configurable: true, value: 'hello' },
+  // bar 為 getter-and-setter 訪問屬性
+  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();
+// 等同於:
+o = Object.create(Constructor.prototype);
+// Of course, if there is actual initialization code in the
+// Constructor function, the Object.create() cannot reflect it
+
+
+// 創建一個新物件，指定原型是全新的空物件，並加入值為 42 的屬性'p'
+o = Object.create({}, { p: { value: 42 } });
+
+// 屬性敘述元 writable, enumerable , configurable 未定義，預設皆為 false
+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
+  }
+});
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>此 polyfill 涵蓋了主要的使用情境：指定一個原型創建一個新的物件，第二個參數為選用。</p>
+
+<p>要注意的是在 ES5 的<code>Object.create</code>中， <code>[[Prototype]]</code> 可以為 <code>null</code>，但在ECMAScript 5 以前的版本，polyfill 會因為繼承限制( limitation inherent )而不支援此情形。</p>
+
+<pre><code>if (typeof Object.create !== "function") {
+    Object.create = function (proto, propertiesObject) {
+        if (!(proto === null || typeof proto === "object" || typeof proto === "function")) {
+            throw TypeError('Argument must be an object, or null');
+        }
+        var temp = new Object();
+        temp.__proto__ = proto;
+        if(typeof propertiesObject === "object")
+            Object.defineProperties(temp, propertiesObject);
+        return temp;
+    };
+}</code></pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile("11.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>John Resig's post on <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li>
+</ul>