一、Class类
1、构造函数

  1. constructor(){}

说明:
a、如果没有重新定义带参数的构造函数,类会默认为我们提供一个不带参数的隐式构造函数
b、在创建类的实例时会自动调用类中的构造函数

2、实例属性    【类的实例属性定义在类的构造函数中(类实例的属性)】
eg:

  1. constructor(name,age){
  2. this.name = name;
  3. this.age = age;
  4. }

说明:
a、实例变量定义在类的构造函数中
b、实例变量只有类的实例可以调用,类是无法调用的

3、静态属性    【直接在类上定义的属性是静态属性(类的属性)】
两种定义形式:
a、使用static关键字定义在类中实例方法的前面

  1. static attrName = "静态属性";

b、直接使用 类名.属性名 在类定义外定义静态属性

  1. className.attrName = "静态属性";

4、实例方法    【定义在类中的方法为实例方法(类实例的方法)】

  1. sayName(){}

5、静态方法    【定义在类中以static关键字修饰的方法(类的方法)】

  1. static say(){}

class示例:

  1. class Person{
  2. //构造函数
  3. constructor(name,age){
  4. this.name = name;
  5. this.age = age;
  6. }
  7. //静态属性
  8. static staticAttr1 = "静态属性1";
  9. //实例方法
  10. sayName(){}
  11. //静态方法
  12. static say(){}
  13. }
  14. //静态属性
  15. Person.staticAttr2 = "静态属性2";
  16. //创建Person类实例对象
  17. let p = new Person('nzc',18);
  18. //实例方法调用并输出
  19. console.log(p.name,p.age); //nzc 18
  20. //静态方法调用并输出
  21. console.log(Person.staticAttr1,Person.staticAttr2); //静态属性1 静态属性2
  22. //实例方法sayName()的调用
  23. p.sayName();
  24. //静态方法say()的调用
  25. Person.say();

类定义的完整实例

二、类的继承
说明:
1、可以使用extends关键字实现继承,其本质与js原生中的组合继承一样
2、两条继承链:
a、子类的__proto__属性,表示构造函数的继承,总是指向父类
b、子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性

super关键字
作为函时:
a、super()方法,继承了其它类,自身的构造函数中使用super()方法类似于调用了父类的构造函数
b、super()方法的参数与需要调用的父类构造器一样,super()方法里面的this指向为子类的实例对象【superClass.prototype.constructor.call(this)】

作为对象时:
a、在子类实例方法中,指向父类的原型对象【定义在父类实例上的方法或属性,无法通过super调用的】
b、在子类静态方法中,指向父类【在子类的静态方法中可以super调用父类的静态方法和静态属性】

类继承及super关键字相关示例:

  1. //父类
  2. class Person{
  3. constructor(name,age){
  4. this.name = name;
  5. this.age = age;
  6. //this如果是在子类构造器中调用的父类构造器中的this指向的是子类的实例对象
  7. // console.log(this);
  8. }
  9. sayName(){
  10. console.log('Person中的实例方法',this.name);
  11. }
  12.  
  13. static say(){
  14. console.log('Person中的静态方法')
  15. }
  16. }
  17.  
  18. Person.staticAttr = 'Person中的静态属性';
  19.  
  20. //继承
  21. class Chinese extends Person{
  22. constructor(name,age,skinColor){
  23. super(name,age); //在子类构造器中调用父类构造器
  24. //在super()底下用this
  25. this.skinColor = skinColor;
  26. }
  27.  
  28. static fun1(){
  29. //这里面的super指向的是父类
  30. super.say();
  31. super.staticAttr
  32. }
  33.  
  34. }
  35.  
  36. let c = new Chinese('小明',18,'yellow');
  37. //原型继承,
  38. c.sayName();
  39. //类继承
  40. Chinese.say();
  41. console.log(Chinese.staticAttr);
  42.  
  43. Chinese.fun1() //Person中的静态方法 Person中的静态属性
  44.  
  45. //子类继承父类【静态的属性及方法的继承】
  46. console.log(Chinese.__proto__ === Person); //true
  47.  
  48. //子类的原型对象继承自父类的原型对象【实例的属性及方法的继承】
  49. console.log(Chinese.prototype.__proto__ === Person.prototype); //true

类的继承及super使用示例

ES6 Class(类)(九)的更多相关文章

  1. React和ES6(二)ES6的类和ES7的property initializer

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  2. [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

    es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 ...

  3. ES6入门——类的概念

    1.Class的基本用法 概述 JavaScript语言的传统方式是通过构造函数,定义并生成新对象.这种写法和传统的面向对象语言差异很大,下面是一个例子: function Point(x, y) { ...

  4. JavaScript es6 class类的理解。

    本着互联网的分享精神,在本篇文章我将会把我对JavaScript  es6 class类的理解分享给大家. JavaScript 类主要是 JavaScript 现有的基于原型的继承的语法糖. 类语法 ...

  5. ES6 | class类的基本语法总结

    类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式.只要你的代码写在类或模块之中,就只有严格模式可用. 考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上 ...

  6. es6 --- class 类的继承使用

    传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...

  7. ES6 class类中定义私有变量

    ES6 class类中定义私有变量 class类的不足 看起来, es6 中 class 的出现拉近了 JS 和传统 OOP 语言的距离.但是,它仅仅是一个语法糖罢了,不能实现传统 OOP 语言一样的 ...

  8. es6 的类 class

    1.ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. 2. //定义类 class Point { constructor(x, y ...

  9. ES6——class类继承(读书笔记)

    前言 我一定是一个傻子,昨天这篇文章其实我已经写好了一半了,但是我没有保存 这是学习ES6的过程,我没有系统的看完阮大大的书.零零散散的,很多功能知道,但是没有实际的用过 看了几遍,总是看前面几章,所 ...

随机推荐

  1. NOI.AC 722: tree

    就贴个代码 #include <cstdio> #include <algorithm> typedef long long LL; const int MN = 200005 ...

  2. 接口八问 & 接口测试质量评估标准

    接口八问 关于接口的具体信息,可以通过以下八个问题进行了解: 接口的请求地址? 接口的作用? 接口的请求方式? 接口是否是用户相关? 接口是否存在上送数据,上送数据是什么? 接口返回的报文头和编码? ...

  3. 错误: 找不到或无法加载主类 com.leyou.LeyouItemApplication Process finished with exit code 1

    在IDEA的使用过程中,经常断掉服务或者重启服务,最近断掉服务重启时突然遇到了一个启动报错: 错误:找不到或无法加载主类 猜测:1,未能成功编译: 尝试:菜单--->Build--->Re ...

  4. continue and break

    #1.continue终止当前循环开始下一次循环count = 0while count < 10: if count == 7: count = count +1 continue print ...

  5. Netty的常用API(二)

    在使用Netty之前先介绍下Netty的常用API,对其有一个大概的了解. 一.EventLoop和EventLoopGroup EventLoop如同它的名字,它是一个无限循环(Loop),在循环中 ...

  6. luoguP3312 [SDOI2014]数表

    题意 默认\(n\leqslant m\). 设\(f(i)\)表示\(i\)的约数和,因为是积性函数,可以用线性筛求. 先不考虑\(a\)的限制,我们推下式子: \(\sum\limits_{i=1 ...

  7. 使用jdk 容器镜像注意默认编码问题

    最近在使用一个开源数据pipeline 处理的工具的时候,发现了jdk容器镜像编码的一些问题 以下是一个简单的描述 问题 使用了streamsets 工具,使用容器运行,默认使用了adoptopenj ...

  8. Java 函数式编程(Lambda表达式)与Stream API

    1 函数式编程 函数式编程(Functional Programming)是编程范式的一种.最常见的编程范式是命令式编程(Impera Programming),比如面向过程.面向对象编程都属于命令式 ...

  9. [LeetCode] 926. Flip String to Monotone Increasing 翻转字符串到单调递增

    A string of '0's and '1's is monotone increasing if it consists of some number of '0's (possibly 0), ...

  10. C++版本 ORM 访问数据库之ODB 的oracle Demo测试(二)

    有上篇文章已经说了odb的环境编译, 现在直接拿来给的例子进行数据库的增删改查操作测试 1. ODB访问oracle数据库_ 插入操作(insert) 直接运行上篇编译好的exe文件会出现如下错误 错 ...