前端培训-中级阶段(31)- Class 的基本语法、Class 的继承(2019-12-26期)

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

前言BB

ECMAScript 2015 中引入的类(Class)实际上是基于原型的继承的语法糖不是新的面向对象的继承模型。

其实我用的并不多,写写小活动啥的也用不上。
之前用来写了个小后台,ThinkJS 内部就使用的 Class 的形式。
体验了一下,然后因为写起来不太爽放弃了,vue + TypeScript。
也是体验了一下,Angular 。

Class

可以理解为特殊的函数(必须 New。声明提升,死区。执行在严格模式)

声明

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class Circle {
  constructor(point, r) {
    this.point = point;
    this.r = r;
  }
}

等价于

function Circle(point, r){
    this.point = point;
    this.r = r;
}
new Circle([50, 50], 10)

image.pngimage.png

构造函数 Constructor

New 一个对象的时候,做了几件事?

  1. 初始化一个空对象
  2. 绑定 this
  3. 执行构造函数
  4. 返回这个对象(不需要 return 来返回)

因为类是可以继承的,所以可以使用 super 关键字来调用父类的构造函数。

class Circle {
  constructor(point, r) {
    // super() //这样来调用父类的构造函数
    this.point = point;
    this.r = r;
  }
}

原型链方法

class Circle {
  constructor(point, r) {
    this.point = point;
    this.r = r;
  }
  // 原型链方法,实例化之后可以计算面积
  get area() {
    console.log('get area')
    return this.calcArea()
  }
  // 原型链方法,实例化之后可以计算面积
  calcArea() {
    return Math.PI * Math.pow(this.r, 2)
  }
}
//new Circle([50, 50], 20)

image.png

原型方法、静态方法、静态字段

class Point {
    static staticField = 'static field';
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

image.png

属性声明

class Point {
    x=0
    y=0
    constructor(x, y) {
        if(x)this.x = x;
        if(y)this.y = y;
    }
}
new Point()

image.png

内部属性声明

类似于之前的闭包内的变量

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {    
    this.#height = height;
    this.#width = width;
    console.log(this.#height)
  }
}
rect = new Rectangle(1,2)
// rect.#height

image.png

继承

如果子类中存在构造函数,则需要在使用 this 之前首先调用 super()

class Animal { 
  name='Breaux';
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  age = 0;
  constructor(age) {
    super('Mitzie')
    this.age = age;
  }
  speak() {
    console.log(this.name + ' barks.'+`age: `+this.age);
  }
}

var d = new Dog(10);
d.speak();// 'Mitzie barks.age: 10'

image.png

验证

New

image.png

提升&死区

image.png

严格模式

image.png

微信公众号:前端linong

clipboard.png

参考文献

  1. 前端培训目录、前端培训规划、前端培训计划
  2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/Class_elements
  3. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
  4. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/extends
Image placeholder
Zephyr
未设置
  42人点赞

没有讨论,发表一下自己的看法吧

推荐文章
PHP构造函数的继承问题

PHP构造函数的继承问题 关于类继承,总有一个常见的问题,这就是构造函数的使用。子类实例化时会执行父类的构造函数吗?如果是这样,倘若子类也有自己的构造函数会怎么样?子类构造函数在父类构造函数之后执行,

嗨!你的 2019 晒好封存了吗?快来看程序老兵的 2019 吧!

时间过得真是太快快快了,2019还剩下最后几个小时了。回望即将过去的这一年,老兵哥做了不少事情,有计划内的,也有计划外的,当然还有不少事情没做。赶在最后时刻晒一晒我的2019年,希望从成绩荣誉中获得一

最流行的 Go Web 框架: GitHub Star 数量排行(2019)

搜索到了这个资源,可以一目了然地看到GitHub上GoWeb框架受欢迎程度,分享给大家。项目名称 GitHubStar数 创建年份 gin 33177 2014 beego 22599 2012 ir

【跃迁之路】【868天】全栈工程师IT知识库更新记录(2019.1.3更新)

[叨叨两句] 跃迁之路整体迁移至GitHub做为开源项目,未来的更新提交都在那,其它地方只做更新记录的发布 该项目将定位为全栈工程师养成,目标是可以独立完成项目的全流程工作 项目地址https://g

花2w培训前端,出来狂面20家,被拒,我该怎么办?

今天,一个在上海花2w培训前端的妹子向我诉苦,说她5个月刚培训出来,技术好差,2周时间,狂面20家公司,没有一家抛出橄榄枝。她自己说,感觉找不到工作了,能不能给我点建议?我大概问了她一些细节。这期培训

0103-springmvc的基本流程

背景现在的it研发,已经从管理系统时代迈入了互联网系统时代。页面开发已经从基于JSP+struts转变为为前后端分离的方式(springMVC+JS);思想MVCmvc框架不仅适用于java的开发,也

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

再见,2019!你好,2020!

今天,是2019年的最后一天。虽有不舍,但终归还是得说再见!明天又会翻开新一年的篇章,希望各位在新的一年都能升职加薪迎娶白富美,走上人生巅峰。19年某月某日突发奇想,想用公众号分享一下这些年学到的技术

送别2019,期待2020!

概述2019年时间过得很快。有欢笑、有离别、有压力、有收获。关于工作项目发生了变动,团队也发生了变动,不过总体是成长的,在这感谢领导的关照、信任!下半年开始学习Go语言,并用Go进行搭建项目,也算是刚

PHP 操作 Redis 的基本方法

最近系统性的研究了下redis,准备些一篇redis使用常遇到的问题;包括: redis的基本操作方法。 1redis的连接: //实例化redis $redis=newRedis(); //连接 $

Golang 操作 Redis 的基本方法

摘要 看到有位老哥写了PHP操作Redis的基本方法,于是就有了这篇博客 超喜欢Redis的,感觉使用起来很方便,但是社区不温不火哈? 就当是为Redis社区做贡献吧,如果大家喜欢记得点个赞哦 话不多

详解 PHP 反射的基本使用

PHP反射 今天我要给大家讲解的是PHP当中使用非常普遍的高级操作:反射。反射在当今几乎所有的PHP框架或者工具中都占用非常重要的角色,就比如Laravel的容器,容器对于Laravel架构来说极其重

「模仿」是架构师的基本能力:守破离

本文作者曲健,1024生人,天选程序员,浆糊人送外号“大爷DàYé”,目前在奥琪科技担任首席架构师一职。二零一八留不住,朱颜辞镜花辞树。鄙人平素喜偶厌奇,以致现在对2019仍避之不及、兴致索然,更羞愧

解读2019华为第001号文件:AI时代软件开发的第一要义是可信

晓查发自凹非寺量子位出品|公众号QbitAIAI加持,万物互联、万物智能。我们在享受科技进步的同时,软件开发行业却面临着更大的挑战。过去,软件出现安全问题或许仅仅意味着经济损失,但当走向产业互联网时代

AWS在中国开通三个CloudFront站点,可降31%的延迟

4月23日,北京消息,亚马逊旗下公司AmazonWebServices,Inc.(AWS)今天宣布,通过与宁夏西云数据科技有限公司(简称西云数据)协作,在中国开通三个由西云数据运营的AmazonClo

前端面试每日 3+1 —— 第263天

今天的知识点(2020.01.04)——第263天(我也要出题) [html]html5怎么判断app是否安装? [css]使用sass的方式有哪些? [js]举例说明object.freeze有

十年软件通胀率:从 2009 到 2019 年,软件越来越昂贵

过去十年,软件定价逐渐上升。在我们调查的一百个商业应用程序中,价格平均上涨了62%,其中包括一些比较便宜的应用程序。如果用户现在花钱购买一款应用程序,那么它很可能比十多年前的价格贵98%以上。

css属于脚本语言吗?

css属于脚本语言吗?css不属于脚本语言,它是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。另外HTML也不是脚本语言,HTML是超文本标记语言,用来描述文档结构的。脚本语言脚本

Eclipse发布:2019年物联网开发者调查

如果你想了解一项重要技术的未来,那么先看开发人员在做什么。考虑到这一点,在EclipseFoundation对 1700 多名物 联 网开 发 人 员 (pdf) 进行的一项新调查中,可以获得对整个物

2019年7月数据库流行度排行:Oracle王者归来获大幅增长

2019已然走过一半,DB-Engines的数据库流行度排行榜7月出炉,这可以算是数据库流行度的半年报了。7月的明星产品是Oracle,其积分大幅增长了22分,较去年同期增长了43分,这说明Oracl

OOW2019 :Oracle数据管理技术创新盘点

Oracle作为传统关系型数据库的霸主,不管是数据库性能还是商业上,一直以来都是全球各大数据库厂商致力追赶的对象。近年来,全球云数据库市场迅速发展,Gartner预测,到2023年,世界上四分之三的数

Oracle ADW业务数据平台点亮DTCC2019数据库技术大会!

数字大脑、互联网+、智能+、人工智能、边缘计算……信息技术领域好像从不缺少概念,但无论世界如何变化,数据是一切业务的核心。要想有效管理、分析和挖掘数据带来的价值,数据库一定是必需品。2019年5月8日

LeanCloud 2019 回顾

在过去的一年里,数万新用户选择了LeanCloud,开发者在我们的平台上创建了数万新应用。尽管在6月遇到了一些因外部因素带来的困难,2019年仍然是LeanCloud实现整体盈利的第一年。这离不开用户