JavaScript設(shè)計(jì)模式之原型模式的示例分析

小編給大家分享一下JavaScript設(shè)計(jì)模式之原型模式的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

JavaScript有什么特點(diǎn)

1、js屬于一種解釋性腳本語(yǔ)言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語(yǔ)言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語(yǔ)言安全性高，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語(yǔ)言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

具體如下：

從設(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ì)象無法響應(yīng)某個(gè)請(qǐng)求，它會(huì)把該請(qǐng)求委托給它自己的原型。

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

以上是“JavaScript設(shè)計(jì)模式之原型模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！