創建對象----原型模式和構造函數

来源:http://www.cnblogs.com/visa/archive/2017/08/11/7346179.html
-Advertisement-
Play Games

創建對象 工廠模式 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.nam ...


創建對象

工廠模式

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };    
    return o;
}

var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

person1.sayName();   //"Nicholas"
person2.sayName();   //"Greg"
  • 工廠模式雖然解決了創建多個相似對象的問題，但是沒有解決對象識別的問題（即如何知道對象的類型）

構造函數模式

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };    
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.sayName();   //"Nicholas"
person2.sayName();   //"Greg"

alert(person1 instanceof Object);  //true
alert(person1 instanceof Person);  //true
alert(person2 instanceof Object);  //true
alert(person2 instanceof Person);  //true

alert(person1.sayName == person2.sayName);  //false

  • 構造函數始終都應該以一個大寫字母開頭，要創建新的實例，必須使用new操作符。

  • 每一個實例都有一個constructor（構造函數）屬性，該屬性指向實例的構造函數。

    alert(person1.constructor == Person);  //true
alert(person2.constructor == Person);  //true

  • 構造函數與其他函數唯一的不同就是調用方式不同，任何函數只要用new操作符來調用，那它就可以作為構造函數

  • 構造函數的問題：每個方法在每個實例上都要重新創建一遍，不同實例上的同名方法其實是互相不相等的

原型模式

  • 每個函數都有一個prototype（原型）屬性，這個屬性是一個指針，指向一個對象，這個對象的作用是包含可以由特定類型的所有實例共用的屬性和方法。prototype也就是通過調用構造函數而創建的那個對象實例的原型對象。

    function Person(){
}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
person1.sayName();   //"Nicholas"

var person2 = new Person();
person2.sayName();   //"Nicholas"

alert(person1.sayName == person2.sayName);  //true

  • 新對象的這些屬性和方法是所有實例共用的

理解原型對象

  • 無論什麼時候，只要創建了一個新函數，就會根據一組特定的規則為該函數創建一個prototype屬性，這個屬性指向函數的原型對象。

  • 預設情況下，所有原型對象會自動獲得一個constructor（構造函數）屬性，這個屬性是一個指向prototype屬性所在函數的指針。就上面的例子而言，Person.prototype.constructor指向Person。

  • 創建了自定義構造函數之後，其原型對象只會獲得constructor屬性，至於其他方法，則全是從Object繼承來的，當調用構造函數創建一個新實例之後，該實例的內部將會包含一個指針（內部屬性），指向構造函數的原型對象。這個屬性叫做[[prototype]]，也就是__proto__。註意：這個連接存在於實例和構造函數的原型對象之間，和構造函數沒有直接關係。

  • 雖然所有實現中都無法訪問到[[prototype]]，但是可以通過isPrototypeOf()方法來確定對象之間是否是否存在這種關係

    alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true

  • Object.getPrototypeOf() 取得一個對象的原型

    //only works if Object.getPrototypeOf() is available
if (Object.getPrototypeOf){
    alert(Object.getPrototypeOf(person1) == Person.prototype);  //true
    alert(Object.getPrototypeOf(person1).name);  //"Nicholas"
}

  • 原型最初只包含constructor屬性，而該屬性也是共用的，因此可以通過對象實例來訪問

  • 雖然可以通過對象實例訪問保存在原型中的值，但卻不能通過對象實例重寫原型中的值。

    function Person(){
}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();

person1.name = "Greg";
alert(person1.name);   //"Greg" from instance
alert(person2.name);   //"Nicholas" from prototype

  • 通過delete操作符可以完全刪除實例屬性，從而讓我們能重新訪問原型中的屬性

    delete person1.name;
alert(person1.name);   //"Nicholas" - from the prototype

  • hasOwnProperty() 方法可以檢測一個屬性是存在於實例中，還是原型中，只有給定屬性在對象實例中，才會返回true。

原型與in操作符

  • in操作符有兩種使用方式，一種是在for-in迴圈中，一種是單獨使用。單獨使用時，in操作符會在通過對象能夠訪問訪問給定屬性時返回true，無論該屬性在實例中還是原型中。

    function Person(){
}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();

alert(person1.hasOwnProperty("name"));  //false
alert("name" in person1);  //true

person1.name = "Greg";
alert(person1.name);   //"Greg" from instance
alert(person1.hasOwnProperty("name"));  //true
alert("name" in person1);  //true

alert(person2.name);   //"Nicholas" from prototype
alert(person2.hasOwnProperty("name"));  //false
alert("name" in person2);  //true

delete person1.name;
alert(person1.name);   //"Nicholas" - from the prototype
alert(person1.hasOwnProperty("name"));  //false
alert("name" in person1);  //true

  • 在for-in迴圈時，返回的是所有能夠通過對象訪問的，可枚舉的屬性。

  • Object.keys() 接受一個對象作為參數，返回一個包含所有可枚舉屬性的字元串數組。

    function Person(){
}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

var keys = Object.keys(Person.prototype);
alert(keys);   //"name,age,job,sayName"

  • Object.getOwnPropertyNames() 獲得所有實例屬性，無論是否可枚舉

    var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys);   //"constructor,name,age,job,sayName"

更簡單的原型語法

function Person(){
}

Person.prototype = {
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

  • 如果將Person.prototype設置為等於一個以對象字面量形式創建的新對象，那麼constructor將不再指向Person。因為這樣本質上完全重寫了預設的prototype對象，因此constructor屬性也就變成了新對象的constructor屬性（指向Object）構造函數，不再指向Person函數。

    var friend = new Person();

alert(friend instanceof Object);  //true
alert(friend instanceof Person);  //true
alert(friend.constructor == Person);  //false
alert(friend.constructor == Object);  //true

  • 可以把constructor重新設置回適當的值。

    function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
    alert(this.name);
}
};

  • 以這種方式重設constructor屬性會導致它的[[Enumerable]]特性被設置為true。預設情況下，原生的constructor屬性是不可枚舉的。

原型的動態性

  • 由於在原型中查找值得過程是一次搜索，因此我們對原型對象做的任何修改都能立即從實例上反映出來————即使是先創建實例後修改原型。

  • 實例和原型之間的聯繫是一個指針，而不是一個副本。

  • 調用構造函數時，會為實例添加一個指向最初原型的[[prototype]]指針。如果重寫整個原型對象，會切斷構造函數與最初原型之間的聯繫。實例中的指針僅指向原型，並非構造函數！

    function Person(){
}

var friend = new Person();

Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

friend.sayName();   //error

  • 上面報錯的原因是重寫原型對象切斷了現有原型和已經存在的對象實例的聯繫。實例引用的仍是原來的原型。

組合使用構造函數和原型

  • 創建自定義類型的最常見模式就是組合使用構造函數和原型，構造函數用於定義實例屬性，原型用於定義方法和共用的屬性。這樣，每個實例都會有自己的一份實例屬性的副本，但同時也共用著對方法的引用，最大限度地節省了記憶體。

    function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}

Person.prototype = {
    constructor: Person,
    sayName : function () {
        alert(this.name);
    }
};

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");

alert(person1.friends);    //"Shelby,Court,Van"
alert(person2.friends);    //"Shelby,Court"
alert(person1.friends === person2.friends);  //false
alert(person1.sayName === person2.sayName);  //true

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js 中引用類型 的深拷貝 和 淺拷貝的區別
    一、曾經在讀JQ源碼的時候，對深拷貝算是有了一點的理解。我們在項目中是不是經常會遇到這樣的問題呢？ 後臺返回一個數組對象（引用類型）.次數在頁面渲染中需要對部分數據進行處理 比如：銀行卡62345092534 （這麼長） 但在頁面顯示的時候， 只顯示中國銀行（3118）但是傳給後臺的時候。又要傳62 ...
  • 放開那個UI 妹子，讓我來（上）
    一、前言 今天要學習的內容：今天主要是稍微總結一下，頁面中如何用字體代替圖片，省事，省時，方便，實用！ 小蘇啰嗦：人都是有惰性的。真的。剛開始我們有一個經驗豐富的美工，加上我們關係又非常好，以至於每次我都是等著她把設計圖給我，我才開始碼html。遇到圖片的地方，會切的就自己切了，不會的，就直接讓美工 ...
  • JavaScript中函數function fun(){}和 var fun=function(){}的區別
    function fun(){} 和 var fun=function(){}的區別 標題有點長···· 廢話少說，其實他們的主要區別就是“函數聲明的提前行為”. 正常情況下兩種方式都會進行正常的編譯，並輸出“hello world!”，下麵把函數調用放在上面再測一下。 前者不會被提升，後者被提升到 ...
  • 今天聊一聊nuxt.js（上）
    背景 近期在做內部系統的重構，從一線業務徹底的重構，經過充分的考慮我們準備把這個項目打造成前臺業務的試驗站，比如ssr和一些其他的前沿技術的探索，積累充分的經驗後待合適的契機應用到C端的項目中。 既然涉及到重構，避免不了老生常談的話題技術選型。當然開始還是走了一些彎路，因為是後臺項目，最重要的當然是 ...
  • 封裝ajax
    1 2 53 ...
  • h5-文本框
    h5-文本框 ...
  • js學習總結----綜合案例之微信應用場景（類似於微信音樂相冊）
    這個demo只是一個大概的思路，具體還需要根據情況來進行 上述代碼有一個地方動態設置需要動畫的ID值的代碼，下圖可以幫助你理解 ...
  • 基於 Vue 全家桶製作的移動端音樂 WebApp
    基於 Vue 全家桶 (2.x) 製作的移動端音樂 WebApp ，一個媲美原生的移動端音樂 App，項目完整、功能完備、UI美觀、交互一流。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類