原文:JavaScript 自定義對象

　　在Js中，除了Array、Date、Number等內(nèi)置對象外，開發(fā)者可以通過Js代碼創(chuàng)建自己的對象。

目錄

1. 對象特性：描述對象的特性

2. 創(chuàng)建對象方式：對象直接量、new 構(gòu)造函數(shù)、Object.create() 等三種方式

3. 序列化對象：序列化和反序列化對象

4. 面向?qū)ο缶幊?#xff1a;描述自定義對象的面向?qū)ο竽M；包含實(shí)例成員、靜態(tài)成員等等

5. 繼承：描述對象的繼承特性。

?

1.?對象特性

① 結(jié)構(gòu)類似'字典' ：對象的屬性類似鍵/值對；屬性的名稱為字符串，屬性的值為任意類型。

② 原型繼承：Js的對象可繼承原型的屬性。

③ 動態(tài)結(jié)構(gòu)：可動態(tài)新增、刪除對象的屬性。

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

?

2. 創(chuàng)建對象方式

Js中創(chuàng)建自定義對象，主要通過三種方式：對象直接量、new 構(gòu)造函數(shù)以及Object.create()方法。每一種創(chuàng)建方式繼承的原型對象都不同：

① 對象直接量：原型為Object.prototype。

② new?構(gòu)造函數(shù)：原型為構(gòu)造函數(shù)的prototype屬性。

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

2.1 對象直接量

說明：直接通過 屬性名/值來創(chuàng)建。

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

原型：Object.prototype?

適用場景：應(yīng)用在某一特定的作用域里。

示例：

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

??

2.2 new 構(gòu)造函數(shù)

說明：構(gòu)造函數(shù)也是種函數(shù)，但為了區(qū)分平常所用的函數(shù)，構(gòu)造函數(shù)的函數(shù)名采用大駱駝峰寫法(首字母大寫)。

語法：var o = new ClassName();

原型：構(gòu)造函數(shù)的prototype屬性。

示例：

// 1.創(chuàng)建構(gòu)造函數(shù) function People(name) {this.name; }var p = new People('Tom'); console.log(p.constructor.prototype); // => People{} ：原型為構(gòu)造函數(shù)的prototype console.log(p.constructor.prototype === People.prototype); // => true// 2.自定義對象的多層繼承 ：constructor返回最先調(diào)用的構(gòu)造函數(shù) function Student(age) {this.age = age; } Student.prototype = new People(); // 設(shè)置Student的原型為People對象var s = new Student(22); // 對象初始化時，先調(diào)用People()，再調(diào)用Student() console.log(s.constructor); // => function People ：對象s返回的構(gòu)造函數(shù)為People console.log(s.constructor.prototype); // => People{} ：原型對象為People console.log(s.constructor.prototype === People.prototype); // => true

?

2.3 Object.create(prototype,?propertyDescriptor) ：ECMAScript 5規(guī)范

說明：創(chuàng)建并返回一個指定原型和指定屬性的對象。

語法：Object.create(prototype, propertyDescriptor)

參數(shù)：

①prototype {prototype} ：創(chuàng)建對象的原型，可以為null。若為null，對象的原型為undefined。

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

原型：默然原型型為①參；若①參為null，對象的原型為undefined。

示例：

// 1.建立一個原型為null的對象 var o = Object.create(null, {name: {value: 'tom'} }); console.log(o.constructor); // => undefined // 2.創(chuàng)建一個原型為Array的對象 var array = Object.create(Array.prototype, {}); console.log(array.constructor); // => function Array 構(gòu)造函數(shù) console.log(array.constructor.prototype); // => [] ：原型對象為數(shù)組// 3.創(chuàng)建一個原型為自定義類的對象 function People() { } var p = Object.create(People.prototype, {}); console.log(p.constructor); // => function People 構(gòu)造函數(shù) console.log(p.constructor.prototype); // => People{} ：原型對象People

?

3. 序列化

　　Js中通過調(diào)用JSON方法，可以將對象序列化成字符串，也可以將字符串反序列化成對象。

3.1 JSON.stringify(object) ：序列化對象；把對象轉(zhuǎn)換成一個字符串。

參數(shù)：

①object {Object} ：任意對象

返回值：

{string} 返回一個轉(zhuǎn)換后的字符串。

示例：

var o = {x: 1,y: 2 }JSON.stringify(o); // => {"x":1,"y":2}：返回一個字符串

?

3.2 JSON.parse(jsonStr) ：將一個Json字符串轉(zhuǎn)換為對象。

參數(shù)：

① jsonStr {JsonString} ：一個Json字符串；字符串中的屬性名稱要用引號框起來

返回值：

{Object} 返回一個轉(zhuǎn)換后的對象

示例：

var str = '{ "x":1,"y":2 }'; // 字符串的屬性名要用引號框起來 var o = JSON.parse(str); console.log(o.x); // => 1：輸出對象屬性x的值

?

4. 面向?qū)ο缶幊?/h1>

　　模擬高級語言的中的對象；描述高級對象中的實(shí)例成員、靜態(tài)成員、繼承等特性。

4.1 this關(guān)鍵字

說明：在創(chuàng)建對象的構(gòu)造函數(shù)、方法成員中，this指向?yàn)閷?shí)例對象本身。

示例：

var o = {x: 1,y: 2,sayHello: function () {console.log(this.x); // => 1：讀取實(shí)例對象屬性x的值console.log(x); // => 報錯：讀取的是變量x} }; o.sayHello();

?

4.2 實(shí)例成員

語法：實(shí)例對象.屬性名稱 或者 實(shí)例對象[屬性名稱]

有以下幾種添加方式：

① 在創(chuàng)建對象的方式中(構(gòu)造函數(shù)、對象直接量等)，對this進(jìn)行添加成員操作。

② 對類名的原型對象添加成員。

③ 對實(shí)例對象添加成員(只影響添加的實(shí)例，其他實(shí)例不會有此成員)。

示例：

// 1.在創(chuàng)建對象方式中，對this進(jìn)行操作 function People(name) {this.name = name; } var p = new People('tom'); console.log(p.name); // => tom ：讀取實(shí)例屬性name的值// 2.在類的原型對象中進(jìn)行擴(kuò)展操作 People.prototype.sayHello = function () {alert('Hello:' + this.name); } p.sayHello(); // => 彈出 Hello:tom

?

4.3 靜態(tài)成員

說明：通過類名直接調(diào)用

語法：類名.屬性名稱

添加方式：直接在類名上添加成員。

示例：

function People(name) {this.name = name; } // 給類添加一個靜態(tài)成員hasName：判斷People實(shí)例是否含有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)添加成員后，此類的所有實(shí)例對象都會增加此成員。

示例：

function People(name) {this.name = name; } var p1 = new People('張三'); var p2 = new People('李四');// p1.sayName(); // 報錯，實(shí)例沒有此成員// 對原型對象添加成員， 類的所有實(shí)例都會添加此成員 People.prototype.sayName = function () {alert(this.name); }p1.sayName(); // 彈出name屬性的值 p2.sayName(); // 彈出name屬性的值

?

5.2 多層繼承

說明：

若類的原型對象(className.prototype)指向?yàn)槟硞€對象后，此類將會繼承對象的所有實(shí)例成員，但不會繼承對象的靜態(tài)成員。

示例：

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

　　

?

==================================系列文章==========================================

本篇文章：3.8?JavaScript 自定義對象

Web開發(fā)之路系列文章

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的JavaScript 自定义对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。