0

0

js中的继承知识详解

小云云

小云云

发布时间:2018-03-28 16:23:11

|

1513人浏览过

|

来源于php中文网

原创

本文我们主要和大家分享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自己的属性的定义,

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

组合继承

用来解决方法复用的问题

android界面布局详解 中文WORD版
android界面布局详解 中文WORD版

本文档主要讲述的是android界面布局详解;在通过“Hello World!”介绍Android中的布局问题之前,不得不先介绍一下Android中的用户界面,因为布局问题也是用户界面问题之一。在一个Android应用程序中,用户界面通过View和ViewGroup对象构建。Android中有很多种Views和ViewGroups,他们都继承自View类。View对象是Android平台上表示用户界面的基本单元。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过

下载

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

然后在子类中,将子类的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中的继承机制

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号