es6 class extends
function MathHandle(x, y){
this.x = x;
this.y = y;
}
MathHandle.prototype.add = function () {
return this.x + this.y;
}
var m = new MathHandle(1,2);
console.log(m.add());
第一块是构造函数,第二块是构造函数的一个拓展,下面是将构造函数实例化,最后调用add方法,因为这个原型扩展之后,每个实例都会有这个方法。
class MathHandle{
constructor(x,y){
this.x = x;
this.y = y;
}
add() {
return this.x + this.y;
}
}
const m = new MathHandle(1,2);
console.log(m.add());
constructor是一个构造器,每个class都有一个constructor。es6中,用class来专门做构造函数的语法其实是有点模拟java,c#的语法,让初学者或后台熟悉一点。下面的add相当于在原型中定义add方法。这里定义class的方法跟js构造函数相比,更加简单。constructor在new的时候立马会执行。
typeof MathHandle // "function"
MathHandle === MathHandle.prototype.constructor // true
m.__proto__ === MathHandle.prototype // true
js的原理知识,能对上class的原理知识,一摸一样
// 动物
function Animal() {
this.eat = function(){
console.log('animal eat')
}
}
// 狗
function Dog() {
this.bark = function () {
console.log('dog bark');
}
}
// 绑定原型,实现继承
Dog.prototype = new Animal();
// 哈士奇
var hashiqi = new Dog();
继承就是抽象到具象的过程,从高级到低级的一个关系,首先有一个animal,动物是抽象的,然后是狗,再往下是哈士奇,哈士奇是一种狗。每个animal都有eat,动物都要吃。dog有个bark,叫。这两个构造函数比较简单,就是两个函数,里面有个属性。重点是我们把Dog的显示原型赋值成new Animal()。new Animal是出实话一个animal的实例。这样就实现了继承。再去new Dog(),肯定有bark的方法,执行了赋值之后,也有了eat的方法。
class Animal{
constructor(name){
this.name = name;
}
eat() {
console.log(this.name + ' eat')
}
}
class Dog extends Animal {
constructor(name) {
super(name);
this.name = name;
}
bark() {
console.log(this.name + ' bark');
}
}
const dog = new Dog('哈士奇');
dog.bark();
dog.eat();
Dog.prototype = new Animal() 相当于 class Dog extends Animal。后面跟java非常相似。这样已经继承了原型方法,不用再写.prototype这种。。super(name),也就是说在执行Dog的构造器的时候,我先把Animal的构造器执行一遍。Animal这个构造函数对应 class Animal。Dog这个构造函数,对应 class Dog。
es6 class extends的更多相关文章
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- JavaScript面向对象轻松入门之继承(demo by ES5、ES6)
继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实 ...
- ES6躬行记(21)——类的继承
ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父 ...
- es6入门总结
let和const命令 let命令 循环体的let变量只对花括号作用域可见,花括号外不可见 循环体的语句部分是一个父作用域,而循环体内部是一个单独的子作用域 let声明的变量不存在变量提升,未声明的使 ...
- 粗看ES6之面向对象写法
标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...
- ES6十大常用特性
. Default Parameters(默认参数) in ES6 2. Arrow Functions (箭头函数)in ES6 3. Block-Scoped Constructs ...
- Rollup 配置 es6 环境
前 为了可以使用新型的语法,顺便在兼容下老的浏览器,所以需要自己搭建个环境,目前我个人推崇使用 rollup,主要喜欢它的 tree-shake,打包出来的代码真的很简洁. 配置 rollup.con ...
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- es5继承和es6类和继承
es6新增关键字class,代表类,其实相当于代替了es5的构造函数 通过构造函数可以创建一个对象实例,那么通过class也可以创建一个对象实列 /* es5 创建一个person 构造函数 */ f ...
随机推荐
- vscode springboot logback 日志输出到不同文件
参照了:https://blog.csdn.net/appleyk/article/details/78717388# 在src\main\resources中新建一个logback-boot.xml ...
- 如何使用threejs实现第一人称视角的移动
在数据可视化领域利用webgl来创建三维场景或VR已经越来越普遍,各种开发框架也应运而生.今天我们就通过最基本的threejs来完成第一人称视角的场景巡检功能.如果你是一位threejs的初学者或正打 ...
- nnexus3 破解密码
主要步骤如下: 1.停服 2.进入OrientDB控制台:java -jar /usr/local/nexus/lib/support/nexus-orient-console.jar 3.在控制台执 ...
- [C++] 例题 2.7.1 用栈实现简易计算器
目录 前置技能 栈 (stack) 中缀表达式 (InfixExp) 与后缀表达式 (PostfixExp) 需求描述 概要设计 函数详细设计 中缀转后缀 infix_to_postfix(strin ...
- 记一次构建SaaS平台项目失败后的反思(收集的客户需求太少,且没有区分重点,闭门造车。技术演变要渐进)
记一次构建SaaS平台项目失败后的反思 前言: 笔者从2017年起开始着手将公司现有的软件系统改造成多租户模式,以降低整个系统的运营成本.但最后这个项目以失败告终.今天,我将对这个SaaS项目是如何走 ...
- 轻松玩转Ant Design Pro一
ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件.ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的, ...
- Web Scraper 翻页——控制链接批量抓取数据(Web Scraper 高级用法)| 简易数据分析 05
这是简易数据分析系列的第 5 篇文章. 上篇文章我们爬取了豆瓣电影 TOP250 前 25 个电影的数据,今天我们就要在原来的 Web Scraper 配置上做一些小改动,让爬虫把 250 条电影数据 ...
- ESlint 格式化代码 备忘
vscode 代码格式化配置 vscode 菜单 文件->首选项->设置 --->进入扩展查找到ESlint,点击任一选项中的[在setting.json中配置],复制以下代码 { ...
- JQuery里input属性赋值,取值prop()和attr()方法?
一.赋值的时候 如果是<input type="checkbox" checked>这样的只有属性名就能生效的属性 推荐prop,即:$('input').prop(' ...
- Pandas-数据处理-基础部分
有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/11014882.html jupyter 代码 ...