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

来源: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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類