Javascript 类继承
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 类继承的更多相关文章
- JavaScript类继承, 用什么方法好
JavaScript类继承, 用什么方法好 一个实例: 基类Car: function Car(color, year) { this.name = "car"; this.col ...
- Javascript类继承-机制-代码Demo【原创】
最近看到<Javascript设计模式>,对js模拟的”继承方式“有了更深一步的了解,虽然之前也总是用到prototype.new ,但只是知其然不知所以然,现在将类继承的方法整理如下,暂 ...
- javascript类继承的一些实验
其实一开始编js没怎么用过对象,一般都用func,func,func···但是用多了,感觉代码一点都不美观,还要这里包一个函数,那里包一个函数,或者一直都是函数调用,不好看,而且一些重用的都要重写的话 ...
- JavaScript类继承
和其他功能一样,ECMAScript 实现继承的方式不止一种.这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的.这意味着所有的继承细节并非完全由解释程序处理.作为开发者 ...
- javascript类继承系列五(其他方式继承)
除了前面学习的三种继承外,还有另外三种:原型继承寄生继承,寄生组合继承都是以: function object(o) { function F() { } F.prototype = o; retur ...
- javascript类继承系列二(原型链)
原型链是采用最主要的继承方式,原理:每一个类(构造器,js中的function)都有一个原型属性(prototype)指向一个原型对象,原型对象有一个构造器(constructor),它又指回到fun ...
- javascript类继承系列四(组合继承)
原理: 结合了原型链和对象伪装各自优点的方式,基本思路是:使用原型链继承原型上的属性和方法,使用对象伪装继承实例属性,通过定义原型方法,允许函数复用,并运行每个实例拥有自己的属性 function B ...
- javascript类继承系列三(对象伪装)
原理:在子类的构造器上调用超类构造器(父类构造器中的this指向子类实例),js提供了apply()和call()函数,可以实现这种调用 function baseClass() { this.col ...
- javascript类继承系列一
js中没有提供类(class,抽象类,接口等高级的抽象),可以用new,但new的function的对象,构造器 但在js中可以通过function来模拟类的一些特性function fun_name ...
随机推荐
- 【持久化框架】Mybatis简介与原理
从这篇博文开始我们学习一下Mybatis,希望大家提出宝贵的建议. 什么是Mybatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache softwar ...
- cocoapods安装和使用常见问题及解决方案
cocopods安装后pod install出现以下错误 /usr/local/Cellar/ruby/2.4.1_1/lib/ruby/2.4.0/rubygems.rb:270:in find_s ...
- java虚拟机学习-深入理解JVM(1)
1 Java技术与Java虚拟机 说起Java,人们首先想到的是Java编程语言,然而事实上,Java是一种技术,它由四方面组成: Java编程语言.Java类文件格式.Java虚拟机和Java应 ...
- slideToggle+slideup实现手机端折叠菜单效果
折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...
- 【js实例】js中的5种基本数据类型和9种操作符
js中的5中基本数据类型 js标识符 第一个字符必须为字母,下划线,或美元符 其他字符可以是字母,下划线,美元符,数字 js标识符区分大小写 标识符不能使关键字和保留字 关键字: break do i ...
- JavaSE(一) IO类层次关系和各种IO流的用法总结
今天把IO流的这一知点进行一下总结,因为在之前使用io流的时候,就只知道几个重点常用的IO类,比如FileInputStream,BufferedInputStream(缓冲流)等等,但是不知道它处于 ...
- 生成简单的php验证码
之前发表过,但是上面只是一个截图,不便于大家复制和使用,所以在这重新发表一遍. <?php //生成验证码图片 Header("Content-type: image/JPEG&quo ...
- 2.Node.js access_token的获取、存储及更新
文章目录: 1.Node.js 接入微信公众平台开发 2.Node.js access_token的获取.存储及更新 一.写在前面的话 上一篇文章中,我们使用 No ...
- 前端向后台的华丽转身 — PHP基础篇
这一次,本K带大家来看一下关于PHP中数组.字符串的一些注意事项和函数(方法). 一.PHP中的数组 (一)PHP中的数组简介 数组类型是PHP两种复合数据类型之一.根据下标的不同,可以将PHP中的数 ...
- WPF界面XAML中的if……else……
xaml本身并不支持if--else--,要用Converter替代if--else--来实现我们想要的效果,知者请速离开,不要浪费时间 需求:按照Window的WindowState来决定Gri ...