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. 用Rider写一个由Autofac管理资源的WebAPI应用程序

    一:步骤和上一篇创建控制台项目一样,不过这次选择的是.net core区域下的Asp.net web application,Type里选择Web API(Web API类似java里的SpringB ...

  2. Authorization Security for Mongodb

    To keep security for the mongodb server, we can create an authorized machanism. db.createUser( { use ...

  3. 虚拟机下Linux操作Ubuntu

    备忘Ubuntu虚拟机环境配置 目录 更新源修改 #支持https的下载 apt 源使用 HTTPS 以确保软件下载过程中不被篡改.因此,我们首先需要添加使用 HTTPS 传输的软件包以及 CA 证书 ...

  4. Android-Java-静态变量

    描述Person对象: package android.java.oop09; // 描述Person对象 public class Person { private String name; pri ...

  5. 说说xgboost算法

    xgboost算法最近真是越来越火,趁着这个浪头,我们在最近一次的精准营销活动中,也使用了xgboost算法对某产品签约行为进行预测和营销,取得了不错的效果.说到xgboost,不得不说它的两大优势, ...

  6. 用installshield2013 将winform程序打包成exe执行程序

    前期准备工作 1,一个已经测试通过的winform程序 2,安装好的installshield2013插件   ps:一般VS都没有安装此插件,需要自己去下载 打包步骤 1,新建一个打包程序 ps:如 ...

  7. Http Header 之 Requests Header 和 Responses Header

    在开发中,经常会遇到对网络请求添加相应的头信息,下面我们梳理一下Http Header相关的内容. 一.Requests Header Header 解释 示例 Accept 指定客户端能够接收的内容 ...

  8. React中的“双向绑定”

    概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...

  9. Shell-15--sed

  10. HTML编辑器 -- KindEditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...