JavaScript 之面向對象 [ 繼承 ]

dockerclub 發布于2019-08-26 12:15 / 1975人閱讀

摘要：繼承描述在一個構造函數或對象中定義的屬性或方法，可以在另一個構造函數或對象中直接使用，而不需要在去重新定義原型鏈一個構造函數或對象的原型指向另一個構造函數或對象，以此類推形成一條鏈狀結構，這種效果被稱為原型鏈這種原型鏈也可以稱為繼承定義第一

繼承描述

在一個構造函數或對象中定義的屬性或方法，可以在另一個構造函數或對象中直接使用，而不需要在去重新定義

原型鏈

一個構造函數或對象的原型指向另一個構造函數或對象，以此類推形成一條鏈狀結構，這種效果被稱為原型鏈

這種原型鏈也可以稱為繼承

/* 定義第一個構造函數 */
function A(){
    this.a = "a";
}
/* 創建對象 */
var a = new A();

/* 定義第二個構造函數 */
function B(){
    this.b = "b";
}
/* 將B的原型指向對象a */
B.prototype = a;
/* 創建對象 */
var b = new B();

console.log( b.b );// 顯示 b
console.log( b.a );// 顯示 a

/* 定義第三個構造函數 */
function C(){
    this.c = "c";
}
/* 將C的原型指向對象b */
C.prototype = b;
/* 創建對象 */
var c = new C();

console.log( c.c );// 顯示 c
console.log( c.b );// 顯示 b
console.log( c.a );// 顯示 a

只繼承于原型

一個構造函數的原型指向另一個構造函數的原型

可以理解為原型鏈的一種優化（個人理解）

/* 定義第一個構造函數 */
function A(){
    // 將自有屬性改寫為原型屬性
    // this.a = "a";
}
A.prototype.a = "a";

/* 定義第二個構造函數 */
function B(){
    // this.b = "b";
}

/* 將B的原型指向A的原型 */
B.prototype = A.prototype;
/*
    將B的自有屬性改寫成原型屬性
     * 要先去執行原型的指向
     * 在去改寫屬性
     * 如果代碼的執行順序反過來會變成對屬性的重新賦值
 */
B.prototype.b = "b";

/* 定義第三個構造函數 */
function C(){
    this.c = "c";
}
/* 將C的原型指向B的原型 */
C.prototype = B.prototype;
/* 創建對象 */
var c = new C();
console.log(c.c);// 顯示 c
console.log(c.b);// 顯示 b
console.log(c.a);// 顯示 a

原型式繼承

定義一個函數，在該函數中創建一個構造函數，再將構造函數創建的對象返回，用于實現繼承

/* 定義一個函數 */
function fun( obj, values ) {
    /* 定義一個構造函數 */
    function Fn() {
        /* 遍歷構造函數的屬性和方法 */
        for ( var key in values ) {
            this[key] = values[key];
        }
    }
    /* 將函數的參數當做構造函數的原型 */
    Fn.prototype = obj;
    /* 將構造函數創建的對象做為函數的返回值 */
    return new Fn();
}
/* 定義一個對象 */
var obj = {
    name : "唐三"
}
/* 調用函數 - 將構造函數的自有屬性或方法以參數傳入 */
var f = fun( obj, {
    nian : 20,
    menpai : function () {
        console.log( "唐門" );
    }
} );
/* 調用屬性和方法 */
console.log( f.name );// 顯示 唐三
console.log( f.nian );// 顯示 20
f.menpai();// 顯示 唐門

Object.create()方法

使用Object.create()方法也可以實現繼承

/* 定義一個對象 */
var obj1 = {
    name : "融念冰"
}
var s = Object.create( obj1, {
    /* 定義屬性或方法時，值需要以對象的形式表示 */
    nian : {
        value : 20
    }
} );
/* 調用屬性 */
console.log( s.name );// 顯示 融念冰
console.log( s.nian );// 顯示 20

借助構造函數

可用過在子級的構造函數中調用父級的構造函數，來實現繼承效果

/* 定義父級構造函數 */
function Fun() {
    /* 這里的this指向調用的參數 */
    this.fuji = "哈哈哈";
}

/* 定義子級構造函數 */
function Fn() {
    /* 在子級構造函數中調用父級構造函數中的屬性 */
    Fun.apply( this );// 這里的this指向當前構造函數的對象（構造函數Fn）
    /* 這里的this表示當前調用屬性的對象 */
    this.ziji = "呀呀呀";
}
/* 創建子級對象 */
var ziji = new Fn();
console.log( ziji );// 顯示 Fn { fuji: "哈哈哈", ziji: "呀呀呀" }

組合式繼承

將原型式繼承和借助構造函數式繼承有效的結合在一起

分開繼承自有屬性和原型屬性

/* 定義父級構造函數 */
function Fun() {
    /* 這里的this指向調用的參數 */
    this.name = "唐三";
}
/* 添加原型屬性 */
Fun.prototype.nian = 20;

/* 定義子級構造函數 */
function Fn() {
    /* 在子級構造函數中調用父級構造函數中的屬性 - 繼承父級的自有屬性 */
    Fun.apply( this );// 這里的this指向當前構造函數的對象（構造函數Fn）
    /* 這里的this表示當前調用屬性的對象 */
    this.menpai = "唐門";
}
/* 繼承父級的原型屬性 */
Fn.prototype = Fun.prototype;

/* 創建子級對象 */
var ziji = new Fn();
/* 調用屬性 */
console.log( ziji.name );// 顯示 唐三
console.log( ziji.nian );// 顯示 20
console.log( ziji.menpai );// 顯示 唐門

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

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

javascript面向對象之“多態”

摘要：之前，本質上不能算是一門面向對象的編程語言，因為它對于封裝繼承多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。所以在中出現了等關鍵字，解決了面向對象中出現了問題。 ES6之前，javascript本質上不能算是一門面向對象的編程語言，因為它對于封裝、繼承、多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...

JerryWangSAP 2019-08-23 14:11 評論0 收藏0
面向對象的JavaScript之繼承(一) 類式繼承

摘要：那你們肯定會問為什么共用，而沒有共用呢，下面就給你解釋，請看引用類型是共用的值類型是私用的。引言面向對象的編程語言都具繼承這一機制,而 JavaScript 是基于原型(Prototype)面向對象程序設計,所以它的實現方式也是基于原型(Prototype)實現的. 繼承的方式類式繼承構造函數繼承組合繼承原型式繼承寄生式繼承寄生組合式繼承 1.類式繼承 //聲明父...

forsigner 2019-08-20 14:21 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
【JavaScript】面向對象之繼承

摘要：一繼承原型式繼承定義臨時構造函數，作為參數傳入對象作為著構造函數原型，并最后返回該構造函數的實例對象定義一個臨時構造函數遍歷對象屬性和方法將函數參數作為函數的原型姜構造函數創造的對象進行返回犬夜叉借助構造函數無論是原型鏈還是原型式繼承，都有 JS(JavaScript) 一.繼承1.原型式繼承定義臨時構造函數，作為參數傳入對象作為著構造函數原型，并最后返回該構造函數的實例對象 func...

sewerganger 2019-08-26 12:16 評論0 收藏0