ES6 Class(类)(九)
一、Class类
1、构造函数
constructor(){}
说明:
a、如果没有重新定义带参数的构造函数,类会默认为我们提供一个不带参数的隐式构造函数
b、在创建类的实例时会自动调用类中的构造函数
2、实例属性 【类的实例属性定义在类的构造函数中(类实例的属性)】
eg:
constructor(name,age){
this.name = name;
this.age = age;
}
说明:
a、实例变量定义在类的构造函数中
b、实例变量只有类的实例可以调用,类是无法调用的
3、静态属性 【直接在类上定义的属性是静态属性(类的属性)】
两种定义形式:
a、使用static关键字定义在类中实例方法的前面
static attrName = "静态属性";
b、直接使用 类名.属性名 在类定义外定义静态属性
className.attrName = "静态属性";
4、实例方法 【定义在类中的方法为实例方法(类实例的方法)】
sayName(){}
5、静态方法 【定义在类中以static关键字修饰的方法(类的方法)】
static say(){}
class示例:
class Person{
//构造函数
constructor(name,age){
this.name = name;
this.age = age;
}
//静态属性
static staticAttr1 = "静态属性1";
//实例方法
sayName(){}
//静态方法
static say(){}
}
//静态属性
Person.staticAttr2 = "静态属性2";
//创建Person类实例对象
let p = new Person('nzc',18);
//实例方法调用并输出
console.log(p.name,p.age); //nzc 18
//静态方法调用并输出
console.log(Person.staticAttr1,Person.staticAttr2); //静态属性1 静态属性2
//实例方法sayName()的调用
p.sayName();
//静态方法say()的调用
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关键字相关示例:
//父类
class Person{
constructor(name,age){
this.name = name;
this.age = age;
//this如果是在子类构造器中调用的父类构造器中的this指向的是子类的实例对象
// console.log(this);
}
sayName(){
console.log('Person中的实例方法',this.name);
} static say(){
console.log('Person中的静态方法')
}
} Person.staticAttr = 'Person中的静态属性'; //继承
class Chinese extends Person{
constructor(name,age,skinColor){
super(name,age); //在子类构造器中调用父类构造器
//在super()底下用this
this.skinColor = skinColor;
} static fun1(){
//这里面的super指向的是父类
super.say();
super.staticAttr
} } let c = new Chinese('小明',18,'yellow');
//原型继承,
c.sayName();
//类继承
Chinese.say();
console.log(Chinese.staticAttr); Chinese.fun1() //Person中的静态方法 Person中的静态属性 //子类继承父类【静态的属性及方法的继承】
console.log(Chinese.__proto__ === Person); //true //子类的原型对象继承自父类的原型对象【实例的属性及方法的继承】
console.log(Chinese.prototype.__proto__ === Person.prototype); //true
类的继承及super使用示例
ES6 Class(类)(九)的更多相关文章
- React和ES6(二)ES6的类和ES7的property initializer
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 ...
- ES6入门——类的概念
1.Class的基本用法 概述 JavaScript语言的传统方式是通过构造函数,定义并生成新对象.这种写法和传统的面向对象语言差异很大,下面是一个例子: function Point(x, y) { ...
- JavaScript es6 class类的理解。
本着互联网的分享精神,在本篇文章我将会把我对JavaScript es6 class类的理解分享给大家. JavaScript 类主要是 JavaScript 现有的基于原型的继承的语法糖. 类语法 ...
- ES6 | class类的基本语法总结
类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式.只要你的代码写在类或模块之中,就只有严格模式可用. 考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上 ...
- es6 --- class 类的继承使用
传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...
- ES6 class类中定义私有变量
ES6 class类中定义私有变量 class类的不足 看起来, es6 中 class 的出现拉近了 JS 和传统 OOP 语言的距离.但是,它仅仅是一个语法糖罢了,不能实现传统 OOP 语言一样的 ...
- es6 的类 class
1.ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. 2. //定义类 class Point { constructor(x, y ...
- ES6——class类继承(读书笔记)
前言 我一定是一个傻子,昨天这篇文章其实我已经写好了一半了,但是我没有保存 这是学习ES6的过程,我没有系统的看完阮大大的书.零零散散的,很多功能知道,但是没有实际的用过 看了几遍,总是看前面几章,所 ...
随机推荐
- AtCoder abc 141 F - Xor Sum 3(线性基)
传送门 题意: 给出\(n\)个数\(a_i\),现在要将其分为两堆,使得这两堆数的异或和相加最大. 思路: 考虑线性基贪心求解. 但直接上线性基求出一组的答案是行不通的,原因之后会说. 注意到如果二 ...
- 201871010126 王亚涛 《面向对象程序设计(Java)》第十周实验总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- 文件处理file handling
#1. 打开文件,得到文件句柄并赋值给一个变量 #2. 通过句柄对文件进行操作 #3. 关闭文件 #1.open函数打开文件,open找的是系统的编码gbkf = open("陈粒" ...
- e.preventDefault()
定义和用法 取消事件的默认动作. 语法 event.preventDefault() 说明 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 ...
- docker sentry 配置文件位置
root@50f8462579a8:/etc/sentry# cd /etc/sentry/ root@50f8462579a8:/etc/sentry# ls config.yml sentry.c ...
- 清理C盘临时文件脚本
@echo off echo 正在清除系统垃圾文件,请稍等...... del /f /s /q %systemdrive%\*.tmp del /f /s /q %systemdrive%\*._m ...
- 牛客CSP-S提高组赛前集训营2 ———— 2019.10.31
比赛链接 期望得分:100+20+20 实际得分:40+20+30 awa cccc T1 :基于贪心的思路,然后开始爆搜(雾 那必然是会死的,好吧他就是死了 #include<iostrea ...
- C语言实现计算器,附源码,超简单!
#include<stdio.h> #include<math.h> void main() { calculator(); } double calculator() { / ...
- MySQL实战45讲学习笔记:第二十九讲
一.引子 我在第25和27篇文章中,和你介绍了主备切换流程.通过这些内容的讲解,你应该已经很清楚了:在一主一备的双 M 架构里,主备切换只需要把客户端流量切到备库:而在一主多从架构里,主备切换除了要把 ...
- UDF——读取文件作为边界条件(类似profile的效果)
本文编译工具:VC++ UDF Studio 该插件可以直接在Visual Studio中一键编译.加载.调试UDF源码,极大提高编写排错效率,且支持C++,MFC,Windows API和第三方库, ...