對象(二)——原型與原型鏈

来源:https://www.cnblogs.com/y-dt/archive/2018/07/28/9381443.html
-Advertisement-
Play Games

原型與原型鏈 一. 普通對象與函數對象 JavaScript 中,萬物皆對象!但對象也是有區別的。分為普通對象和函數對象,Object 、Function 是 JS 自帶的函數對象。下麵舉例說明 在上面的例子中 o1 o2 o3 為普通對象,f1 f2 f3 為函數對象。怎麼區分,其實很簡單,凡是通 ...


原型與原型鏈

一. 普通對象與函數對象
  • JavaScript 中,萬物皆對象!但對象也是有區別的。分為普通對象和函數對象,Object 、Function 是 JS 自帶的函數對象。下麵舉例說明
var o1 = {};
var o2 = new Object();
var o3 = new f1();

function f1(){};
var f2 = function(){};
var f3 = new Function('str');

typeof Object;//function
typeof Function;//function

typeof f1;//function
typeof f2;//function
typeof f3;//function

typeof o1;//object
typeof o2;//object
typeof o3;//object

在上面的例子中 o1 o2 o3 為普通對象,f1 f2 f3 為函數對象。怎麼區分,其實很簡單,凡是通過 new Function() 創建的對象都是函數對象,其他的都是普通對象。f1,f2,歸根結底都是通過 new Function()的方式進行創建的。Function Object 也都是通過 New Function()創建的。

二.構造函數
function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        alert(this.name);
    }
}
var person1 = new Person('mike',15);
var person2 = new Person('nike',18);

上例中person1和person2為Person的實例,兩個實例中都有隱含的
==constructor==屬性(通過原型對象繼承得到),該屬性指向構造函數Person

三.原型對象
  • 我們創建的每個函數都有一個prototype(原型)屬性,指向函數的原型對象。換句話說,prototype就是通過調用構造函數而創建的那個對象實例的原型對象,使用原型對象即可以讓所有對象實例共用它所包含的屬性和方法,可類比於父子類(繼承)。
  • 創建新函數時,其prototype屬性指向的原型對象會自動獲得一個constructor(構造函數)屬性,該屬性指向包含prototype的函數,也就是構造函數
function Person(name, age, job){
    Person.prototpe.name = father;
    Person.prototpe. = 28;
    Person.prototpe.sayName = function(){
        alert(this.name);
    }
}
var person1 = new Person();
person1.sayName();//'mike'
var person2 = new Person();
person2.sayName();//'nike'

person1.sayName == person2.sayName;//true

person1.name = 'joy';
person1.sayName();//'joy'

通過為構造函數Person的原型對象創建屬性,person1,person2將繼承Person.prototype的屬性,如果實例定義了與原型對象同名屬性,原型對象屬性則會被覆蓋。

補充:更簡單的原型語法
function Person(){}
Person.prototype = {
    name:'',
    age:'',
    sayName:function(){
    }
}

==註意==:該方法的原型對象的constructor屬性不再指向Person,此時例中指向Object(新new的一個對象),如若需要可在Person.pertotype的字面量中添加:==constructor:Person,==

四.__proto__
  • JS 在創建對象(不論是普通對象還是函數對象)的時候,都有一個叫做__proto__ 的內置屬性,用於指向創建它的構造函數的原型對象。

  • 普通對象的__proto__指向這個對象(this)的構造函數的prototype;
  • 函數對象的__proto__全部都是指向Function的prototype。

對象 person1 有一個 __proto__屬性,創建它的構造函數是 Person,構造函數的原型對象是 Person.prototype ,所以:
==person1.__proto__ == Person.prototype==

不過,要明確的真正重要的一點就是,這個連接存在於實例==person1==與構造函數==Person==的原型對象==Person.prototype==之間,而不是存在於實例person1與構造函數Person之間。

js高級程式設計圖
image

五.Prototype

當我們創建一個函數時:
var Person = new Object()
Person 是 Object 的實例,所以 Person 繼承了Object 的原型對象Object.prototype上所有的方法:
image

六.Object.getPrototypeOf(obj)

獲取對象的原型

總結
  • 原型和原型鏈是JS實現繼承的一種模型。
  • 原型鏈的形成是真正是靠__proto__ 而非prototype
  • 對象通過__proto__屬性訪問原型,構造函數通過prototype屬性訪問原型

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

-Advertisement-
Play Games
更多相關文章
  • Document(文檔)是Field(域)的承載體, 一個Document由多個Field組成. Field由名稱和值兩部分組成, 值是要索引的內容, 也是要搜索的內容. Lucene在記憶體中實現了分頁查詢, 這裡通過一個分頁查詢的demo演示分頁的過程. ...
  • 運行後界面空白,Xcode跳轉到APPDelegate.swift文件提示如下 第一種可能原因: 做輸出口後在代碼中重新命名了輸出口 解決方法: 右鍵控制項關閉輸出口的連接,變回+號,將它重新連到代碼的var...處鬆開。 或者直接刪除代碼代碼重新做輸出口。 第二種可能原因: 修改了ViewContr ...
  • 一,效果圖。 二,代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, ...
  • seajs模塊化開發 模塊化開發,把整個文件分割成一個一個小文件。 使用方法 使用方法特別簡單,首先在官網中下載sea.js,然後在頁面中引入。 index.html part1.js 有一些需要註意的地方 另外這一種判斷使用哪個模塊的 require.async 方法用來在模塊內部非同步載入模塊,並 ...
  • import phantom from 'phantom'; const pageToPdf = (url) => { phantom.create().then((ph) { ph.createPage().then((page) => { page.open(url).then((status) ...
  • 閉包 概念 只有函數內部的子函數才能讀取局部變數,所以閉包可以理解成“定義在一個函數內部的函數“。在本質上,閉包是將函數內部和函數外部連接起來的橋梁 例子 作用:比如在一個函數中嵌套一個函數,通過閉包可以讓嵌套函數訪問到包裹它的函數的局部變數。 封裝 閉包陷阱 總結 優點:靈活方便,封裝 缺點:空間 ...
  • 傳統的佈局方案,在針對特殊佈局時會很不方便,比如垂直居中,把一個容器等分為N列等等。自從 Flex 出現以後,這些都迎刃而解了,本文對Flex相關內容做一個簡單梳理。 ...
  • 使用前端技術開發桌面應用的技術已經相當成熟了,像早先的 NW.js,如今很火的 Electron 等,都可以輕鬆實現。今天給大家分享的 nativefier 就是基於 Electron 封裝的,可以幫助你只需要一行命令就可以生成不同平臺的桌面應用程式,非常神奇! ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...