js中的继承知识详解

企鹅博客
19502
文章
0
评论
2020年2月29日20:54:20 评论 30 views 2840字阅读9分28秒

本文我们主要和大家分享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);

相关推荐:

JS中的继承方式实例详解

JS中的继承方式有哪些?

详细解读js中的继承机制

以上就是js中的继承知识详解的详细内容,更多请关注php教程其它相关文章!

继续阅读
  • 版权声明: 发表于 2020年2月29日20:54:20
  • 转载注明:https://www.qieseo.com/397636.html
Angular2模块懒加载实例详解 js教程

Angular2模块懒加载实例详解

本文主要介绍了浅谈Angular2 模块懒加载的方法,小编觉得挺不错的,现在分享给大家,希望能帮助到大家。 当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经...
不使用router-link实现页面跳转 js教程

不使用router-link实现页面跳转

这次给大家带来不使用router-link实现页面跳转,不使用router-link实现页面跳转的注意事项有哪些,下面就是实战案例,一起来看一下。 1、给父页面跳转的地方设置事件 //原来的页面上展示...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: