javascript编程之继承

livem 发布于2019-08-22 11:10 / 3033人阅读

摘要：中的继承有多少种方式去某度搜一下，说几种的都有，看的头晕眼花，还是云里雾里，于是就自己认真理一下，写一篇按照自己的理解来进行的分类。

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 堆和栈，又是一个坑），
修改时会影响到父类，深拷贝则是完全多带带开辟新的存储地址，不会互相影响

私有云服务器托管 javascript继承 javascript继承方法 Javascript实现继承 javascript类的继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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）编程...

Hwg 2019-08-05 13:55 评论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