在Js中,除了Array、Date、Number等內置對象外,開發者可以通過Js代碼創建自己的對象。
目錄
1. 對象特性:描述對象的特性
2. 創建對象方式:對象直接量、new 構造函數、Object.create() 等三種方式
3. 序列化對象:序列化和反序列化對象
4. 面向對象編程:描述自定義對象的面向對象模擬;包含實例成員、靜態成員等等
5. 繼承:描述對象的繼承特性。
1. 對象特性
① 結構類似'字典' :對象的屬性類似鍵/值對;屬性的名稱為字符串,屬性的值為任意類型。
② 原型繼承:Js的對象可繼承原型的屬性。
③ 動態結構:可動態新增、刪除對象的屬性。
④ 引用類型:js中的對象為引用類型。a為一個對象,b=a,修改b也會造成a的修改。
2. 創建對象方式
Js中創建自定義對象,主要通過三種方式:對象直接量、new 構造函數以及Object.create()方法。每一種創建方式繼承的原型對象都不同:
① 對象直接量:原型為Object.prototype。
② new 構造函數:原型為構造函數的prototype屬性。
③ Object.create():原型為傳入的第一個參數,若第一個參數為null,以Object.prototype為原型。
2.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.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
2.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
3. 序列化
Js中通過調用JSON方法,可以將對象序列化成字符串,也可以將字符串反序列化成對象。
3.1 JSON.stringify(object) :序列化對象;把對象轉換成一個字符串。
參數:
①object {Object} :任意對象
返回值:
{string} 返回一個轉換后的字符串。
示例:
var o = {
x: 1,
y: 2
}
JSON.stringify(o); // => {"x":1,"y":2}:返回一個字符串
3.2 JSON.parse(jsonStr) :將一個Json字符串轉換為對象。
參數:
① jsonStr {JsonString} :一個Json字符串;字符串中的屬性名稱要用引號框起來
返回值:
{Object} 返回一個轉換后的對象
示例:
var str = '{ "x":1,"y":2 }'; // 字符串的屬性名要用引號框起來
var o = JSON.parse(str);
console.log(o.x); // => 1:輸出對象屬性x的值
4. 面向對象編程
模擬高級語言的中的對象;描述高級對象中的實例成員、靜態成員、繼承等特性。
4.1 this關鍵字
說明:在創建對象的構造函數、方法成員中,this指向為實例對象本身。
示例:
var o = {
x: 1,
y: 2,
sayHello: function () {
console.log(this.x); // => 1:讀取實例對象屬性x的值
console.log(x); // => 報錯:讀取的是變量x
}
};
o.sayHello();
4.2 實例成員
語法:實例對象.屬性名稱 或者 實例對象[屬性名稱]
有以下幾種添加方式:
① 在創建對象的方式中(構造函數、對象直接量等),對this進行添加成員操作。
② 對類名的原型對象添加成員。
③ 對實例對象添加成員(只影響添加的實例,其他實例不會有此成員)。
示例:
// 1.在創建對象方式中,對this進行操作
function People(name) {
this.name = name;
}
var p = new People('tom');
console.log(p.name); // => tom :讀取實例屬性name的值
// 2.在類的原型對象中進行擴展操作
People.prototype.sayHello = function () {
alert('Hello:' + this.name);
}
p.sayHello(); // => 彈出 Hello:tom
4.3 靜態成員
說明:通過類名直接調用
語法:類名.屬性名稱
添加方式:直接在類名上添加成員。
示例:
function People(name) {
this.name = name;
}
// 給類添加一個靜態成員hasName:判斷People實例是否含有name屬性
People.hasName = function (p) {
if (p.name && p.name.length > 0) {
return true;
}
return false;
}
var p = new People('tom');
People.hasName(p); // => true
5. 繼承
js通過對原型的操作,可以模擬高級語言對象中的繼承特性。
5.1 單層繼承
說明:對類的原型對象(className.prototype)添加成員后,此類的所有實例對象都會增加此成員。

示例:
function People(name) {
this.name = name;
}
var p1 = new People('張三');
var p2 = new People('李四');
// p1.sayName(); // 報錯,實例沒有此成員
// 對原型對象添加成員, 類的所有實例都會添加此成員
People.prototype.sayName = function () {
alert(this.name);
}
p1.sayName(); // 彈出name屬性的值
p2.sayName(); // 彈出name屬性的值
5.2 多層繼承
說明:
若類的原型對象(className.prototype)指向為某個對象后,此類將會繼承對象的所有實例成員,但不會繼承對象的靜態成員。

示例:
function People(name) {
this.name = name;
this.sayName = function () {
alert(this.name);
}
}
function Student(age) {
this.age = age;
}
Student.prototype = new People(); // 設定Student的原型對象為Prople實例對象
var st = new Student(22);
st.name = '張三';
st.sayName(); // => alert('張三') :sayName成員繼承自People類
