当前位置：Gxlcms > JavaScript > js中的继承知识详解

js中的继承知识详解

时间：2021-07-01 10:21:17 帮助过：17人阅读

本文我们主要和大家分享js中的继承知识详解，主要以文字和代码的形式和大家分享，希望能帮助到大家。

了解构造，实例，原型之间的关系，构造和实例的prototype指向原型，原型的constructor指向构造
子类需要重复利用父类的方法和属性
将子类构造的prototype指向父类的一个实例，子类便可以通过这个实例来访问父类的属性和方法
将此关系层层递进就形成了原型链

实现

function Super(name) {
    this.name = "name";
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}
Super.prototype.getSuperproperty = function () {
    return this.superproperty;
}

function Sub(name) {
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();
Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

var instance = new Sub("ctc");
console.log(instance.getSuperproperty());//true
console.log(instance.getSubproperty());//false
console.log(instance.getSuperName());//ctc
console.log(instance.getSubName());//ctc

最后俩输出都是ctc的过程，当instance遇到“.”操作符时会执行 1）搜索实例，2）搜索sub.prototype ，3）搜索super.prototype。

注意的问题

默认原型object
每一个实例都是有默认的原型Object所以刚刚的super.prototype.prototype指向的是Object的prototype

定义的时候需要谨慎

//继承
Sub.prototype = new Super();

继承时重写？此时sub.prototype的constructor指向了谁？

此句一定要放在，

添加新方法和覆盖就方法代码之前

Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

缺点

父类的实例属性变成了子类的原型属性被共享;

创建子类实例的时候，无法在不影响所有实例的情况下，给父类传递参数。

借用构造函数

function Super(name) {
    this.name = name;
  
}
Super.prototype.getSuperName = function () {
    return this.name;
}


function Sub(name) {

  Super.call(this,name);

this.name = name;

}//继承Sub.prototype = new Super();Sub.prototype.getSubName = function () { return this.name;}

主要是借用了Super构造的代码，来实现sub自己的属性的定义，

但是这样写就可以让每一个实例都有自己的属性和方法，同时也就失去了方法函数的复用性

组合继承

用来解决方法复用的问题

在父类的构造函数中使用动态原型构造或者组合构造的方式，让构造函数中只有属性的赋值定义，方法的定义在原型上

然后在子类中，将子类的prototype指向一个父类的实例，子类的构造函数中借用父类的构造，这样子类每一个实例都有自己的属性，而方法却是共享的。

function Super(name) {
    this.name = name;
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this,arguments);
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();

// Sub.prototype.constructor = Sub;//如果此处未绑定，上一句重写了原型，Super的实例的constructor指向的自然是Super

Sub.prototype.getSubName = function () { return this.name;}var instance = new Sub("ctc");

原型式继承

另一种继承的实现，只是借助原型可以基于已有对象创建新对象

function object(o) {
    function F() {
    }
    F.prototype = o;
    return F;
}

理解：F是一个函数也是一个对象，其原型指向了object（）接受的o，返回的F是一个原型指向o的对象。

令：Object.creat()规范化了上述的函数，即Object.creat(o)同样实现了上述代码

寄生式继承

在原型式继承的基础之上，强化增强了这个对象

function creatAnother(o) {
    var clone = Object.create(o);
    clone.name = "ctc";
    clone.sayname = function () {
        console.log(this.name);
    }
    return clone;
}

为对象增加了属性方法等

寄生组合式继承

目的是为了解决组合继承的问题，在组合继承中有起码两次调用Super()，1. Super.call(this,arguments) 2. Sub.prototype = new Super()

其实我们只是想子类的原型继承父类的方法（一般都在父类原型上，因为不会每一个实例都有自己的方法空间）

所以我们可以用原型式继承来只将子类的原型继承父类的原型

function inherit(SubType,SuperType) {
    var prototype = Object.create(SuperType);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

将组合继承的

Sub.prototype = new Super();

换成