js中的继承

JS继承

原型链

  • 概念 
  1. 了解构造,实例,原型之间的关系,构造和实例的prototype指向原型,原型的constructor指向构造
  2. 子类需要重复利用父类的方法和属性
  3. 将子类构造的prototype指向父类的一个实例,子类便可以通过这个实例来访问父类的属性和方法
  4. 将此关系层层递进就形成了原型链
  • 实现
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();

换成

inherit(Sub,Super);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值