JavaScript类继承
- 和其他功能一样,ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。
- 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现。记住,所有属性和方法都是公用的,因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法,也可以覆盖超类的属性和方法。
- 继承的方式:
- 对象冒充方式方式一
/*被继承类*/
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类继承的更多相关文章
- JavaScript类继承, 用什么方法好
JavaScript类继承, 用什么方法好 一个实例: 基类Car: function Car(color, year) { this.name = "car"; this.col ...
- Javascript类继承-机制-代码Demo【原创】
最近看到<Javascript设计模式>,对js模拟的”继承方式“有了更深一步的了解,虽然之前也总是用到prototype.new ,但只是知其然不知所以然,现在将类继承的方法整理如下,暂 ...
- javascript类继承的一些实验
其实一开始编js没怎么用过对象,一般都用func,func,func···但是用多了,感觉代码一点都不美观,还要这里包一个函数,那里包一个函数,或者一直都是函数调用,不好看,而且一些重用的都要重写的话 ...
- Javascript 类继承
Js继承 JavaScript并不是真正面向对象的语言,是基于对象的,没有类的概念. 要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 /** 声明一个基础父类 ...
- 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 ...
随机推荐
- WeexSDK源码分析(iOS)
0.从工作原理谈起 Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发.云端部署到分发的整个链路.开发者首先可在本地像编写 web 页面一样编写一个 app 的界面,然后通过命令行工具将之 ...
- C# Thread、ThreadPool、Task、Invoke、BeginInvoke、async、await 汇总
本文将主要通过"同步调用"."异步调用"."异步回调"三个示例来讲解在用委托执行同一个"加法类"的时候的的区别和利弊. ...
- Nhibernate入门篇连接Sqlserver的增删查改
第一步:创建数据库 create table Emp( EmpId int primary key identity, EmpName ), EmpDate date ) 第二步:去官网下载:http ...
- Varnish实现Web站点加速
Varnish 是一款高性能的开源HTTP加速器,挪威最大的在线报纸 Verdens Gang使用3台Varnish代替了原来的12台Squid,性能比以前更好. Varnish 的作者Poul-He ...
- 用document.readyState实现网页加载进度条
概述 之前以为给网页设置加载进度条很麻烦,今天一学真是超级简单,记录下来供以后开发时参考,相信对其他人也有用. readyState 主要运用了document.readyState和nprogres ...
- struts2框架学习笔记7:struts2标签
三大标签: 1.JSP:脚本,为了替代servlet,已过时 2.JSTL:标准标签库(core.format.sql.xml),还未淘汰的只有core库 3.Struts2标签库:由Struts2开 ...
- Maven classifier 元素妙用
首先来看这么一个依赖 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json- ...
- LeetCode--No.001 Two Sum
Two Sum Total Accepted: 262258 Total Submissions: 1048169 Difficulty: Easy Given an array of integer ...
- 测试工具之RobotFramework界面基本功能使用
安装好RobotFramework后,直接在运行或者命令行中执行ride.py即可启动RF 启动完成后的界面如下: 界面很简洁,然后我们开始点击file并创建project: 接下来右键project ...
- 服务器运维 -- windows系统更换System32下文件后 重启无法进入桌面
场景描述: windows系统更换System32下文件后 重启无法进入桌面 情况1,原替换文件有备份 解决建议: 准备好该文件 情况2,原备份文件没有备份 解决建议:从相同版本的服务器上边 ...