快捷導(dǎo)航

JavaScript中的類與實(shí)例實(shí)現(xiàn)方法

更新時(shí)間：2015年01月23日 09:48:46 投稿：shichen2014

這篇文章主要介紹了JavaScript中的類與實(shí)例實(shí)現(xiàn)方法,非常巧妙的模擬了類與實(shí)例的實(shí)現(xiàn)過(guò)程,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript中的類與實(shí)例實(shí)現(xiàn)方法。分享給大家供大家參考。具體如下：

JavaScript 中沒(méi)有父類, 子類的概念, 也沒(méi)有class 和 instance 的概念, 全靠 prototype chain來(lái)實(shí)現(xiàn)繼承. 當(dāng)查找一個(gè)對(duì)象的屬性時(shí), JavaScript 會(huì)向上遍歷 prototype chain, 直到找到對(duì)應(yīng)的屬性為止. 有幾種方法, 可以使得 JavaScript 模擬出 class 和 instance 的概念.

1. 直接使用構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象, 在構(gòu)造函數(shù)內(nèi)部使用 this指代對(duì)象實(shí)例.

復(fù)制代碼代碼如下:

function Animal() {  

 this.name = "animal";  

 }  

 Animal.prototype.makeSound = function() {  

 console.log("animal sound");  

 }  

[Function]  

 var animal1 = new Animal();  

 animal1.name;  

'animal'  

 animal1.makeSound();  

animal sound

再看另外一個(gè)例子:

復(fù)制代碼代碼如下:

function Point(x, y) {  

 this.x = x;  

 this.y = y;  

 }  

 Point.prototype = {  

 method1: function() { console.log("method1"); },  

 method2: function() { console.log("method2"); },  

 }  

{ method1: [Function], method2: [Function] }  

 var point1 = new Point(10, 20);  

 point1.method1();  

method1  

 point1.method2();  

method2

以上, 先指定好一個(gè)構(gòu)造函數(shù)對(duì)象的 prototype 屬性. 然后 new 一個(gè)該對(duì)象實(shí)例, 即可調(diào)用 prototype 中指定的方法.

2. 使用 Object.create()方法來(lái)創(chuàng)建對(duì)象

復(fù)制代碼代碼如下:

var Animal = {  

 name: "animal",  

 makeSound: function() { console.log("animal sound"); },  

 }  

 var animal2 = Object.create(Animal);  

 animal2.name;  

'animal'  

 console.log(animal2.name);  

animal  

 animal2.makeSound();  

animal sound

該方法, 比構(gòu)造函數(shù)的方法更簡(jiǎn)便, 但不能實(shí)現(xiàn)私有屬性和私有方法, 且實(shí)例對(duì)象之間不能共享數(shù)據(jù), 對(duì) class 的模擬仍不夠全面.

3. 荷蘭程序員 Gabor de Mooij 提出的極簡(jiǎn)主義法(minimalist approach). 推薦用法.

復(fù)制代碼代碼如下:

 var Animal = {  

 init: function() {  

 var animal = {};  

 animal.name = "animal";  

 animal.makeSound = function() { console.log("animal sound"); };  

 return animal;  

 }  

 };  

 var animal3 = Animal.init();  

 animal3.name;  

'animal'  

 animal3.makeSound();  

animal sound

不使用 prototype 和 this, 僅需要自定義一個(gè)構(gòu)造函數(shù)init. 繼承的實(shí)現(xiàn)也很簡(jiǎn)單.

復(fù)制代碼代碼如下:

var Cat = {  

 init: function() {  

 var cat = Animal.init();  

 cat.name2 = "cat";  

 cat.makeSound = function() { console.log("cat sound"); };  

 cat.sleep = function() { console.log("cat sleep"); };  

 return cat;  

 }  

 }  

 var cat = Cat.init();  

 cat.name; // 'animal'  

 cat.name2; // 'cat'  

 cat.makeSound(); // 類似于方法的重載  

cat sound  

 cat.sleep();  

cat sleep

私有屬性和私有方法的使用:

復(fù)制代碼代碼如下:

var Animal = {  

 init: function() {  

 var animal = {};  

 var sound = "private animal sound"; // 私有屬性  

 animal.makeSound = function() { console.log(sound); };  

 return animal;  

 }  

 };  

 var animal4 = Animal.init();  

 Animal.sound; // undefined 私有屬性只能通過(guò)對(duì)象自身的方法來(lái)讀取.  

 animal.sound; // undefined 私有屬性只能通過(guò)對(duì)象自身的方法來(lái)讀取  

 animal4.makeSound();  

private animal sound

只要不是定義在animal對(duì)象上的屬性和方法都是私有的, 外界不能訪問(wèn).
類與實(shí)例之間, 可以做到數(shù)據(jù)共享.

復(fù)制代碼代碼如下:

var Animal = {  

 sound: "common animal sound",  

 init: function() {  

 var animal = {};  

 animal.commonSound = function() { console.log(Animal.sound); };  

 animal.changeSound = function() { Animal.sound = "common animal sound changed"; };  

 return animal;  

 }  

 }  

 var animal5 = Animal.init();  

 var animal6 = Animal.init();  

 Animal.sound; // 可以視為類屬性  

'common animal sound'  

 animal5.sound; // 實(shí)例對(duì)象不能訪問(wèn)類屬性  

undefined  

 animal6.sound;  

undefined  

 animal5.commonSound();  

common animal sound  

 animal6.commonSound();  

common animal sound  

 animal5.changeSound(); // 修改類屬性  

undefined  

 Animal.sound;  

'common animal sound'  

 animal5.commonSound();  

common animal sound  

 animal6.commonSound();  

common animal sound

如 Animal.sound 就是類與實(shí)例的共有屬性, 可以視為類屬性和類方法.
若一個(gè)實(shí)例修改了該共有屬性, 則該類和其他實(shí)例的共有屬性也對(duì)應(yīng)修改了.
綜上, 就是 JavaScript 中模擬的 class 和 instance 的概念和用法.

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: