JavaScript原型和繼承

CodeSheep 發布于2019-08-21 10:41 / 2991人閱讀

摘要：在默認情況下，原型對象都會自動獲得一個構造函數屬性，這個屬性包含包含一個指向屬性所在函數的指針。此外這里被重寫了，指向了看圖這個搜索的過程搜索實例搜索搜索搜索總是一步步向前到原型鏈末端停止

《JavaScript高級程序設計第三版》學習筆記
Object-Oriented 有一個標志，就是都有類的概念，通過類來創建多個具有相同屬性和方法的對象。而對于 EMCAScript中沒有類的概念，ECMA-262把對象定義為
”無序屬性的集合，該屬性可以包含任何基本值，對象或者函數。“

原型模式

每個函數都有一個prototype(原型)屬性

這個屬性都有一個指針，指向一個對象

這個對象包含由特定類型所有實例共享的屬性和方法

使用原型的好處是可以讓所有對象實例共享它包含的方法和屬性

通過in操作符和hasOwnProperty來判斷給定屬性是來自于原型還是實例
in- true 代表屬性在對象中存在來自實例或者來自原型
hasOwnProperty- true代表屬性來自于實例是實例屬性

繼承

ECMAScript中只支持實現繼承，而且是通過原型鏈的方式來實現的

理解原型對象
是這樣的
當我們創建一個新函數的時候，會根據一組特定的規則為該函數創建一個prototype屬性，這個prototype屬性指向函數的原型對象。在默認情況下，原型對象都會自動獲得一個constructor(構造函數)屬性，這個屬性包含包含一個指向prototype屬性所在函數的指針。
所以關系就是
比如有一個Person的對象
Person.prototype => 原型對象
原型對象.constructor => Person
即 Person.prototype.constructor == Person
見下圖關系

將原型鏈作為實現繼承的主要方法，基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。
demo代碼

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;
}

// 繼承SuperType 就指向了SuperType的原型對象了
SubType.prototype = new SuperType();
var instance = new SubType();
alert(instance.getSuperValue()); // true
alert(instance.property); //true

如果把SubType中的subproperty改成property會是怎么樣呢都會變成false

demo圖解

備注：
之所以 SuperType中property屬性會出現在，SubType.prototype中，是因為property是一個實例屬性，而SubType.prototype是SuperType的一個實例對象，所以property屬性會出現在SubType.prototype中，但是這個property相對于instance(SubType的一個實例)卻又是一個原型屬性，所以如果將subproperty換成property的話，在return this.property時，優先找到實例屬性中有這么一個屬性，就會返回實例屬性。
此外這里SubType.prototype.constructor 被重寫了，instance.constructor指向了SuperType 看圖
instance.getSuperValue() 這個搜索的過程
1) 搜索實例
2) 搜索SubType.prototype
3) 搜索SuperType.prototype
搜索總是一步步向前到原型鏈末端停止(Object)

GPU云服務器云服務器原型繼承原型鏈繼承 js原型鏈的繼承 javascript原型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85996.html

理解JavaScript的核心知識點：原型

摘要：首先，需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考，面向對象編程是其一種思維方式，與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者（包括本人）低估甚至忽視了，這是因為絕大多數人沒有想要深刻理解這個機制的內涵，以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...

iKcamp 2019-08-23 18:34 評論0 收藏0
白話解釋 Javascript 原型繼承(prototype inheritance)

摘要：我們有了構造函數之后，第二步開始使用它構造一個函數。來個例子這種方式很簡單也很直接，你在構造函數的原型上定義方法，那么用該構造函數實例化出來的對象都可以通過原型繼承鏈訪問到定義在構造函數原型上的方法。來源: 個人博客白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承? 學過面向對象的同學們是否還記得，老師整天掛在嘴邊的面向對象三大特...

kid143 2019-08-21 15:09 評論0 收藏0
徹底搞懂JavaScript中的繼承

摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構造函數繼承，在中是一種關鍵的實現的繼承方法，相信你已經很好的掌握了。你應該知道，JavaScript是一門基于原型鏈的語言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關。甚至可以說，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。一、構造函數，原型屬性與實例對象要搞清楚如何在JavaScript中實現繼承，...

_ivan 2019-08-21 17:48 評論0 收藏0
[譯] 為什么原型繼承很重要

摘要：使用構造函數的原型繼承相比使用原型的原型繼承更加復雜，我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的，使用構造函數的原型繼承像下面這樣當然，構造函數的方式更簡單。五天之前我寫了一個關于ES6標準中Class的文章。在里面我介紹了如何用現有的Javascript來模擬類并且介紹了ES6中類的用法，其實它只是一個語法糖。感謝Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 評論0 收藏0
JavaScript 的繼承方式及優缺點

摘要：繼承簡介在的中的面向對象編程，繼承是給構造函數之間建立關系非常重要的方式，根據原型鏈的特點，其實繼承就是更改原本默認的原型鏈，形成新的原型鏈的過程。 showImg(https://segmentfault.com/img/remote/1460000018998684); 閱讀原文前言 JavaScript 原本不是純粹的 OOP 語言，因為在 ES5 規范中沒有類的概念，在 ...

nanchen2251 2019-08-23 12:18 評論0 收藏0
Javascript 設計模式讀書筆記(三)——繼承

摘要：的繼承方式屬于原型式繼承，非常靈活。當使用關鍵字執行類的構造函數時，系統首先創建一個新對象，這個對象會繼承自構造函數的原型對象新對象的原型就是構造函數的屬性。也就是說，構造函數用來對生成的新對象進行一些處理，使這個新對象具有某些特定的屬性。繼承這個東西在Javascript中尤其復雜，我掌握得也不好，找工作面試的時候在這個問題上栽過跟頭。Javascript的繼承方式屬于原型式繼承，...

cangck_X 2019-08-21 12:16 評論0 收藏0