JavaScript設計模式之原型模式分析【ES5與ES6】

本文實例講述了JavaScript設計模式之原型模式。分享給大家供大家參考，具體如下：

從設計模式的角度講，原型模式是用于創建對象的一種模式，若需要創建一個對象，一種方法是先指定其類型，然后通過類來創建這個對象，另一種方法是通過原型來創建，不必關心對象的具體類型，而是找到一個對象，然后通過克隆來創建一個一模一樣的對象。

ES5提供了Object.create(obj)方法來克隆對象，在不支持Object.create(obj)方法的瀏覽器中，可以使用以下代碼：

Object.create = Object.create || function(obj) {
 function Func() {};
 Func.prototype = obj;
 return new Func();
}

一、JavaScript中的原型繼承：

1. 大部分的數據都是對象；

JavaScript有兩種類型機制：基本類型和對象類型。基本類型包括undefined、number、boolean、string、function、object。

JavaScript設計者的本意在于，除了undefined，一切都應該是對象，為了實現這一目標，number、boolean、string這幾種基本數據類型通過對應的包裝類Number、Boolean、String來變成對象類型數據。

JavaScript中的根對象是Object.prototype對象，Object.prototype對象是一個空的對象。JavaScript的每個對象，實際上都是從Object.prototype對象克隆而來的，Object.prototype對象就是它們的原型。

ES5提供了getPrototypeOf來查看對象的原型，Object.getPrototypeOf(任何對象) == Object.prototype都會返回true。

2. 要得到一個對象，不是通過實例化類，而是找到一個對象作為原型并克隆它；

JavaScript沒有類的概念，new運算符后面的不是類，而是構造器。當使用new運算符來創建對象時，實際上也是先克隆Object.prototype對象，再進行一些額外操作的過程。

3. 對象會記住它的原型；

其實不能說對象有原型，而只能說對象的構造器有原型。JavaScript給對象提供了一個名為__proto__屬性，默認指向它的構造器的原型，__proto__屬性是對象與構造器的原型聯系起來的紐帶，如：person.__proto__ == Person.prototype。

4. 若對象無法響應某個請求，它會把該請求委托給它自己的原型。

這是原型繼承的精髓，當一個對象無法響應某個請求時，會順著原型鏈把請求傳遞下去，直到遇到一個可以處理該請求的對象為止。但是，原型鏈并不是無限長的，只會查找到Object.prototype對象為止，由于Object.prototype的原型是null，因此請求無法找到可以處理的對象，返回undefined。

二、原型繼承的未來

使用Object.create來實現原型繼承似乎更能體現原型模式的精髓，但是，通過Object.create創建對象的效率并不高，通常要比通過構造函數創建對象慢。

ES6帶來了新的Class語法，這讓JavaScript看起來像是一門基于類的語言，但背后仍然是通過原型機制來創建對象。

class Person {
 constuctor(name) {
 this.name = name;
 }
 getName() {
 return this.name;
 }
}
class Student extends Person {
 constuctor(name) {
 super(name);
 }
 sayHello() {
 alert(“Hello”);
 }
}
var student = new Student(“Alice”);
student.sayHello();

更多關于JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com