JavaScript 中的"類"與"實(shí)例"
來(lái)源：程序員人生 發(fā)布時(shí)間：2015-01-24 08:53:27 閱讀次數(shù)：3647次
JavaScript 中沒(méi)有父類, 子類的概念, 也沒(méi)有class 和 instance 的概念, 全靠 prototype chain來(lái)實(shí)現(xiàn)繼承. 當(dāng)查找1個(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í)例.
> 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
再看另外1個(gè)例子:
> 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
以上, 先指定好1個(gè)構(gòu)造函數(shù)對(duì)象的 prototype 屬性. 然后 new 1個(gè)該對(duì)象實(shí)例, 便可調(diào)用 prototype 中指定的方法.
2, 使用 Object.create()方法來(lái)創(chuàng)建對(duì)象
> 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). 推薦用法.
> 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, 僅需要自定義1個(gè)構(gòu)造函數(shù)init. 繼承的實(shí)現(xiàn)也很簡(jiǎn)單.
> 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 私有屬性只能通過(guò)對(duì)象本身的方法來(lái)讀取.
> animal.sound; // undefined 私有屬性只能通過(guò)對(duì)象本身的方法來(lái)讀取
> animal4.makeSound();
private animal sound
只要不是定義在animal對(duì)象上的屬性和方法都是私有的, 外界不能訪問(wèn).
類與實(shí)例之間, 可以做到數(shù)據(jù)同享.
> 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í)例的共有屬性, 可以視為類屬性和類方法.
若1個(gè)實(shí)例修改了該共有屬性, 則該類和其他實(shí)例的共有屬性也對(duì)應(yīng)修改了.
綜上, 就是 JavaScript 中摹擬的 class 和 instance 的概念和用法.
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
