JavaScript如何自訂對象

自訂方法：1、直接透過「屬性名稱/值」來創建，語法「var 物件名稱={屬性名稱:屬性值};」；2、使用「var 物件名稱=new 建構函數名(args);」語句；3、使用「Object.create(原型物件,descriptors)」語句。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

在Js中，除了Array、Date、Number等內建物件外，開發者可以透過Js程式碼建立自己的物件。

物件特性

① 結構類似'字典' ：物件的屬性類似鍵/值對；屬性的名稱為字串，屬性的值為任意類型。

② 原型繼承：Js的物件可繼承原型的屬性。

③ 動態結構：可動態新增、刪除物件的屬性。

④ 引用型別：js中的物件為引用型別。 a為一個對象，b=a，修改b也會造成a的修改。

建立物件方式

Js中建立自訂對象，主要透過三種方式：物件直接量、new 建構子、Object.create()方法。 每一種創建方式繼承的原型物件都不同：

① 物件直接量：原型為Object.prototype。

② new 建構子：原型為建構子的prototype屬性。

③ Object.create()：原型為傳入的第一個參數，若第一個參數為null，則以Object.prototype為原型。

1、物件直接量

#說明：直接透過 屬性名稱/值來建立。

語法：var o = { name:'tom', age:22 };

原型：Object .prototype 

適用場景：應用在某一特定的作用域裡。

範例：

var o = {
    name: 'tom'
}
console.log(o.constructor.prototype); // => Object() ：对象直接量的原型为Object
console.log(o.constructor.prototype === Object.prototype); // true

2、new 建構子

說明：建構函數也是種函數，但為了區分平常所用的函數，建構函數的函數名稱採用大駱駝峰寫法(首字母大寫)。

語法：var o = new ClassName();

#原型：建構子的prototype屬性。

範例：

// 1.创建构造函数
function People(name) {
    this.name;
}

var p = new People('Tom');
console.log(p.constructor.prototype); // => People{} ：原型为构造函数的prototype
console.log(p.constructor.prototype === People.prototype); // => true

// 2.自定义对象的多层继承 ：constructor返回最先调用的构造函数 
function Student(age) {
    this.age = age;
}
Student.prototype = new People(); // 设置Student的原型为People对象

var s = new Student(22); // 对象初始化时，先调用People()，再调用Student()
console.log(s.constructor); // => function People ：对象s返回的构造函数为People
console.log(s.constructor.prototype); // => People{} ：原型对象为People
console.log(s.constructor.prototype === People.prototype); // => true

3、Object.create(prototype, propertyDescriptor) ：ECMAScript 5規格

#說明：建立並傳回一個指定原型和指定屬性的物件。

語法：Object.create(prototype, propertyDescriptor)

參數：

①prototype {prototype} ：建立物件的原型，可以為null。若為null，物件的原型為undefined。

②propertyDescriptor {propertyDescriptor} 可選：屬性描述符。

原型：默然原型型為①參；若①參為null，物件的原型為undefined。

範例：

// 1.建立一个原型为null的对象
var o = Object.create(null, {
    name: {
        value: 'tom'
    }
});
console.log(o.constructor); // => undefined 

// 2.创建一个原型为Array的对象
var array = Object.create(Array.prototype, {});
console.log(array.constructor); // => function Array 构造函数 
console.log(array.constructor.prototype); // => [] ：原型对象为数组

// 3.创建一个原型为自定义类的对象
function People() { }
var p = Object.create(People.prototype, {});
console.log(p.constructor); // => function People 构造函数 
console.log(p.constructor.prototype); // => People{} ：原型对象People

【相關推薦：javascript學習教學】

以上是JavaScript如何自訂對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！