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

来源: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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類