快捷導(dǎo)航

JavaScript設(shè)計(jì)模式之原型模式分析【ES5與ES6】

更新時(shí)間：2018年07月26日 10:07:30 作者：筱葭

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之原型模式,簡(jiǎn)單描述了原型模式的概念、原理,并結(jié)合實(shí)例形式分析了ES5與ES6實(shí)現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下

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

從設(shè)計(jì)模式的角度講，原型模式是用于創(chuàng)建對(duì)象的一種模式，若需要?jiǎng)?chuàng)建一個(gè)對(duì)象，一種方法是先指定其類型，然后通過類來創(chuàng)建這個(gè)對(duì)象，另一種方法是通過原型來創(chuàng)建，不必關(guān)心對(duì)象的具體類型，而是找到一個(gè)對(duì)象，然后通過克隆來創(chuàng)建一個(gè)一模一樣的對(duì)象。

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

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

一、JavaScript中的原型繼承：

1. 大部分的數(shù)據(jù)都是對(duì)象；

JavaScript有兩種類型機(jī)制：基本類型和對(duì)象類型?；绢愋桶?code>undefined、number、boolean、string、function、object。

JavaScript設(shè)計(jì)者的本意在于，除了undefined，一切都應(yīng)該是對(duì)象，為了實(shí)現(xiàn)這一目標(biāo)，number、boolean、string這幾種基本數(shù)據(jù)類型通過對(duì)應(yīng)的包裝類Number、Boolean、String來變成對(duì)象類型數(shù)據(jù)。

JavaScript中的根對(duì)象是Object.prototype對(duì)象，Object.prototype對(duì)象是一個(gè)空的對(duì)象。JavaScript的每個(gè)對(duì)象，實(shí)際上都是從Object.prototype對(duì)象克隆而來的，Object.prototype對(duì)象就是它們的原型。

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

2. 要得到一個(gè)對(duì)象，不是通過實(shí)例化類，而是找到一個(gè)對(duì)象作為原型并克隆它；

JavaScript沒有類的概念，new運(yùn)算符后面的不是類，而是構(gòu)造器。當(dāng)使用new運(yùn)算符來創(chuàng)建對(duì)象時(shí)，實(shí)際上也是先克隆Object.prototype對(duì)象，再進(jìn)行一些額外操作的過程。

3. 對(duì)象會(huì)記住它的原型；

其實(shí)不能說對(duì)象有原型，而只能說對(duì)象的構(gòu)造器有原型。JavaScript給對(duì)象提供了一個(gè)名為__proto__屬性，默認(rèn)指向它的構(gòu)造器的原型，__proto__屬性是對(duì)象與構(gòu)造器的原型聯(lián)系起來的紐帶，如：person.__proto__ == Person.prototype。

4. 若對(duì)象無(wú)法響應(yīng)某個(gè)請(qǐng)求，它會(huì)把該請(qǐng)求委托給它自己的原型。

這是原型繼承的精髓，當(dāng)一個(gè)對(duì)象無(wú)法響應(yīng)某個(gè)請(qǐng)求時(shí)，會(huì)順著原型鏈把請(qǐng)求傳遞下去，直到遇到一個(gè)可以處理該請(qǐng)求的對(duì)象為止。但是，原型鏈并不是無(wú)限長(zhǎng)的，只會(huì)查找到Object.prototype對(duì)象為止，由于Object.prototype的原型是null，因此請(qǐng)求無(wú)法找到可以處理的對(duì)象，返回undefined。

二、原型繼承的未來

使用Object.create來實(shí)現(xiàn)原型繼承似乎更能體現(xiàn)原型模式的精髓，但是，通過Object.create創(chuàng)建對(duì)象的效率并不高，通常要比通過構(gòu)造函數(shù)創(chuàng)建對(duì)象慢。

ES6帶來了新的Class語(yǔ)法，這讓JavaScript看起來像是一門基于類的語(yǔ)言，但背后仍然是通過原型機(jī)制來創(chuàng)建對(duì)象。

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();

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: