這篇文章主要介紹了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
如Animal.sound 就是類別與實例的共同屬性, 可以視為類別屬性和類別方法.
若一個實例修改了該共有屬性,則該類別和其他實例的共有屬性也對應修改了.
綜上, 就是JavaScript 中模擬的class 和instance 的概念和用法,希望本文所述對大家的javascript程式設計有所幫助,更多相關教學請上JavaScript影片教學!