JS中继承方式的实现有多种方法,下面是比较推荐的方法,其它继承方式可做了解:

function object(o) {
function F() {}
F.prototype = o;
return new F();
} function inheritPrototype(subType, superType) {
var newObj = object(superType.prototype);
newObj.constructor = subType;
subType.prototype = newObj;
} function People() {
this.cls = 'people';
} People.prototype.say = function(name) {
name = name || this.cls;
console.log('My class is '+ name);
} function Student() {
People.call(this);
this.type = 'student';
} inheritPrototype(Student, People); Student.prototype.goToSchool = function() {
console.log('I go to school every day.');
} // 测试
var stu = new Student(); console.log('class: ' + stu.cls); // class: people
console.log('type: ' + stu.type); // type: student
stu.say(); // My class is people
stu.goToSchool (); // I go to school every day.

其实,javascript 已经提供了更简单的实现方法,没必要在这造轮子,而且方法不完善,MDN 例子:

// Shape - 父类(superclass)
function Shape() {
this.x = 0;
this.y = 0;
} // 父类的方法
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
}; // Rectangle - 子类(subclass)
function Rectangle() {
Shape.call(this); // call super constructor.
} // 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle; var rect = new Rectangle(); console.log('Is rect an instance of Rectangle?',
rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

如果你希望能继承到多个对象,则可以使用混入的方式:

function MyClass() {
SuperClass.call(this);
OtherSuperClass.call(this);
} // 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass; MyClass.prototype.myMethod = function() {
// do a thing
};

JS继承 实现方式的更多相关文章

  1. js继承的方式及其优缺点

    js继承方法 前因:ECMAScript不支持接口继承,只支持实现继承 一.原型链 概念:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针,让 ...

  2. js继承的方式

    深入理解继承的实现方式不仅仅有利于自己去造轮子,封装插件,更有利于我们去阅读一些框架的源码, 以下记录几种常见的继承方式 1. 原型链实现继承 function Father(){ this.name ...

  3. js 继承的方式

    //定义object的继承方法 Object.extend = function(destination, source) { for(property in source) { destinatio ...

  4. js面向对象编程(第2版)——js继承多种方式

    附带书籍地址: js面向对象编程(第2版)

  5. JS继承的原理、方式和应用

    概要: 一.继承的原理 二.继承的几种方式 三.继承的应用场景 什么是继承? 继承:子类可以使用父类的所有功能,并且对这些功能进行扩展.继承的过程,就是从一般到特殊的过程.要了解JS继承必须首先要了解 ...

  6. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  7. JS继承以及继承的几种实现方式总结

    传统面向对象语言:继承是类与类之间的关系. 而在js中由于es6之前没有类的概念,所以继承是对象与对象之间的关系. 在js中,继承就是指使一个对象有权去访问另一个对象的能力. 比如:比如对象a能够访问 ...

  8. js 继承的几种方式

    JS继承的实现方式: 既然要实现继承,那么首先我们得有一个父类,代码如下: function Animal(name) { // 属性 this.name = name || '小白'; // 实例方 ...

  9. js对象的几种创建方式和js实现继承的方式[转]

    一.js对象的创建方式 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); ...

随机推荐

  1. ab工具进行压力测试

    简介与安装 ab:Apache Benchmark,只要我们安装了Apache,就能够在Apache的安装目录中找到它. yum | apt 安装的Apache  ab的目录一般为/usr/bin 也 ...

  2. 异常检测算法的Octave仿真

    在基于高斯分布的异常检测算法一文中,详细给出了异常检测算法的原理及其公式,本文为该算法的Octave仿真.实例为,根据训练样例(一组网络服务器)的吞吐量(Throughput)和延迟时间(Latenc ...

  3. C++学习笔记(一)--基础

    1.遵循标准C++,主函数类型为int,成功返回值为0,异常返回默认为-1. 2.使用系统函数库,必须加上 using namespace std,因为C++的标准库函数是在命名空间std中: 3.输 ...

  4. mybatis开发注意事项:字段名称以及表名

    在使用mybatis开发中,数据库设计的时候字段名称最好不要带下划线,推荐使用驼峰命名法 数据表的名称第一个字母大写

  5. CSS的置换和非置换元素

    一个来自面试的坑. 面试的时候考官先问了行内元素和块级元素的区别,这个不难理解.然后一脚就踩进了,置换元素的坑.例如img就是行内置换元素,这种行内元素是可以设置宽高的. 什么是置换元素 一个内容不受 ...

  6. uploadify多图片和文件上传网站应用

    先要下载压缩包 www.uploadify.com/wp-content/uploads/files/uploadify.zip 1,模板文件引用 <!--引用jquery uploady*}- ...

  7. CodeForces 219D Choosing Capital for Treeland (树形DP)经典

    <题目链接> 题目大意: 给定一个有向树,现在要你从这颗树上选一个点,使得从这个点出发,到达树上其它所有点所需翻转的边数最小,输出最少需要翻转的边数,并且将这些符合条件的点输出. 解题分析 ...

  8. spring 配置属性细节

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/qilixiang012/article/details/28233811 概要(红色为上一篇所讲,蓝 ...

  9. JS的video获取时长,出现问题汇总

    <video id="my_video_1" controls="controls" style=" width: 700px; height: ...

  10. shell脚本-巡检内存使用率

    #!/bin/bash # by dreamer Q # 巡检内存脚本 #总内存大小 mem_total=`free -m | sed -n '2p' |awk '{print $2}'` #已使用内 ...