1. 程式人生 > >關於前端開發中的建構函式模式和原型模式

關於前端開發中的建構函式模式和原型模式

我們都知道在新建一個函式的時候,會自動建立一個該函式的prototype,其中也會自動增加一個constructor屬性;每次new一個函式的物件時,都會重複建立這個函式中的方法。

但是在這裡就存在兩個問題,每個例項對於函式中初始化的內容都是一樣的,如果你想在一個例項中獲得只有這個例項才存在的屬性該如何實現??

如何解決函式中的方法重複建立的問題??

問題1解決方法:在建立這個函式的例項之後,通過物件來新增。

問題2解決方法:函式每個例項都會共享這個函式中prototype中的屬性和方法;所以我們可以通過在函式的prototype中新增重複建立的方法即可。

下面是我實現的例子:

function Person(name,age) {
  this.name = name;
  this.age = age;
  this.friends = ["sheele","court"]
}


Person.prototype = {
  constructor:Person,
  test:function() {
    alert("success");
  }
};


var p1 = new Person("nich","12");
var p2 = new Person("cisf","33");


p1.friends.push("alice");
console.log(p1.friends);
console.log(p2.friends);


console.log(p1.friends === p2.friends);
console.log(p1.test === p2.test);



結果:

Array["sheele","court","alice"]

Array["sheele","court"]

false

true


相關推薦

關於前端開發建構函式模式原型模式

我們都知道在新建一個函式的時候,會自動建立一個該函式的prototype,其中也會自動增加一個constructor屬性;每次new一個函式的物件時,都會重複建立這個函式中的方法。 但是在這裡就存在兩個問題,每個例項對於函式中初始化的內容都是一樣的,如果你想在一個例項中

原型模式--組合使用建構函式模式原型模式

建立自定義型別的最常見方式,就是組合使用建構函式模式與原型模式。建構函式模式用於定義例項屬性,而原型模式用於定義方法和共享的屬性。結果,每個例項都會有自己的一份例項屬性的副本,但同時又共享著對方法的引用,最大限度地節省了記憶體。另外,這種混成模式還支援向建構函式傳遞引數;可謂是集兩種模式之長。下面的

Js面向物件程式設計——組合使用建構函式模式原型模式

Js面向物件程式設計——組合使用建構函式模式和原型模式 Js面向物件程式設計——組合使用建構函式模式和原型模式 Js面向物件程式設計——組合使用建構函式模式和原型模式 建立自定義型別的最常見方式,就是組合使用建構函式模式與原型模式。建構

js建構函式constructor原型prototype

所有引用型別(函式,陣列,物件)都擁有__proto__屬性(隱式原型) 所有函式擁有prototype屬性(顯式原型)(僅限函式)  原型物件:擁有prototype屬性的物件,在定義函式時就被建立   __proto__, prototype和constr

vue-cli 開發跨域問題profile模式配置

一、開發環境中跨域   使用 Vue-cli 建立的專案,開發地址是 localhost:8080,需要訪問非本機上的介面http://10.1.0.34:8000/queryRole。不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,通常都需要後臺配置,不過 Vue-cli 建立的

Java建構函式過載方法過載

原始碼 class Tree { int height; Tree() { prt("Planting a seeding"); height = 0; } Tree(int i)

組合使用構造函數模式原型模式

創建 類型 prototype 原型 構造函數 == pro name 自定義 創建自定義類型的最常見方式,就是組合使用構造函數與原型模式。構造函數模式用於定義實例屬性 而原型模式用於定義方法和共享方法,結果,每個實例都會有自己的一份實例屬性 的副本,但同時又共

白話設計模式--構造者模式原型模式

設計模式是什麼? 設計模式,顧名思義,就是軟體設計過程中常見問題的解決方案,是經驗的總結。 設計模式型別: 一、Builder,構造者模式。它是構造複雜物件的一種方式,尤其是在用相同的方式構造不同物件時,顯得尤為有效。 例如,一般在封裝實體類時我們通常會用構造方法等形式往實體類傳

Java進階篇設計模式之三 ----- 建造者模式原型模式

前言 在上一篇中我們學習了工廠模式,介紹了簡單工廠模式、工廠方法和抽象工廠模式。本篇則介紹設計模式中屬於建立型模式的建造者模式和原型模式。 建造者模式 簡介 建造者模式是屬於建立型模式。建造者模式使用多個簡單的物件一步一步構建成一個複雜的物件。這種型別的設計模式屬於建立型模式,它提供了一種建立物件的最佳方式

Java程式設計師從笨鳥到菜鳥之(三十四)大話設計模式(五)建立者模式原型模式

        建立者模式是建立型模式中最負責的一個設計模式了,建立者負責構建一個物件的各個部分,並且完成組裝的過程.構建模式主要用來針對複雜產品生產,分離部件構建細節,以達到良好的伸縮性。把構造物件例項的邏輯移到了類的外部,在這個類外部定義了這個類的構造邏輯。它把一個複雜物件的構過程從物件的表示中分離

建構函式原型模式動態建立例項

這幾天早上看了一下紅寶書中物件一章,看到了用建構函式和原型模式來建立例項,就想了一下哪些場景用這個比較好。想到了Dota。 function Hero(name, sex, skill1, skill2, skill3) { this.name = name; this.sex

JS建構函式與普通函式的區別及JS建構函式原型例項的關係

JS中建構函式與普通函式的區別: https://www.cnblogs.com/cindy79/p/7245566.html JS建構函式、原型和例項的關係: https://blog.csdn.net/u012443286/article/details/78823955 Java

js 建構函式,原型,例項化物件

1,建構函式建立物件造成的記憶體浪費,和原型的引入 function Person(name,age){ this.name = name; this.age = age; this.introduce = function

JS建構函式、例項物件原型物件三者之間的關係

1、首先需要明白一個知識點:一個需要共享並且通過例項物件呼叫的方法,是在建構函式的原型物件中的。(例項物件原型__proto__指向建構函式的原型,即prototype)      通過檢視join方法得到,join是在建構函式的原型物件中的。 2、進入正題,開始解

淺析前端開發的 MVC/MVP/MVVM 模式

所有 團隊 sub 策略 代碼 告訴 簡單 ava 關心 MVC,MVP和MVVM都是常見的軟件架構設計模式(Architectural Pattern),它通過分離關註點來改進代碼的組織方式。不同於設計模式(Design Pattern),只是為了解決一類問題而總結出的抽

前端開發提到的“腳手架”到底指什麼,CLI?gulp gulp-cli有什麼區別

一般來說,腳手架是幫你減少「為減少重複性工作而做的重複性工作」的工具. gulp和gulp-cli的區別可以看這個task - what does gulp-"cli" stands for? . 它跟前端常說的腳手架(scaffold)不是一個東西. CLI只是Command Line Interface

JS建構函式與與原型物件的理解

一:JS中的建構函式 在這裡可以這樣理解建構函式 ,即構造一個物件的函式就叫做建構函式; 1:那麼我們使用建構函式的目的是構造一個物件 ,如何構造一個物件就是我下面要說的: 在JavaScript中,任何合法的函式都可以作為物件的建構函式,這包括系統內建的函式, 也包括自己定義的函式

編寫HTMLCSS的前端開發不一定熟悉JavaScript

作為前端開發人員,HTML、css、JavaScript是必備的知識技能,但是現實工作工作中並非所有的前端都知道JavaScript,根據外國一個網站的匿名調查發現,有17%的開發人員不知道JavaScript,只有51% 的開發人員熟悉JavaScript。其實前端開發最主要的動態開發就是Java

【java學習筆記】淺析JavaWeb開發Model1模式Model2模式

Model1模式   JavaBean就是java類,JavaBean分兩類:一類是實體Bean,一類是業務Bean model1模式優點:執行效率高,開發效率比較高,適合小型專案 model1模式缺點:邏輯比較混亂,頁面混亂,維護困難,擴充套件不容易   Model2模式

工廠模式建構函式模式原型模式

工廠模式 用函式來封裝以特定介面建立物件的細節 function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job;