JavaScript 之面向?qū)ο?[ 繼承 ]

dockerclub 發(fā)布于2019-08-26 12:15 / 2007人閱讀

摘要：繼承描述在一個構(gòu)造函數(shù)或?qū)ο笾卸x的屬性或方法，可以在另一個構(gòu)造函數(shù)或?qū)ο笾兄苯邮褂?，而不需要在去重新定義原型鏈一個構(gòu)造函數(shù)或?qū)ο蟮脑椭赶蛄硪粋€構(gòu)造函數(shù)或?qū)ο?，以此類推形成一條鏈狀結(jié)構(gòu)，這種效果被稱為原型鏈這種原型鏈也可以稱為繼承定義第一

繼承描述

在一個構(gòu)造函數(shù)或?qū)ο笾卸x的屬性或方法，可以在另一個構(gòu)造函數(shù)或?qū)ο笾兄苯邮褂?，而不需要在去重新定義

原型鏈

一個構(gòu)造函數(shù)或?qū)ο蟮脑椭赶蛄硪粋€構(gòu)造函數(shù)或?qū)ο?，以此類推形成一條鏈狀結(jié)構(gòu)，這種效果被稱為原型鏈

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

/* 定義第一個構(gòu)造函數(shù) */
function A(){
    this.a = "a";
}
/* 創(chuàng)建對象 */
var a = new A();

/* 定義第二個構(gòu)造函數(shù) */
function B(){
    this.b = "b";
}
/* 將B的原型指向?qū)ο骯 */
B.prototype = a;
/* 創(chuàng)建對象 */
var b = new B();

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

/* 定義第三個構(gòu)造函數(shù) */
function C(){
    this.c = "c";
}
/* 將C的原型指向?qū)ο骲 */
C.prototype = b;
/* 創(chuàng)建對象 */
var c = new C();

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

只繼承于原型

一個構(gòu)造函數(shù)的原型指向另一個構(gòu)造函數(shù)的原型

可以理解為原型鏈的一種優(yōu)化（個人理解）

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

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

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

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

原型式繼承

定義一個函數(shù)，在該函數(shù)中創(chuàng)建一個構(gòu)造函數(shù)，再將構(gòu)造函數(shù)創(chuàng)建的對象返回，用于實現(xiàn)繼承

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

Object.create()方法

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

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

借助構(gòu)造函數(shù)

可用過在子級的構(gòu)造函數(shù)中調(diào)用父級的構(gòu)造函數(shù)，來實現(xiàn)繼承效果

/* 定義父級構(gòu)造函數(shù) */
function Fun() {
    /* 這里的this指向調(diào)用的參數(shù) */
    this.fuji = "哈哈哈";
}

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

組合式繼承

將原型式繼承和借助構(gòu)造函數(shù)式繼承有效的結(jié)合在一起

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108324.html

javascript面向對象之“多態(tài)”

摘要：之前，本質(zhì)上不能算是一門面向?qū)ο蟮木幊陶Z言，因為它對于封裝繼承多態(tài)這些面向?qū)ο笳Z言的特點并沒有在語言層面上提供原生的支持。所以在中出現(xiàn)了等關鍵字，解決了面向?qū)ο笾谐霈F(xiàn)了問題。 ES6之前，javascript本質(zhì)上不能算是一門面向?qū)ο蟮木幊陶Z言，因為它對于封裝、繼承、多態(tài)這些面向?qū)ο笳Z言的特點并沒有在語言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...

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

摘要：那你們肯定會問為什么共用，而沒有共用呢，下面就給你解釋，請看引用類型是共用的值類型是私用的。引言面向?qū)ο蟮木幊陶Z言都具繼承這一機制,而 JavaScript 是基于原型(Prototype)面向?qū)ο蟪绦蛟O計,所以它的實現(xiàn)方式也是基于原型(Prototype)實現(xiàn)的. 繼承的方式類式繼承構(gòu)造函數(shù)繼承組合繼承原型式繼承寄生式繼承寄生組合式繼承 1.類式繼承 //聲明父...

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

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

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

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

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

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

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

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

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