成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

原型模式

ad6623 / 1152人閱讀

摘要：原型模式與基于原型繼承的對(duì)象系統(tǒng)原型模式不單是一種設(shè)計(jì)模式，也被稱(chēng)為一種編程范型。寫(xiě)一個(gè)函數(shù)實(shí)現(xiàn)的功能獲取構(gòu)造器，也就是創(chuàng)建一個(gè)新對(duì)象，并將原型指向構(gòu)造器的原型。

原型模式與基于原型繼承的 JavaScript 對(duì)象系統(tǒng)

原型模式不單是一種設(shè)計(jì)模式，也被稱(chēng)為一種編程范型。原型模式又一個(gè)重要的特性就是，當(dāng)對(duì)象無(wú)法響應(yīng)某個(gè)請(qǐng)求時(shí)，就會(huì)把該請(qǐng)求委托給它的原型。

使用克隆的原型模式

從設(shè)計(jì)模式的角度講，原型模式是用于創(chuàng)建對(duì)象的一種模式，如果我們想要?jiǎng)?chuàng)建一個(gè)對(duì)象，一種方法是先指定它的類(lèi)型，然后通過(guò)類(lèi)來(lái)創(chuàng)建這個(gè)對(duì)象。原型模式選擇了另一種方式，不再關(guān)心對(duì)象的類(lèi)型，而是找到一個(gè)對(duì)象，然后通過(guò)克隆來(lái)創(chuàng)建一個(gè)一摸一樣的對(duì)象。
但原型模式的真正目的并非在于需要得到一個(gè)一摸一樣的對(duì)象，而是提供一種便捷的方式去創(chuàng)建某個(gè)類(lèi)型的對(duì)象，克隆只是創(chuàng)建這個(gè)對(duì)象的過(guò)程和手段。

Object.create

ECMAScript 5 提供了Object.create來(lái)克隆一個(gè)對(duì)象，嚴(yán)格來(lái)說(shuō)是創(chuàng)建一個(gè)新對(duì)象，使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建的對(duì)象的__proto__。

const Coder = function() {
  this.name = "Ashin";
  this.age = 18;
  this.gender = "male";
};

const cloneCoder = Object.create(Coder);

console.log(cloneCoder);
console.log(cloneCoder.name);
console.log(cloneCoder.age);
console.log(cloneCoder.gender);

手動(dòng)實(shí)現(xiàn) Object.create:

const objCreate = function(obj) {
  const F = function() {};
  F.prototype = obj;
  return new F();
};

const cloneCoder = objCreate(Coder);

console.log(cloneCoder);
console.log(cloneCoder.name);
console.log(cloneCoder.age);
console.log(cloneCoder.gender);

Object.prototype

事實(shí)上，JavaScript 中的根對(duì)象是 Object.prototype 對(duì)象，它是一個(gè)空對(duì)象。我們?cè)?JavaScript 遇到的每個(gè)對(duì)象，都是從 Object.prototype 對(duì)象克隆而來(lái)的， Object.prototype 對(duì)象就是它們的原型。

const o1 = new Object();
const o2 = {};

// 用 ES5 提供的 Object.getPrototypeOf 來(lái)查看兩個(gè)對(duì)象的原型
console.log(Object.getPrototypeOf(o1) === Object.prototype); // true
console.log(Object.getPrototypeOf(o2) === Object.prototype); // true
new 運(yùn)算符

運(yùn)算符創(chuàng)建一個(gè)用戶(hù)定義的對(duì)象類(lèi)型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。new 關(guān)鍵字會(huì)進(jìn)行如下的操作：

創(chuàng)建一個(gè)空的簡(jiǎn)單 JavaScript 對(duì)象（即{}）；

鏈接該對(duì)象（即設(shè)置該對(duì)象的構(gòu)造函數(shù)）到另一個(gè)對(duì)象 ；

將步驟 1 新創(chuàng)建的對(duì)象作為 this 的上下文 ；

如果該函數(shù)沒(méi)有返回對(duì)象，則返回 this。

先看一段代碼：

function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
};

const p = new Person("Ashin");

console.log(p); // Person {name: "Ashin"}
console.log(p.name); // Ashin
console.log(p.getName()); // Ashin
console.log(Object.getPrototypeOf(p) === Person.prototype); // true

強(qiáng)調(diào)一下，在 JavaScript 中沒(méi)有類(lèi)的概念。這里的 Person 并不是類(lèi)，而是函數(shù)構(gòu)造器。當(dāng)使用 new 運(yùn)算符調(diào)用函數(shù)時(shí)，此時(shí)的函數(shù)就是一個(gè)構(gòu)造器。用 new 運(yùn)算符來(lái)創(chuàng)建對(duì)象的過(guò)程，是通過(guò)克隆 Object.prototype 來(lái)得到新的對(duì)象（但實(shí)際上并不是每次都真正地克隆了一個(gè)新的對(duì)象），再進(jìn)行一些其他的額外操作的過(guò)程。

寫(xiě)一個(gè)函數(shù)實(shí)現(xiàn) new 的功能：

const _new = function() {
  const Constructor = [].shift.call(arguments); // 獲取構(gòu)造器，也就是 Person
  const obj = Object.create(Constructor.prototype); // 創(chuàng)建一個(gè)新對(duì)象，并將原型(__proto__) 指向構(gòu)造器的原型 (Constructor.prototype)。
  const ret = Constructor.apply(obj, arguments); // 將新建的對(duì)象作為this的上下文執(zhí)行構(gòu)造器
  return typeof ret === "object" ? ret : obj; // 如果構(gòu)造器沒(méi)有返回對(duì)象則返回新建的對(duì)象
};

const p2 = _new(Person, "Ashin");

console.log(p2); // Person {name: "Ashin"}
console.log(p2.name); // Ashin
console.log(p2.getName()); // Ashin
console.log(Object.getPrototypeOf(p2) === Person.prototype); // true
（原型）繼承

先來(lái)看一段典型的“原型風(fēng)格”：

function Parent(name) {
    this.name = name;
}

Parent.prototype.showInfo = function() {
    console.log(this.name);
}


function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

// 注意!下面執(zhí)行后沒(méi)有 Bar.prototype.constructor 了 
// 如果你需要這個(gè)屬性的話(huà)可能需要手動(dòng)修復(fù)一下它
Child.prototype = Object.create(Parent.prototype);

// 多態(tài)
Child.prototype.showInfo = function() {
    Parent.prototype.showInfo.call(this);
    console.log(this.age);
}

Child.prototype.dance = function() {
    console.log(this.name + " dance");
}

var tom = new Child("Tom", 10);
tom.showInfo()
tom.dance()
console.log(tom)
參考

曾探. JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐 (圖靈原創(chuàng)) (Chinese Edition)
你不知道的JavaScript（上卷）
MDN Web 文檔

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106769.html

相關(guān)文章

  • 理解JavaScript的核心知識(shí)點(diǎn)：原型

    摘要：首先，需要來(lái)理清一些基礎(chǔ)的計(jì)算機(jī)編程概念編程哲學(xué)與設(shè)計(jì)模式計(jì)算機(jī)編程理念源自于對(duì)現(xiàn)實(shí)抽象的哲學(xué)思考，面向?qū)ο缶幊淌瞧湟环N思維方式，與它并駕齊驅(qū)的是另外兩種思路過(guò)程式和函數(shù)式編程。 JavaScript 中的原型機(jī)制一直以來(lái)都被眾多開(kāi)發(fā)者（包括本人）低估甚至忽視了，這是因?yàn)榻^大多數(shù)人沒(méi)有想要深刻理解這個(gè)機(jī)制的內(nèi)涵，以及越來(lái)越多的開(kāi)發(fā)者缺乏計(jì)算機(jī)編程相關(guān)的基礎(chǔ)知識(shí)。對(duì)于這樣的開(kāi)發(fā)者來(lái)說(shuō) J...

    iKcamp 評(píng)論0 收藏0

  • JS函數(shù)的工廠模式、構(gòu)造函數(shù)模式、原型模式的區(qū)別

    摘要：于是就有了構(gòu)造函數(shù)和原型模式混合模式組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建自定義類(lèi)型最常見(jiàn)的方式，就是組合模式。 創(chuàng)建對(duì)象 JS有六種數(shù)據(jù)數(shù)據(jù)類(lèi)型，其中五種屬于基本數(shù)據(jù)類(lèi)型：Null、Boolean、undefined、String、Number。而其它值都是對(duì)象。數(shù)組是對(duì)象，函數(shù)是對(duì)象，正則表達(dá)式是對(duì)象。對(duì)象也是對(duì)象。 來(lái)看一下對(duì)象的定義： 無(wú)序?qū)傩缘募?，其屬性可以包含基本值、?duì)象、或...

    william 評(píng)論0 收藏0

  • 讀《javaScript高級(jí)程序設(shè)計(jì)－第6章》之封裝類(lèi)

    摘要：創(chuàng)建構(gòu)造函數(shù)后，其原型對(duì)象默認(rèn)只會(huì)取得屬性至于其他的方法都是從繼承來(lái)的。上圖展示了構(gòu)造函數(shù)的原型對(duì)象和現(xiàn)有的兩個(gè)實(shí)例之間的關(guān)系。所有原生的引用類(lèi)型都在其構(gòu)造函數(shù)的原型上定義了方法。 第6章我一共寫(xiě)了3篇總結(jié)，下面是相關(guān)鏈接：讀《javaScript高級(jí)程序設(shè)計(jì)－第6章》之理解對(duì)象讀《javaScript高級(jí)程序設(shè)計(jì)－第6章》之繼承 工廠模式 所謂的工廠模式就是，把創(chuàng)建具體對(duì)象的過(guò)程抽象...

    seal_de 評(píng)論0 收藏0

  • JS基礎(chǔ)之?dāng)?shù)據(jù)類(lèi)型、對(duì)象、原型、原型鏈、繼承

    摘要：就是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。構(gòu)造函數(shù)模式可以創(chuàng)建自定義引用類(lèi)型，可以像創(chuàng)建內(nèi)置對(duì)象實(shí)例一樣使用操作符。 數(shù)據(jù)類(lèi)型： 簡(jiǎn)單數(shù)據(jù)類(lèi)型：Undefined、Null、String、Number、Boolean、Symbol 復(fù)雜數(shù)據(jù)類(lèi)型：Object // Undefined：聲明，但未初始化 // Null：空對(duì)象指針 typeof操作符（檢測(cè)基本數(shù)據(jù)類(lèi)型）: ...

    LucasTwilight 評(píng)論0 收藏0

  • JavaScript_高程三_02

    摘要：實(shí)例中的指針僅指向原型，而不指向構(gòu)造函數(shù)。調(diào)用構(gòu)造函數(shù)時(shí)會(huì)為實(shí)例添加一個(gè)指向最初原型的或者而把原型修改為另外一個(gè)對(duì)象就等于切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系。 面向?qū)ο蟮某绦蛟O(shè)計(jì) ECMA-262定義對(duì)象：無(wú)序?qū)傩缘募?，其屬性可以包含基本值，?duì)象或者函數(shù)。普通理解：對(duì)象是一組沒(méi)有特定順序的值。對(duì)象的每個(gè)屬性或方法都有一個(gè)名字，而每個(gè)名字都映射一個(gè)值。 每個(gè)對(duì)象都是基于一個(gè)引用類(lèi)型創(chuàng)建...

    hidogs 評(píng)論0 收藏0

  • 理解js對(duì)象

    摘要：將構(gòu)造函數(shù)的作用域賦值給新對(duì)象因此指向了新對(duì)象執(zhí)行構(gòu)造函數(shù)的代碼為這個(gè)新對(duì)象添加屬性返回對(duì)象最初是用來(lái)標(biāo)識(shí)對(duì)象類(lèi)型的。但提到檢測(cè)對(duì)象類(lèi)型，還是使用將構(gòu)造函數(shù)當(dāng)作函數(shù)構(gòu)造函數(shù)與其他函數(shù)唯一區(qū)別。 創(chuàng)建對(duì)象 雖然Object構(gòu)造函數(shù)與對(duì)象字面量都能創(chuàng)建單個(gè)對(duì)象， 但這些方式都有明顯的缺點(diǎn)： 使用同一個(gè)接口創(chuàng)建很多對(duì)象， 會(huì)產(chǎn)生大量重復(fù)代碼。 var obj = {}; //對(duì)象字面量 va...

    zhouzhou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<