Js继承

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

/**
    声明一个基础父类
*/
function Hero(name,skill){
    this.name = name?name:'';
    this.skill = skill?skill:'';
}
Hero.prototype.sayHello = function(){
    console.log(this.name + ";" + this.skill);
}

//类静态常量
Hero.type = "I'm Hero";
//类静态方法
Hero.doSomething = function(){
    console.log('doSomething');
}

子类的定义

1. 使用prototype继承

优缺点

  • 该方法能继承父类的属性,方法
  • 若父类构造器有参数,无法向父构造器传参数·
  • 若父类原型进行了修改会影响到子类实例
  • 构造函数的静态常量不能继承到

实现方法:

  • 把父类的实例付给子类的原型 Children.prototype = new Parent();
  • 要添加 Children.prototype.constructor = Children语句 使 构造函数 等于 原型的constructor
function CNHero(era){
    this.era = era;
}

CNHero.prototype = new Hero();
//使构造函数 等于 原型的constructor
CNHero.prototype.constructor = CNHero;

//类静态常量/方法不会继承 需要自己声明
CNHero.type = "I'm CNHero";

var cnHero = new CNHero('三国时代');

//以下属性均是来自父类的(__poro__)
cnHero.name;// =>''   继承了父类的属性
cnHero.skill;// =>''  

//给该属性设值,该属性会在实例下面创建,不会改变__poro__下的值
cnHero.name = 'CNHero:诸葛亮';
cnHero.skill = '东风计';

cnHero.sayHello();//=>诸葛亮;东风计;I'm CNHero

//若父类原型进行了修改会影响到子类实例 与原来父类的原型链相互影响 CNHero - > new Hero - > Hero.prototype
cnHero.change;//=>undefined
Hero.prototype.change = 'change';
cnHero.change;//=>change

2. 使用apply,call继承(构造器继承)

  • 在构造函数中调用父类的构造函数(创建子类就能够传入需要的属性)
  • 该方法能继承 父类的属性(即父类构造器里面的方法,属性)
  • 不能继承父类的原型方法,原型属性
  • 相当于把父类的属性方法拷贝到子类(消耗会变大)
  • 构造函数的静态常量不能继承到
function CNHero(name,skill,era){
    Hero.call(this,name,skill); // <=>Hero.apply(this,[]);
    this.era = era;
}
//类静态常量/方法不会继承 需要自己声明
CNHero.type = "I'm CNHero";
var hero = new CNHero('诸葛亮','72计','三国时代');
console.log(hero.type);     //=>I'm Hero

try{
    hero.sayHello();    //=>继承不了父类原型的方法
}catch(e){
    console.log(e);     //=> hero.sayHello is not a function
}
    

3.prototype,call/apply组合使用 (组合继承)

  • 该方法能继承 父类的属性,方法
  • 可调用父类的构造函数
  • 会初始化父类两次 ,出现属性重复(子类以及原型有重复属性)
  • 构造函数的静态常量不能继承到
//1.使用call方法调用父类构造函数
function CNHero(name,skill,era){
    Hero.call(this,name,skill); // <=>Hero.apply(this,[]);
    this.era = era;
}

//改变prototype的指向
CNHero.prototype = new Hero();
//使 构造函数 等于 原型的constructor
CNHero.prototype.constructor = CNHero;
//类静态常量/方法不会继承 需要自己声明
CNHero.type = "I'm CNHero";
var hero = new CNHero('诸葛亮','东风计');

hero.sayHello();        //=>诸葛亮;东风计;I'm CNHero

4. 寄生继承

  • 组合继承的改进方法,可以避免属性重复的问题
  • 构造函数的静态常量不能继承到
function CNHero(name,skill,era){
    Hero.call(this,name,skill); // <=>Hero.apply(this,[name,skill]);
    this.era = era;
}

//闭包,不影响外面的执行
(function(){
    // 创建一个间接类 并 将父类的原型赋值给间接类 这样能够避免将父类的属性添加到子类
    var Super = function(){};
    Super.prototype = Hero.prototype;
    //将实例作为子类的原型
    CNHero.prototype = new Super();
}());

//使 构造函数 等于 原型的constructor
CNHero.prototype.constructor = CNHero;
//类静态常量/方法不会继承 需要自己声明
CNHero.type = "I'm CNHero";

var hero = new CNHero('诸葛亮','东风计','三国时代');

hero.sayHello();        //=>诸葛亮;东风计;I'm CNHero

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类继承

    和其他功能一样,ECMAScript 实现继承的方式不止一种.这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的.这意味着所有的继承细节并非完全由解释程序处理.作为开发者 ...

  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. 【持久化框架】Mybatis简介与原理

    从这篇博文开始我们学习一下Mybatis,希望大家提出宝贵的建议. 什么是Mybatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache softwar ...

  2. cocoapods安装和使用常见问题及解决方案

    cocopods安装后pod install出现以下错误 /usr/local/Cellar/ruby/2.4.1_1/lib/ruby/2.4.0/rubygems.rb:270:in find_s ...

  3. java虚拟机学习-深入理解JVM(1)

    1   Java技术与Java虚拟机 说起Java,人们首先想到的是Java编程语言,然而事实上,Java是一种技术,它由四方面组成: Java编程语言.Java类文件格式.Java虚拟机和Java应 ...

  4. slideToggle+slideup实现手机端折叠菜单效果

    折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...

  5. 【js实例】js中的5种基本数据类型和9种操作符

    js中的5中基本数据类型 js标识符 第一个字符必须为字母,下划线,或美元符 其他字符可以是字母,下划线,美元符,数字 js标识符区分大小写 标识符不能使关键字和保留字 关键字: break do i ...

  6. JavaSE(一) IO类层次关系和各种IO流的用法总结

    今天把IO流的这一知点进行一下总结,因为在之前使用io流的时候,就只知道几个重点常用的IO类,比如FileInputStream,BufferedInputStream(缓冲流)等等,但是不知道它处于 ...

  7. 生成简单的php验证码

    之前发表过,但是上面只是一个截图,不便于大家复制和使用,所以在这重新发表一遍. <?php //生成验证码图片 Header("Content-type: image/JPEG&quo ...

  8. 2.Node.js access_token的获取、存储及更新

    文章目录:         1.Node.js 接入微信公众平台开发         2.Node.js access_token的获取.存储及更新 一.写在前面的话   上一篇文章中,我们使用 No ...

  9. 前端向后台的华丽转身 — PHP基础篇

    这一次,本K带大家来看一下关于PHP中数组.字符串的一些注意事项和函数(方法). 一.PHP中的数组 (一)PHP中的数组简介 数组类型是PHP两种复合数据类型之一.根据下标的不同,可以将PHP中的数 ...

  10. WPF界面XAML中的if……else……

    xaml本身并不支持if--else--,要用Converter替代if--else--来实现我们想要的效果,知者请速离开,不要浪费时间   需求:按照Window的WindowState来决定Gri ...