JavaScript 建立和淺析自定義對象

本文轉載於：http://www.javashuo.com/article/p-wjojwsqo-y.html

在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 

適用場景：應用在某一特定的做用域裏。

示例：

1 2 3 4 5

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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 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} 返回一個轉換後的字符串。

示例：

1 2 3 4 5 6

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

 

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

參數：

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

返回值：

{Object} 返回一個轉換後的對象

示例：

1 2 3

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

 

4. 面向對象編程

　　模擬高級語言的中的對象；描述高級對象中的實例成員、靜態成員、繼承等特性。

4.1 this關鍵字

說明：在建立對象的構造函數、方法成員中，this指向爲實例對象自己。

示例：

1 2 3 4 5 6 7 8 9

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

 

4.2 實例成員

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

有如下幾種添加方式：

① 在建立對象的方式中(構造函數、對象直接量等)，對this進行添加成員操做。

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

③ 對實例對象添加成員(隻影響添加的實例，其餘實例不會有此成員)。

示例：

1 2 3 4 5 6 7 8 9 10 11 12

// 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 靜態成員

說明：經過類名直接調用

語法：類名.屬性名稱

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

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13

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)添加成員後，此類的全部實例對象都會增長此成員。

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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)指向爲某個對象後，此類將會繼承對象的全部實例成員，但不會繼承對象的靜態成員。

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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類

　　

 

End