JavaScript的所有數(shù)據(jù)都可以看成對象，那是不是我們已經(jīng)在使用面向對象編程了呢？

當然不是。如果我們只使用Number、Array、string以及基本的{...}定義的對象，還無法發(fā)揮出面向對象編程的威力。

JavaScript的面向對象編程和大多數(shù)其他語言如Java、C#的面向對象編程都不太一樣。如果你熟悉Java或C#，很好，你一定明白面向對象的兩個基本概念：

1.類：類是對象的類型模板，例如，定義Student類來表示學生，類本身是一種類型，Student表示學生類型，但不表示任何具體的某個學生；

2.實例：實例是根據(jù)類創(chuàng)建的對象，例如，根據(jù)Student類可以創(chuàng)建出xiaoming、xiaohong、xiaojun等多個實例，每個實例表示一個具體的學生，他們?nèi)紝儆赟tudent類型。

所以，類和實例是大多數(shù)面向對象編程語言的基本概念。

不過，在JavaScript中，這個概念需要改一改。JavaScript不區(qū)分類和實例的概念，而是通過原型（prototype）來實現(xiàn)面向對象編程。

原型是指當我們想要創(chuàng)建xiaoming這個具體的學生時，我們并沒有一個Student類型可用。那怎么辦？恰好有這么一個現(xiàn)成的對象：

var robot = {
 name: 'Robot',
 height: 1.6,
 run: function () {
  console.log(this.name + ' is running...');
 }
};

我們看這個robot對象有名字，有身高，還會跑，有點像小明，干脆就根據(jù)它來“創(chuàng)建”小明得了！

于是我們把它改名為Student，然后創(chuàng)建出xiaoming：

var Student = {
 name: 'Robot',
 height: 1.2,
 run: function () {
  console.log(this.name + ' is running...');
 }
};
var xiaoming = {
 name: '小明'
};
xiaoming.__proto__ = Student;

注意最后一行代碼把xiaoming的原型指向了對象Student，看上去xiaoming仿佛是從Student繼承下來的：

xiaoming.name; // '小明'
xiaoming.run(); // 小明 is running...

xiaoming有自己的name屬性，但并沒有定義run()方法。不過，由于小明是從Student繼承而來，只要Student有run()方法，xiaoming也可以調(diào)用：

JavaScript的原型鏈和Java的Class區(qū)別就在，它沒有“Class”的概念，所有對象都是實例，所謂繼承關系不過是把一個對象的原型指向另一個對象而已。

如果你把xiaoming的原型指向其他對象：

var Bird = {
 fly: function () {
  console.log(this.name + ' is flying...');
 }
};
xiaoming.__proto__ = Bird;

現(xiàn)在xiaoming已經(jīng)無法run()了，他已經(jīng)變成了一只鳥：

xiaoming.fly(); // 小明 is flying...

在JavaScrip代碼運行時期，你可以把xiaoming從Student變成Bird，或者變成任何對象。

請注意，上述代碼僅用于演示目的。在編寫JavaScript代碼時，不要直接用obj.__proto__去改變一個對象的原型，并且，低版本的IE也無法使用__proto__。Object.create()方法可以傳入一個原型對象，并創(chuàng)建一個基于該原型的新對象，但是新對象什么屬性都沒有，因此，我們可以編寫一個函數(shù)來創(chuàng)建xiaoming：

// 原型對象:
var Student = {
 name: 'Robot',
 height: 1.2,
 run: function () {
  console.log(this.name + ' is running...');
 }
};
function createStudent(name) {
 // 基于Student原型創(chuàng)建一個新對象:
 var s = Object.create(Student);
 // 初始化新對象:
 s.name = name;
 return s;
}
var xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true

最新評論