JS--继承，多种继承方式

2021-10-01 11:35:46 阅读：115 来源： 互联网

标签：function console name Parent 继承 JS -- prototype log

1. 原型链继承

// -----原型链继承-----
function Parent(){
    this.name = ["原型链继承"];
}
// 原型上挂载方法
Parent.prototype.getName = function(){
    console.log(this.name);
}
function Chind(){

}
// 原型链继承
Chind.prototype = new Parent();
Chind.prototype.constructor = Chind;

let myChild1 = new Chind();
let myChild2 = new Chind();
myChild1.name[0] = "咕咕咕";
console.log(myChild1.name); //["咕咕咕"]
myChild2.getName();         //["咕咕咕"]

这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向父类型传递参数。

2. 构造函数继承

// ----构造方法继承-----
function Parent(name){
    this.name =name;
}
// 原型上挂载方法
Parent.prototype.getName = function(){
    console.log(this.name);
}
function Chind(){
    Parent.call(this,"fct");
}
let myChild1 = new Chind();
let myChild2 = new Chind();
myChild1.name = "咕咕咕";
console.log(myChild1.name); //"咕咕咕"
console.log(myChild2.name); // fct
myChild2.getName();         //报错，构造方法继承不能继承父类原型上的属性和方法

通过在子类型的函数中调用父类型的构造函数来实现的，这一种方法解决了不能向父类型传递参数的缺点，但是它存在的一个问题就是无法实现构造函数的复用，并且父类型原型定义的方法子类型也没有办法访问到。每个新实例都有父类构造函数的副本，臃肿。

3. 组合继承

function Parent(name){
    this.name = name;
}
Parent.prototype.getName = function (){
    console.log(this.name);
}
function Child(){
    Parent.call(this,"小桃子");
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

let myChild1 = new Child();
let myChild2 = new Child();
myChild1.name = "咕咕咕";
console.log(myChild1.name); // 咕咕咕
console.log(myChild2.name); // 小桃子
myChild2.getName();     // 小桃子

组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承，通过将子类型的原型设置为父类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题，但是由于我们是以父类型的实例来作为子类型的原型，所以调用了两次父类的构造函数，耗内存。

4. 原型式继承

// 原型式继承
function content(obj) {
    function Fn() { }
    Fn.prototype = obj;
    Fn.prototype.constructor = Fn;
    return new Fn();
}
function Parent(name) {
    this.name = name;
    this.hobby = ["游泳", "打游戏"];
}
Parent.prototype.getName = function () {
    console.log(this.name);
}
Parent.prototype.age = 10;
let pa = new Parent("foo");
// let pa2 = new Parent("bar");
let ch = content(pa);
ch.hobby[0] = "网球";
let ch2 = content(pa);
// let ch2 = content(pa2);
console.log(ch.name);   // foo
console.log(ch.age);    // 10
console.log(ch.hobby);    // ['网球', '打游戏']
ch.getName();   // foo
console.log(ch2.name);   // foo
console.log(ch2.age);    // 10
console.log(ch2.hobby);    // ['网球', '打游戏']
ch2.getName();   // foo

原型式继承的主要思路就是基于已有的对象来创建新的对象，实现的原理是，向函数中传入一个对象，然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型，只是对某个对象实现一种简单继承，ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点：和原型链继承类似，如果使用不同父类型，则每次都要创建不同的父类型，无法复用。

5.寄生式继承

// ----寄生式继承-----
function content(obj) {
    function Fn() { }
    Fn.prototype = obj;
    Fn.prototype.constructor = Fn;
    return new Fn();
}
function Parent(name) {
    this.name = name;
}
Parent.prototype.getName = function () {
    console.log(this.name);
}
let sup = new Parent();
function subObject(obj) {
    let sub = content(obj);
    sub.name = "fct";
    return sub;
}
let sup2 = subObject(sup);
console.log(sup2.name);	// fct
sup2.getName();//  fct

寄生式继承的思路是创建一个用于封装继承过程的函数，通过传入一个对象，然后复制一个对象的副本，然后对象进行扩展，最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承，如果这个对象不是我们的自定义类型时。缺点是没有办法实现函数的复用。

6. 寄生式组合继承

// ----寄生式组合继承-----
function Parent(name) {
    this.name = name;
}
Parent.prototype.getName = function () {
    console.log(this.name);
}
function Child() {
    Parent.call(this, "卿云");
}
Child.prototype = Object.create(Parent.prototype);//寄生
Child.prototype.constructor = Child;

Child.prototype.print = function () {
    console.log("我是child");
}

let myChild1 = new Child();
let myChild2 = new Child();
let myParent = new Parent();
myChild1.name = "咕咕咕";
console.log(myChild1.name); // 咕咕咕
console.log(myChild2.name); // 卿云
myChild2.getName();     // 卿云
myParent.getName();     //undefined

myChild1.print();   //我是child
myParent.print();   //报错：myParent.print is not a function

组合继承的缺点就是使用父类型的实例做为子类型的原型，调用多次构造函数。寄生式组合继承的方式是使用父类型的原型的副本来作为子类型的原型，这样就可避免多次调用父级构造函数。

寄生：在函数内部返回对象然后调用

组合：函数原型等于另一个实例，函数内部调用另一个构造函数

标签：function,console,name,Parent,继承,JS,--,prototype,log
来源： https://www.cnblogs.com/fuct/p/15359003.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。