javaScript 基础知识汇总 (十三)
1、Class
在JavaScript中 calss即类是一种函数
基本语法
class Myclass{
constructor(){}
method1(){}
method2(){}
method3(){}
}
示例:
class User{
constructor(name){//构造函数
this.name = name;
}
sayHI(){//属性方法
alert(name);
}
}
//使用方法
let user = new User("XiaoMing");
user.sayHi();
类表达式
let User = class{
sayHi(){
alert('Hello');
}
};
2、类继承
在JavaScript中类继承通过 extends关键字实现。示例:
class Animal {
constructor(name) {
this.speed = ;
this.name = name;
}
run(speed) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop() {
this.speed = ;
alert(`${this.name} stopped.`);
}
}
// 通过指定“extends Animal”让 Rabbit 继承自 Animal
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!
重写方法
直接重新定义,从新写相同名字的就可以
class Rabbit extends Animal {
stop() {
// ...这将用于 rabbit.stop()
}
}
如果想在字类中仍使用父类的方法,又不直接重写,则可以 通过 super 来实现
class Animal {
constructor(name) {
this.speed = ;
this.name = name;
}
run(speed) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop() {
this.speed = ;
alert(`${this.name} stopped.`);
}
}
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
stop() {
super.stop(); // 调用父类的 stop 函数
this.hide(); // 然后隐藏
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stopped. White rabbit hides!
重写构造函数
不能直接重新写,要先执行super 之后才可以
原因:1) 当一个普通构造函数执行时,它会创建一个空对象作为this,并继续执行
2)但是当继承的构造函数执行时,它并不会做这件事情,而是运行符类中的构造函数来完成这项工作。
用法示例;
class Animal{
constructor(name){
this.speed = 0;
this.name = name;
}
}
class Rabbit extends Animal{
constructor(name,earLength){
super(name);
this.earLength = earLength;
}
}
let rabbit = new Rabbit("White Rabbit",10)
alert(rabbit.name);
alert(rabbit.earLength);
箭头函数没有自己的this或super,所以它们能融入到就近的上下文。
3、静态属性和方法
通过关键字static 设置静态方法或者静态属性
静态方法:
class User{
static staticMethod(){
alert(this === user);
}
}
User.staticMethod();//true
静态属性:
class Article{
static name = "xiaoming";
}
alert(Article.name);
静态属性和方法是被继承的
对于 class B extends A,类 B 的 prototype 指向了 A:B.[[Prototype]] = A。因此,如果一个字段在 B 中没有找到,会继续在 A 中查找。
4、私有的和受保护的属性和方法
受保护的属性通常以下划线_作为前缀
class CoffeeMachine{
_waterAmount = 0;
set waterAmount(value){
if(value<0) throw new error("Negative water");
this._waterAmount = value;
}
get waterAmount(){
return this._waterAmount;
}
}
let cofMachine = new CoffeeMachine();
cofMachine.waterAmount = 10;
alert(cofMachine.waterAmount);//10
设置只读
只有get 方法没有set 方法
初始化可以给默认值或者通过构造函数赋值
class CoffeeMachine{
constructor(power){
this._power = power;
}
get power(){
return this._power;
}
}
5、类型监测 “instanceof”
用法:obj instanceof Class
如果 obj隶属于Class 或者是Class 衍生的类,表达式返沪true
类型监测图表

javaScript 基础知识汇总 (十三)的更多相关文章
- JavaScript基础知识汇总
1. 图片热区: <img src="logo.jpg" usemap="#logo"> <map id="logo" n ...
- javaScript 基础知识汇总(三)
1.循环:while 和 for while 循环 while(condition){ //代码 循环体 } do ... while 循环 let i =0; do { //循环体 }while( ...
- javaScript 基础知识汇总(六)
1.基本类型与对象的区别 基本类型:是原始类型的中的一种值. 在JavaScript中有6中基本类型:string number boolean symbol null undefined 对 ...
- javaScript 基础知识汇总(五)
1.垃圾回收 JavaScript 的内存管理是自动的,不能强制执行或者阻止执行 可达性 JavaScript中主要的内存管理概念是可达性. 什么是可达性? 定义一个对象 let user = { n ...
- javaScript 基础知识汇总(二)
1.运算符 术语或者叫法:一元运算符.二元运算符.运算元(参数) let x=0; x=5+2; //5和2为运算元,“+” 为二元运算符: x=-x; //"-" 为一元运算符 ...
- javascript 基础知识汇总(一)
1.<script> 标签 1) 可以通过<script> 标签将javaScript 代码添加到页面中 (type 和language 属性不是必须的) 2)外部的脚本可以通 ...
- JavaScript 基础知识汇总目录
一.标签.代码结构.现代模式.变量.数据类型.类型转换 GO 二.运算符.值的比较.交互.条件运算符.逻辑运算符 GO 三.循环 while 和 for .switch语句.函数.函数表达式和箭头函数 ...
- javaScript 基础知识汇总(七)
1.数组 特点:数组是可以存储有序集合的对象. 声明: let arr = new Array(); let arr=[]; 大多数情况下我们使用第二种. let fruits = [" ...
- javaScript 基础知识汇总 (十)
1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...
随机推荐
- miracle|
N-COUNT 奇迹;出人意料的事If you say that a good event is a miracle, you mean that it is very surprising and ...
- python自动化工具
公司有些业务不断的重复复制和黏贴实在让人头疼,于是乎考虑使用python自动的生成文件,并且替换文件中的一些内容,把需要复制和黏贴的内容制作成 模版,以后的开发工作可以根据模版来自动生成文件,自己以后 ...
- 一劳永逸的解决AFNetworking3.0网络请求问题
AFNetworking在iOS网络请求第三方库中占据着半壁江山,前段时间将AFNetworking进行了3.0版本的迁移,运用面向对象的设计将代码进行封装整合,这篇文章主要为还在寻找AFNetwor ...
- PKI详解
预备: 一.密码基元 二.密钥管理 三.PKI本质是把非对称密钥管理标准化 PKI 是 Public Key Infrastructure 的缩写,其主要功能是绑定证书持有者的身份和相关的密钥对(通过 ...
- 基于python openOPC的监控页面一
笔者涉猎的工业领域项目遇到一个需求,需要把底层设备(表记)的状态和运行数据集中放到一个监控画面进行展示,数据需要在界面端实时进行刷新,类似网友的例子,如下图(侵删) 数据需要实时主动刷新,笔者基于多年 ...
- 手把手教你轻松使用数据可视化BI软件创建某疾病监控数据大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以某疾病监控数据大屏为例为 ...
- 【DirectX 11学习笔记】世界矩阵的理解-运动合成
最近在看龙书,写一下自己的学习理解,主要是物体运动的合成. 物体于局部坐标系内构建,每个物体拥有自己的局部坐标系以及相应的顶点矩阵A,并通过世界矩阵变换到唯一的世界坐标系. 物体在某时刻发生了位移和旋 ...
- Web网页布局的主要方式
一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc ...
- CSS+DIV自适应布局
CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...
- 前端每日实战:26# 视频演示如何用不到 50 行 CSS 代码,创作按钮被从纸上掀起的立体效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KRbXGe 可交互视频教程 此视频 ...