原型&繼承題目及內容解答

来源:https://www.cnblogs.com/smileZAZ/archive/2022/07/12/16470886.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. 代碼輸出結果 function Person(name) { this.name = name } var p2 = new Person('king'); console.log(p2.__proto__) //Person.pr ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1. 代碼輸出結果

function Person(name) {
    this.name = name
}
var p2 = new Person('king');
console.log(p2.__proto__) //Person.prototype
console.log(p2.__proto__.__proto__) //Object.prototype
console.log(p2.__proto__.__proto__.__proto__) // null
console.log(p2.__proto__.__proto__.__proto__.__proto__)//null後面沒有了，報錯
console.log(p2.__proto__.__proto__.__proto__.__proto__.__proto__)//null後面沒有了，報錯
console.log(p2.constructor)//Person
console.log(p2.prototype)//undefined p2是實例，沒有prototype屬性
console.log(Person.constructor)//Function 一個空函數
console.log(Person.prototype)//列印出Person.prototype這個對象里所有的方法和屬性
console.log(Person.prototype.constructor)//Person
console.log(Person.prototype.__proto__)// Object.prototype
console.log(Person.__proto__) //Function.prototype
console.log(Function.prototype.__proto__)//Object.prototype
console.log(Function.__proto__)//Function.prototype
console.log(Object.__proto__)//Function.prototype
console.log(Object.prototype.__proto__)//null

這道義題目考察原型、原型鏈的基礎，記住就可以了。

2. 代碼輸出結果

// a
function Foo () {
 getName = function () {
   console.log(1);
 }
 return this;
}
// b
Foo.getName = function () {
 console.log(2);
}
// c
Foo.prototype.getName = function () {
 console.log(3);
}
// d
var getName = function () {
 console.log(4);
}
// e
function getName () {
 console.log(5);
}

Foo.getName();           // 2
getName();               // 4
Foo().getName();         // 1
getName();               // 1 
new Foo.getName();       // 2
new Foo().getName();     // 3
new new Foo().getName(); // 3

輸出結果：2 4 1 1 2 3 3

解析：

  1. Foo.getName()，Foo為一個函數對象，對象都可以有屬性，b 處定義Foo的getName屬性為函數，輸出2；
  2. getName()，這裡看d、e處，d為函數表達式，e為函數聲明，兩者區別在於變數提升，函數聲明的 5 會被後邊函數表達式的 4 覆蓋；
  3.  Foo().getName()，這裡要看a處，在Foo內部將全局的getName重新賦值為 console.log(1) 的函數，執行Foo()返回 this，這個this指向window，Foo().getName() 即為window.getName()，輸出 1；
  4. getName()，上面3中，全局的getName已經被重新賦值，所以這裡依然輸出 1；
  5. new Foo.getName()，這裡等價於 new (Foo.getName())，先執行 Foo.getName()，輸出 2，然後new一個實例；
  6. new Foo().getName()，這裡等價於 (new Foo()).getName(), 先new一個Foo的實例，再執行這個實例的getName方法，但是這個實例本身沒有這個方法，所以去原型鏈__protot__上邊找，實例.__protot__ === Foo.prototype，所以輸出 3；
  7. new new Foo().getName()，這裡等價於new (new Foo().getName())，如上述6，先輸出 3，然後new 一個 new Foo().getName() 的實例。

3. 代碼輸出結果

var F = function() {};
Object.prototype.a = function() {
  console.log('a');
};
Function.prototype.b = function() {
  console.log('b');
}
var f = new F();
f.a();
f.b();
F.a();
F.b()

輸出結果：

a
Uncaught TypeError: f.b is not a function
a
b

解析：

  1. f 並不是 Function 的實例，因為它本來就不是構造函數，調用的是 Function 原型鏈上的相關屬性和方法，只能訪問到 Object 原型鏈。所以 f.a() 輸出 a  ，而 f.b() 就報錯了。
  2. F 是個構造函數，而 F 是構造函數 Function 的一個實例。因為 F instanceof  Object === true，F instanceof Function === true，由此可以得出結論：F 是 Object 和 Function 兩個的實例，即 F 能訪問到 a， 也能訪問到 b。所以 F.a() 輸出 a ，F.b() 輸出 b。

4. 代碼輸出結果

function Foo(){
    Foo.a = function(){
        console.log(1);
    }
    this.a = function(){
        console.log(2)
    }
}

Foo.prototype.a = function(){
    console.log(3);
}

Foo.a = function(){
    console.log(4);
}

Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

輸出結果：4 2 1

解析：

  1. Foo.a() 這個是調用 Foo 函數的靜態方法 a，雖然 Foo 中有優先順序更高的屬性方法 a，但 Foo 此時沒有被調用，所以此時輸出 Foo 的靜態方法 a 的結果：4
  2. let obj = new Foo(); 使用了 new 方法調用了函數，返回了函數實例對象，此時 Foo 函數內部的屬性方法初始化，原型鏈建立。
  3.  obj.a() ; 調用 obj 實例上的方法 a，該實例上目前有兩個 a 方法：一個是內部屬性方法，另一個是原型上的方法。當這兩者都存在時，首先查找 ownProperty ，如果沒有才去原型鏈上找，所以調用實例上的 a 輸出：2
  4. Foo.a() ; 根據第2步可知 Foo 函數內部的屬性方法已初始化，覆蓋了同名的靜態方法，所以輸出：1

5. 代碼輸出結果

function Dog() {
  this.name = 'puppy'
}
Dog.prototype.bark = () => {
  console.log('woof!woof!')
}
const dog = new Dog()
console.log(Dog.prototype.constructor === Dog && dog.constructor === Dog && dog instanceof Dog)

輸出結果：true

解析：

因為constructor是prototype上的屬性，所以dog.constructor實際上就是指向Dog.prototype.constructor；constructor屬性指向構造函數。instanceof而實際檢測的是類型是否在實例的原型鏈上。

constructor是prototype上的屬性，這一點很容易被忽略掉。constructor和instanceof 的作用是不同的，感性地來說，constructor的限制比較嚴格，它只能嚴格對比對象的構造函數是不是指定的值；而instanceof比較鬆散，只要檢測的類型在原型鏈上，就會返回true。

6. 代碼輸出結果

var A = {n: 4399};
var B =  function(){this.n = 9999};
var C =  function(){var n = 8888};
B.prototype = A;
C.prototype = A;
var b = new B();
var c = new C();
A.n++
console.log(b.n);
console.log(c.n);

輸出結果：9999 4400

 

解析：

  1. console.log(b.n)，在查找b.n是首先查找 b 對象自身有沒有 n 屬性，如果沒有會去原型（prototype）上查找，當執行var b = new B()時，函數內部this.n=9999(此時this指向 b) 返回b對象，b對象有自身的n屬性，所以返回 9999。
  2. console.log(c.n)，同理，當執行var c = new C()時，c對象沒有自身的n屬性，向上查找，找到原型 （prototype）上的 n 屬性，因為 A.n++(此時對象A中的n為4400)， 所以返回4400。

7. 代碼輸出問題

function A(){
}
function B(a){
　　this.a = a;
}
function C(a){
　　if(a){
this.a = a;
　　}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
 
console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);

輸出結果：1 undefined 2

解析：

  1. console.log(new A().a)，new A()為構造函數創建的對象，本身沒有a屬性，所以向它的原型去找，發現原型的a屬性的屬性值為1，故該輸出值為1；
  2. console.log(new B().a)，ew B()為構造函數創建的對象，該構造函數有參數a，但該對象沒有傳參，故該輸出值為undefined;
  3. console.log(new C(2).a)，new C()為構造函數創建的對象，該構造函數有參數a，且傳的實參為2，執行函數內部，發現if為真，執行this.a = 2,故屬性a的值為2。

8 代碼輸出問題

function Parent() {
    this.a = 1;
    this.b = [1, 2, this.a];
    this.c = { demo: 5 };
    this.show = function () {
        console.log(this.a , this.b , this.c.demo );
    }
}

function Child() {
    this.a = 2;
    this.change = function () {
        this.b.push(this.a);
        this.a = this.b.length;
        this.c.demo = this.a++;
    }
}

Child.prototype = new Parent();
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
parent.show();
child1.show();
child2.show();
child1.change();
child2.change();
parent.show();
child1.show();
child2.show();

輸出結果：

parent.show(); // 1  [1,2,1] 5

child1.show(); // 11 [1,2,1] 5
child2.show(); // 12 [1,2,1] 5

parent.show(); // 1 [1,2,1] 5

child1.show(); // 5 [1,2,1,11,12] 5

child2.show(); // 6 [1,2,1,11,12] 5

這道題目值得神帝，他涉及到的知識點很多，例如this的指向、原型、原型鏈、類的繼承、數據類型等。

解析：

  1. parent.show()，可以直接獲得所需的值，沒啥好說的；
  2. child1.show()，Child的構造函數原本是指向Child的，題目顯式將Child類的原型對象指向了Parent類的一個實例，需要註意Child.prototype指向的是Parent的實例parent，而不是指向Parent這個類。
  3. child2.show()，這個也沒啥好說的；
  4. parent.show()，parent是一個Parent類的實例，Child.prorotype指向的是Parent類的另一個實例，兩者在堆記憶體中互不影響，所以上述操作不影響parent實例，所以輸出結果不變；
  5. child1.show()，child1執行了change()方法後，發生了怎樣的變化呢?
  • this.b.push(this.a)，由於this的動態指向特性，this.b會指向Child.prototype上的b數組,this.a會指向child1的a屬性,所以Child.prototype.b變成了[1,2,1,11];
  • this.a = this.b.length，這條語句中this.a和this.b的指向與上一句一致，故結果為child1.a變為4;
  • this.c.demo = this.a++，由於child1自身屬性並沒有c這個屬性，所以此處的this.c會指向Child.prototype.c，this.a值為4，為原始類型，故賦值操作時會直接賦值，Child.prototype.c.demo的結果為4，而this.a隨後自增為5(4 + 1 = 5)。
  1. child2執行了change()方法, 而child2和child1均是Child類的實例，所以他們的原型鏈指向同一個原型對象Child.prototype,也就是同一個parent實例，所以child2.change()中所有影響到原型對象的語句都會影響child1的最終輸出結果。
  • this.b.push(this.a)，由於this的動態指向特性，this.b會指向Child.prototype上的b數組,this.a會指向child2的a屬性,所以Child.prototype.b變成了[1,2,1,11,12];
  • this.a = this.b.length，這條語句中this.a和this.b的指向與上一句一致，故結果為child2.a變為5;
  • this.c.demo = this.a++，由於child2自身屬性並沒有c這個屬性，所以此處的this.c會指向Child.prototype.c，故執行結果為Child.prototype.c.demo的值變為child2.a的值5，而child2.a最終自增為6(5 + 1 = 6)。

9. 代碼輸出結果

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
console.log(instance.getSuperValue());

輸出結果：true

實際上，這段代碼就是在實現原型鏈繼承，SubType繼承了SuperType，本質是重寫了SubType的原型對象，代之以一個新類型的實例。SubType的原型被重寫了，所以instance.constructor指向的是SuperType。具體如下：

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


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

-Advertisement-
Play Games
更多相關文章
  • MySQL函數學習(四)-----聚合函數
    註：筆記旨在記錄 四、MySQL 聚合函數 | \ | 函 數 名 稱 | 作 用 | 完 成 | |: :|: |: |: :| | 1 | MAX | 求最大值 | 勾 | | 2 | MIN | 求最小值 | 勾 | | 3 | COUNT | 求數量 | 勾 | | 4 | BIT_COUN ...
  • Flink 作業提交流程
    大家好，我是小寒~ 今天給大家帶來一篇 flink 作業提交相關的文章。 我們都知道，在開發完一個 flink 應用程式後，打包成 jar 包，然後通過 FLink CLI 或者 Web UI 提交作業到 FLink 集群。其實，Flink 的 jar 文件並不是 FLink 集群的可執行文件，需要 ...
  • 騰訊雲資料庫聯手宇信科技發佈聯合方案，全面助力金融科技安全可控
    近日，騰訊雲聯手宇信科技，共同完成了信貸平臺、數據中台、手機銀行等核心金融業務的聯合解決方案，以及雙向適配認證、深度測試和優化工作，並已在某頭部農商行、某頭部城商行投產運行。未來，雙方將在信貸系統和國產資料庫的深度適配測試、監管報送國產化聯合方案、雲原生PaaS平臺雙向適配認證等領域持續推進合作。 ...
  • Postgres14.4（Docker安裝）
    Postgres14.4（Docker安裝） 一，Docker拉取鏡像 docker pull postgres:14.4 #檢查鏡像是否拉取成功 docker images | grep postgres 二，新建掛載目錄，並運行容器 mkdir -p /data/postgre/data doc ...
  • AI2(App Inventor 2) 離線版
    多媒體時代，音頻作為內容傳播中的重要形式，因其不受空間限制、認知負擔小、聲音元素多樣化等特點，廣泛應用於短視頻製作、兒童線上教育、有聲閱讀、游戲等領域產品，在各種形式的音頻呈現過程中，合理添加音效能夠帶給用戶更具氛圍感的沉浸式聲音體驗。HMS Core音頻編輯服務為助力全球開發者快速構建各類應用音頻 ...
  • vue2,vue指令和選項
    vue特點 mvvm框架 響應式(聲明式) 組件化(支持自定義組件) 豐富的指令(Dom功能的抽象) 基於選項(template，data，computed，watch，methods) vue文檔集中ue Vue生態豐富且簡單 漸進式() Veu和Dom開發思想 Dom開發思想：當我們需要在交互事 ...
  • 微信小程式介面請求/form-data/單文件、多文件上傳
    1、普通的微信請求封裝 1 const http = (options) =>{ 2 return new Promise((resolve,reject) => { 3 wx.request({ 4 url: options.url, 5 method:options.method || 'get ...
  • 20220712_第七小組_張紅睿_學習筆記
    知識點 JavaScript部分函數 Array： concat()：連接兩個數組。 join()：設置分隔符連接數組成一個字元串。 pop()：刪除最後一個元素。 sort()：排序 Global： isNaN()：判斷一個值是不是數字。 parseInt()：轉換成整數。 parseFloat( ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類