JavaScript中的類與實例實現方法

2024-05-06 16:15:08

字體：大中小

來源：轉載

供稿：網友

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

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

JavaScript 中沒有父類, 子類的概念, 也沒有class 和 instance 的概念, 全靠 prototype chain來實現繼承. 當查找一個對象的屬性時, JavaScript 會向上遍歷 prototype chain, 直到找到對應的屬性為止. 有幾種方法, 可以使得 JavaScript 模擬出 class 和 instance 的概念.

1. 直接使用構造函數來創建對象, 在構造函數內部使用 this指代對象實例.

復制代碼代碼如下:

		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

再看另外一個例子:

復制代碼代碼如下:

		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

以上, 先指定好一個構造函數對象的 prototype 屬性. 然后 new 一個該對象實例, 即可調用 prototype 中指定的方法.

2. 使用 Object.create()方法來創建對象

復制代碼代碼如下:

		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

該方法, 比構造函數的方法更簡便, 但不能實現私有屬性和私有方法, 且實例對象之間不能共享數據, 對 class 的模擬仍不夠全面.

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

復制代碼代碼如下:

		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, 僅需要自定義一個構造函數init. 繼承的實現也很簡單.

復制代碼代碼如下:

		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

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

復制代碼代碼如下:

		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 私有屬性只能通過對象自身的方法來讀取.  
		 animal.sound; // undefined 私有屬性只能通過對象自身的方法來讀取  
		 animal4.makeSound();  
		private animal sound

只要不是定義在animal對象上的屬性和方法都是私有的, 外界不能訪問.
類與實例之間, 可以做到數據共享.

復制代碼代碼如下:

		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; // 實例對象不能訪問類屬性  
		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