javascript 原型继承 与class extends 继承对比
//父类 Animal
function Animal (name) {
this.name = name;
this.sleep = function () {
console.log(this.name + '正在睡觉!')
}
} //cat 是 Animal 的子类
function Cat (name, age) {
Animal.call(this, name);
//子类 Cat 新增加的 成员 age eat()
Cat.prototype.age = age;
Cat.prototype.eat = function () {
console.log(this.name + 'is cat ' + '正在吃东西' + ' my age is ' + this.age)
}
} //---------调用代码---------------------
var animal_obj = new Animal('动物');
animal_obj.sleep(); var cat_obj = new Cat('猫', 10);
cat_obj.sleep();
cat_obj.eat(); //-------------------------------------------------------class------------------------------------------------------------------
//父类 Animal
class Animal {
constructor(name) {
this.name = name;
}
sleep () {
console.log(this.name + '正在睡觉!')
}
} //cat 是 Animal 的子类
class Cat extends Animal {
//构造函数
constructor(name, age) {
super(name); //super 选调用父类构造方法
this.age = age; //子类新增属性成员 age
}
//子类新增属性成员 eat(), class定义的成员函数不须要用 this.,也不用 function
eat () {
console.log(this.name + 'is cat ' + '正在吃东西' + ' my age is ' + this.age)
}
} //---------调用代码---------------------
var animal_obj = new Animal('动物');
animal_obj.sleep(); var cat_obj = new Cat('猫', 10);
cat_obj.sleep();
cat_obj.eat();
//-------运行结果一模一样--------------------------
javascript 原型继承 与class extends 继承对比的更多相关文章
- javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承
javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...
- JavaScript原型链和继承
1.概念 JavaScript并不提供一个class的实现,在ES6中提供class关键字,但是这个只是一个语法糖,JavaScript仍然是基于原型的.JavaScript只有一种结构:对象.每个对 ...
- 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统
面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...
- 通过原型继承理解ES6 extends 如何实现继承
前言 第一次接触到 ES6 中的 class 和 extends 时,就听人说这两个关键字不过是语法糖而已.它们的本质还是 ES3 的构造函数,原型链那些东西,没有什么新鲜的,只要理解了原型链等这些概 ...
- JS原型,原型链,类,继承,class,extends,由浅到深
一.构造函数和原型 1.构造函数.静态成员和实例成员 在ES6之前,通常用一种称为构造函数的特殊函数来定义对象及其特征,然后用构造函数来创建对象.像其他面向对象的语言一样,将抽象后的属性和方法封装到对 ...
- Javascript原型继承 __proto__
Javascript继承是通过原型链继承的 原型链是依赖__proto__而不是prototype var animal = function(){}; var dog = function(){}; ...
- 深入理解javascript原型和闭包(6)——继承
为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆.而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中 ...
- 深入理解:JavaScript原型与继承
深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...
- 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象
JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...
随机推荐
- c++面向对象 之 基础 类修饰符 构造函数 友元函数
1,类和对象 定义一个类,本质上是定义一个数据类型的蓝图.这实际上并没有定义任何数据,但它定义了类的名称意味着什么,也就是说,它定义了类的对象包括了什么,以及可以在这个对象上执行哪些操作. 类定义格式 ...
- lamp与zabbix开机自启
目录 1.控制httpd脚本 2.控制zabbix_server脚本 3.控制zabbix_agentd脚本 4.服务端lamp开机自动启动 5.客户端zabbix_agentd开机自动启动 1.控制 ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- drf的序列化和反序列化
序列化器--Serializer 选项参数: max_length 最大长度 min_length 最小长度 allow_blank 是否允许为空 trim_whitespace 是否截断空白字符 m ...
- React的React.createContext()源码解析(四)
一.产生context原因 从父组件直接传值到孙子组件,而不必一层一层的通过props进行传值,相比较以前的那种传值更加的方便.简介. 二.context的两种实现方式 1.老版本(React16.x ...
- JAXB "有两个名为 "**" 的属性,类的两个属性具有相同名称 "**""解决方案
这里说的名称冲突指的是: JavaBean 属性名称与字段名称之间的名称冲突.在pojo类中的setter和getter方法会导致运行报错:Exception in thread "main ...
- Qt 解析命令行参数
#include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQuickView> ...
- 【PAT甲级】1110 Complete Binary Tree (25分)
题意: 输入一个正整数N(<=20),代表结点个数(0~N-1),接着输入N行每行包括每个结点的左右子结点,'-'表示无该子结点,输出是否是一颗完全二叉树,是的话输出最后一个子结点否则输出根节点 ...
- 大小端(MSB & LSB)
谈到字节序的问题,必然牵涉到两大CPU派系.那就是Motorola的PowerPC系列CPU和Intel的x86系列CPU.PowerPC系列采用big endian方式存储数据,而x86系列则采用l ...
- 基于jenkins自动打包并部署docker环境及PHP环境