javascript編程之繼承

livem 發布于2019-08-22 11:10 / 3192人閱讀

摘要：中的繼承有多少種方式去某度搜一下，說幾種的都有，看的頭暈眼花，還是云里霧里，于是就自己認真理一下，寫一篇按照自己的理解來進行的分類。

js中的繼承有多少種方式？去某度搜一下，說幾種的都有，
看的頭暈眼花，還是云里霧里，于是就自己認真理一下，寫一篇按照自己的理解來進行的分類。

JS實現繼承的核心技術點無非幾種：

 1: new 關鍵字
 2: prototype
 3: call、apply
 4: Object.create() ES5
 5: Object.assign() ES6
 6: 拷貝(深拷貝、淺拷貝)

網上有說4,5,6種的，大多是組合使用然后根據具體使用情況分類，也有阮一峰老師按照構造函數、非構造函數的分類(這個好理解些)，
這些都各有各的道理，但是都是他們的分類，不是我自己理解的分類，所以即使這次看懂了，下次難免會忘記，因此自己總結一下。

1，構造函數式繼承，new

var func=function(name){
this.name=name
};
var b=new func("b");
var c=new func("c");
b.name;//b
c.name;//c

2，原型鏈式繼承，prototype

var func=function(des){
this.des=des;
};
func.prototype.color="red";
var b=function(){
this.color=function(){
return "green"
}
return "orange"
};
b.prototype=func.prototype;//私有的des無法繼承
b()//orange
new b().color()// green
new b().color;// function(){return "green"} 私有覆蓋公有

3，call、apply

/*父*/
function Parent(add,net,no,teacher) {
 this.add = add;
 this.net = net;
 this.no = no;
 this.teacher = teacher
}
/*子*/
function Child(name,age,sex,id) {
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.id = id;
 Parent.call(this,"添加","www.google.com","1024","copy"); 
 //這個時候的Parent中的this已經被Child所代替
}
var child = new Child("都變了","18","男","2333");
child.add //添加

function Parent(add,net,no,teacher) {
 this.add = add;
 this.net = net;
 this.no = no;
 this.teacher = teacher
}
/*子類*/
function Child(name,age,sex,id) {
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.id = id;
 Parent.apply(this,["添加","www.google.com","1024","copy"]); 
 //這個時候的Parent中的this已經被Child所代替
}
var child = new Child("都變了","18","男","2333");
child.add //添加

4，Object.create() ES5支持

var func=function(des){
this.des=des || "empty"
};
func.prototype.getDes=function(){
 return this.des
}

var b=function(){}
b.prototype=Object.create(new func("哈哈哈"));
//此處new func("哈哈哈") 用JSON對象替代可能會比較好理解，不過不修改也是有原因的
new b("Dobie").getDes()// 哈哈哈

5: Object.assign() ES6支持

var func=function(des){
this.des=des || "empty"
};
func.prototype.getDes=function(){
 return this.des
}

var b=function(){}
b.prototype=Object.assign(new func("哈哈哈"));
//此處new func("哈哈哈") 用JSON對象替代可能會比較好理解
new b("Dobie").getDes()// 哈哈哈

6: 拷貝(深拷貝、淺拷貝)

這個去某度搜一下就可以，暫時留坑，原理如標題名，就是循環復制一份出來，
區別是淺拷貝只拷貝引用（推薦了解 javascript 堆和棧，又是一個坑），
修改時會影響到父類，深拷貝則是完全多帶帶開辟新的存儲地址，不會互相影響

云服務器 GPU云服務器 javascript繼承 javascript繼承方法 Javascript實現繼承 javascript類的繼承

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

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

每個 JavaScript 工程師都應當知道的 10 個面試題

摘要：所支持的面向對象編程包括原型繼承。發明于年的就是首批支持函數式編程的語言之一，而演算則可以說是孕育了這門語言。即使在今天，這個家族的編程語言應用范圍依然很廣。 1. 能說出來兩種對于 JavaScript 工程師很重要的編程范式么？ JavaScript 是一門多范式（multi-paradigm）的編程語言，它既支持命令式（imperative）/面向過程（procedural）編程...

jone5679 2019-08-29 15:28 評論0 收藏0
每個 JavaScript 工程師都應當知道的 10 個面試題

摘要：所支持的面向對象編程包括原型繼承。發明于年的就是首批支持函數式編程的語言之一，而演算則可以說是孕育了這門語言。即使在今天，這個家族的編程語言應用范圍依然很廣。 1. 能說出來兩種對于 JavaScript 工程師很重要的編程范式么？ JavaScript 是一門多范式（multi-paradigm）的編程語言，它既支持命令式（imperative）/面向過程（procedural）編程...

YorkChen 2019-08-22 17:27 評論0 收藏0
每個 JavaScript 工程師都應當知道的 10 個面試題

摘要：所支持的面向對象編程包括原型繼承。發明于年的就是首批支持函數式編程的語言之一，而演算則可以說是孕育了這門語言。即使在今天，這個家族的編程語言應用范圍依然很廣。 1. 能說出來兩種對于 JavaScript 工程師很重要的編程范式么？ JavaScript 是一門多范式（multi-paradigm）的編程語言，它既支持命令式（imperative）/面向過程（procedural）編程...

Gilbertat 2019-08-02 10:30 評論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