Javascript中的原型繼承的一些看法與見解

princekin 發布于2019-08-21 10:37 / 1708人閱讀

摘要：按照標準，是不對外公開的，也就是說是個私有屬性，但是的引擎將他暴露了出來成為了一個共有的屬性，我們可以對外訪問和設置。這條鏈就形成了原型鏈，繼承也就通過原型鏈得以實現。

**js中的繼承，是面向對象的知識，因為js沒有類的概念，所以繼承是通過對象實現的，談到繼承，就必須說到prototype，就不得不先說下new的過程。
一個小小的列子：**

我們來看看這個new究竟做了什么？我們可以把new的過程拆分成以下三步：

<1> var p={}; 也就是說，初始化一個對象p。

<2> p.proto=Person.prototype;

<3> Person.call(p);也就是說構造p，也可以稱之為初始化p。

關鍵在于第二步，我們來證明一下：

alert(p.__proto__ === Person.prototype);

這段代碼會返回true。說明我們步驟2的正確。

那么proto是什么？我們在這里簡單地說下。每個對象都會在其內部初始化一個屬性，就是proto，當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那么他就會去proto里找這個屬性，這個proto又會有自己的proto，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。

按照標準，proto是不對外公開的，也就是說是個私有屬性，但是Firefox的引擎將他暴露了出來成為了一個共有的屬性，我們可以對外訪問和設置。

這段代碼很簡單，相信每個人都這樣寫過，那就讓我們看下為什么p可以訪問Person的Say。

首先var p=new Person()；可以得出p.proto=Person.prototype。那么當我們調用p.Say()時，首先p中沒有Say這個屬性，于是，他就需要到他的proto中去找，也就是Person.prototype，而我們在上面定義了 Person.prototype.Say=function(){}; 于是，就找到了這個方法。

下面我們再看一下有點饒人的列子。

function tiger(){
   this.bark=function(){
   alert("我會咬人");
   };
};
//這里先定義一個老虎方法


function cat(){
  this.climb=function(){
   alert("我會爬樹");
};
};

//定義一個貓方法


//怎么通過繼承讓老虎也學會爬樹？下面開始繼承。

tiger.prototype=new cat();
var hnhu=new tiger();

hnhu.climb();
hnhu.valueof();

//是不是很神奇，老虎也會爬樹啦，嘿嘿

結合上面的概念，我分析一下具體的繼承過程，首先new一個tiger對象，有hnhu.proto=tiger.prototype,有因為tiger.prototype=new cat();
所以tiger.prototype.proto=cat.prototype。至此繼承已經付出水面，轉化一下得到：

hnhu.proto=tiger.prototype
hnhu.proto.proto=cat.prototype

好，算清楚了之后我們來看上面的結果,hnhu.climb()。由于hnhu沒有climb這個屬性，于是去hnhu.proto，也就是 tiger.prototype中去找，由于tiger.prototype中也沒有climb，那就去hnhu.proto.proto，也就是cat.prototype中去找，于是就找到了alert(“我會爬樹”);的方法。

尋找valueof()也都是同樣的道理。這條鏈就形成了原型鏈，繼承也就通過原型鏈得以實現。

以上代碼圖示：

原型和原型鏈就是這樣，跟作用域和作用域鏈類似，需要慢慢品味其中的精華。

掌握了在來實際用一下把，企鵝的一道繼承面試題，大概意思是一只狗剛開始會嗚嗚的叫，然后發生某種變異，叫聲變為變異。要求用原型繼承實現上述過程

function dog(){
    this.fark=function(){
        alert("嗚嗚");
    };
};

function peter(){
    this.money=function(){
        alert("我是有錢狗");
    };
};

peter.prototype=new dog();
peter.prototype.bark=function(){
    alert("變異");
};
var tz=new peter();
tz.bark();
tz.fark();

你甚至可以在Object.prototype上增加一些新屬性，添加上之后不管是不是變異狗都具有這項屬性，因為Object處于原型鏈的倒數第二層，上面的方法都會繼承它的屬性,但是這樣有一定的問題，所有的狗都具有這個原型鏈中的方法了。

GPU云服務器云服務器 js原型鏈的繼承原型繼承 vps日常維護中的一些要點總結原型鏈繼承

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

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

JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
7個 Javascript 面試題及回答策略

摘要：使用異步編程，有一個事件循環。它作為面向對象編程的替代方案，其中應用狀態通常與對象中的方法搭配并共享。在用面向對象編程時遇到不同的組件競爭相同的資源的時候，更是如此。翻譯：瘋狂的技術宅原文：https://www.indeed.com/hire/i... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章不管你是面試官還是求職者，里面...

李義 2019-08-23 15:40 評論0 收藏0
js設計模式(一)-單例模式

摘要：雖然是弱類型的語言，但是也有構造函數和實例。也就是說，我們只在第一次調用構造函數時創建新對象，之后調用返回時返回該對象即可。而我不認為這是一個單例模式的原因如下我覺得既然兩次調用同一個構造函數，返回的不是同一個對象，那不就不能成為單例模式。寫在前面（度過一陣的繁忙期，又可以愉快的開始學習新知識了，一年來技術棧切來切去，卻總覺得js都還沒學完-_-）本文主要圍繞js的設計模式進行展...

AlexTuan 2019-08-22 18:17 評論0 收藏0
詳解js中的繼承（一）

摘要：構造函數，實例構造函數，是用來創建對象的函數，本質上也是函數。這里剛好解釋一下時，說到的，可以通過實例的訪問構造函數，但是本質上是原型對象的屬性。前言最近在學vue，到周末終于有空寫一些東西了（想想又能騙贊，就有點小激動！）。在javascript基礎中，除了閉包之外，繼承也是一個難點。因為考慮到篇幅較長，所以打算分成兩個部分來寫。同樣基于《javascript高級程序設計》，做一...

Object 2019-08-20 15:12 評論0 收藏0
繼承的實現方式及原型概述 | JavaScript 隨筆

摘要：每一個對象直接量都是的子類，即構造函數中的構造函數與普通函數并沒有什么兩樣，只不過在調用時，前面加上了關鍵字，就當成是構造函數了。由于沒有傳入變量，在調用的構造函數時，會出錯這個問題可以通過一個空對象來解決改自。 showImg(https://segmentfault.com/img/bVmNZj); 對于 OO 語言，有一句話叫Everything is object，雖然 Ja...

chenjiang3 2019-08-22 10:57 評論0 收藏0