1. 和其他功能一样,ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。
  2. 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现。记住,所有属性和方法都是公用的,因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法,也可以覆盖超类的属性和方法。
  3. 继承的方式:
  • 对象冒充方式方式一
       /*被继承类*/
function Animal_1(name) {
this.name = name;
this.printName = function () {
console.log(this.name);
}
}
function Person_1(name,age) {
this.method1 = Animal_1;
this.method1(name);
this.age = age;
this.printAge = function () {
console.log(this.age);
}
}
var o1 = new Person_1("ysw",18);
var o2 = new Animal_1("ysw");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_1);
console.log(o1 instanceof Person_1);
console.log(o2 instanceof Animal_1);
console.log(o2 instanceof Person_1);
  • 对象冒充方式方式二:利用call方法和apply方法
	function Animal_2(name) {
this.name = name;
this.printName = function () {
console.log(this.name);
}
}
function Person_2(name,age) {
Animal_2.call(this,name);
// Animal_2.apply(this,new Array(name));
this.age = age;
this.printAge = function () {
console.log(this.age);
}
}
o1 = new Person_2("ysw",18);
o2 = new Animal_2("ysw");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_2);
console.log(o1 instanceof Person_2);
console.log(o2 instanceof Animal_2);
console.log(o2 instanceof Person_2);
  • 原型链方式
        /*被继承类*/
function Animal_3() {
}
Animal_3.prototype.name = "ysw";
Animal_3.prototype.printName = function () {
console.log(this.name);
};
function Person_3() {
}
Person_3.prototype = new Animal_3();
Person_3.prototype.age = 18;
Person_3.prototype.printAge = function () {
console.log(this.age);
};
o1 = new Person_3();
o2 = new Animal_3();
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_3);
console.log(o1 instanceof Person_3);
console.log(o2 instanceof Animal_3);
console.log(o2 instanceof Person_3);
  • 混合方式
        /*被继承类*/
function Animal_4(name) {
this.name = name;
}
Animal_4.prototype.printName = function () {
console.log(this.name);
};
function Person_4(name,age) {
Animal_4.call(this,name);
this.age = age;
}
Person_4.prototype = new Animal_4();
Person_4.prototype.printAge = function () {
console.log(this.age);
};
o1 = new Person_4("晏沈威",22);
o2 = new Animal_4("晏沈威");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_4);
console.log(o1 instanceof Person_4);
console.log(o2 instanceof Animal_4);
console.log(o2 instanceof Person_4);
  • ES6语法 class extends继承
        /*被继承类*/
class Animal_5 {
constructor(name){
this.name = name;
}
printName(){
console.log(this.name);
}
}
class Person_5 extends Animal_5{
constructor(name,age){
super(name);
this.age = age;
}
printAge() {
console.log(this.age);
};
}
o1 = new Person_5("晏沈威",22);
o2 = new Animal_5("晏沈威");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_5);
console.log(o1 instanceof Person_5);
console.log(o2 instanceof Animal_5);
console.log(o2 instanceof Person_5);

JavaScript类继承的更多相关文章

  1. JavaScript类继承, 用什么方法好

    JavaScript类继承, 用什么方法好 一个实例: 基类Car: function Car(color, year) { this.name = "car"; this.col ...

  2. Javascript类继承-机制-代码Demo【原创】

    最近看到<Javascript设计模式>,对js模拟的”继承方式“有了更深一步的了解,虽然之前也总是用到prototype.new ,但只是知其然不知所以然,现在将类继承的方法整理如下,暂 ...

  3. javascript类继承的一些实验

    其实一开始编js没怎么用过对象,一般都用func,func,func···但是用多了,感觉代码一点都不美观,还要这里包一个函数,那里包一个函数,或者一直都是函数调用,不好看,而且一些重用的都要重写的话 ...

  4. Javascript 类继承

    Js继承 JavaScript并不是真正面向对象的语言,是基于对象的,没有类的概念. 要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 /** 声明一个基础父类 ...

  5. javascript类继承系列五(其他方式继承)

    除了前面学习的三种继承外,还有另外三种:原型继承寄生继承,寄生组合继承都是以: function object(o) { function F() { } F.prototype = o; retur ...

  6. javascript类继承系列二(原型链)

    原型链是采用最主要的继承方式,原理:每一个类(构造器,js中的function)都有一个原型属性(prototype)指向一个原型对象,原型对象有一个构造器(constructor),它又指回到fun ...

  7. javascript类继承系列四(组合继承)

    原理: 结合了原型链和对象伪装各自优点的方式,基本思路是:使用原型链继承原型上的属性和方法,使用对象伪装继承实例属性,通过定义原型方法,允许函数复用,并运行每个实例拥有自己的属性 function B ...

  8. javascript类继承系列三(对象伪装)

    原理:在子类的构造器上调用超类构造器(父类构造器中的this指向子类实例),js提供了apply()和call()函数,可以实现这种调用 function baseClass() { this.col ...

  9. javascript类继承系列一

    js中没有提供类(class,抽象类,接口等高级的抽象),可以用new,但new的function的对象,构造器 但在js中可以通过function来模拟类的一些特性function fun_name ...

随机推荐

  1. 包含复杂函数的excel 并下载

    POI 版本: <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</a ...

  2. h5移动网页唤起App

    最近这个困惑了很久,不断的有一些坑,目前还有疑问关于iOS唤起无效时会出现弹框的问题,这个最后再说 1.首先可能需要判断当前浏览器的来源(目前开发的App还没有上架,所以针对腾讯出品的大家广为人知的微 ...

  3. 子div撑不开父div

    方法一:推荐 设置父div的overflow:hidden; 方法二: 父div结束前增加一个空div style=”clear:both;” .clear { clear:both; } <d ...

  4. 1.8 新特性之 Lambda Expressions

    Lambda expressions are allowed only at source level 1.8 or above The target type of this expression ...

  5. SQL Server CTE 递归查询全解 -- 转 学习

    在TSQL脚本中,也能实现递归查询,SQL Server提供CTE(Common Table Expression),只需要编写少量的代码,就能实现递归查询,本文详细介绍CTE递归调用的特性和使用示例 ...

  6. Docker构建文件

    构建文件 创建Dockerfile touch Dockerfile 编辑Dockerfile vim Dockerfile #基于java8版本构建 FROM java:8 #挂载日志目录 VOLU ...

  7. MySQL--运维内参中的binlog_summary脚本

    #!/bin/bash ##===================================================## ## 脚本出自<MySQL运维内参> ##===== ...

  8. MVC 5使用TempData Object跨视图传递数据

    经过一系列显示数据的练习:<MVC 5使用ViewData(对象)显示数据>http://www.cnblogs.com/insus/p/3377178.html<MVC 5使用Vi ...

  9. Android 富文本编辑器实现方案

    本人实现富文本编辑器的时候,总结了如下两种方案: 1. 纯 EditText 实现方案 2. 使用ScrollView作为最外层的父容器来控制展示效果 示例demo地址为:https://github ...

  10. 深入浅出TCP/IP协议

    目录 什么是网络协议? 谁来制定这个网络协议? TCI/IP协议 什么是socket? http协议属于应用层还是传输层? soap可以使用HTTP协议进行传输吗? 各层协议举例 什么是网络协议? 话 ...