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 ...
随机推荐
- 制作MACOSX 10.9Mavericks安装启动U盘教程
苹果OS X Mavericks发布了,不少朋友又开始制作系统安装U盘了.其实下面介绍的方法与之前介绍的方法可能有些不同,不过原理还是一样的.下面看看具体的操作步骤吧! 1. 首先你需要开启显示隐藏文 ...
- python3下应用pymysql(第一卷)
编程不会操作数据库,就像男人做做了太监,人生不完整,我不想人生不完整,写下pymysql的使用总结 先做下准备工作,准备下数据表,由于是练习操作,所以先做个简单的数据表: 创建单独的一个库:再创建表 ...
- Mybatis 入门之resultMap与resultType讲解实例
resultMap:适合使用返回值是自定义实体类的情况 resultType:适合使用返回值得数据类型是非自定义的,即jdk的提供的类型 resultMap : type:映射实体类的数据类型 id: ...
- JS做深度学习2——导入训练模型
JS做深度学习2--导入训练模型 改进项目 前段时间,我做了个RNN预测金融数据的毕业设计(华尔街),当时TensorFlow.js还没有发布,我不得已使用了keras对数据进行了训练,并且拟合好了不 ...
- linux公社大量免费的在线android资料
2011年linux数据库的android在线分享 linux公社:开源公社 本文撰写:杨凯专属频道 下载如需密码,详见博客案例:点击我去查看密码 2011年9月12日 21: ...
- Andrew's Blog / 《Network Programming with Go》学习笔记
第一章: Architecture(体系结构) Protocol Layers(协议层) ISO OSI Protocol 每层的功能: 网络层提供交换及路由技术 传输层提供了终端系统之间的数据透明传 ...
- jquery和zepto的异同
相同点 相同点: zepto: 是jquery 的 阉割版 是为移动端开发的库 jQuery的轻量级替代品.文件大小比较小 只有8k左右 ,是目前功能库中最小的一个,尽管不大,zepto 所提供的工具 ...
- android应用程序源码结构分析
工程; 1. src文件夹存放源码. 2. gen下有跟src中一样的包文件,内部有一个名为R.java类,它是自动生成的一个类:该目录不用我们开发人员维护, 但又非常重要的目录 . 该目录用来存放由 ...
- 爬虫cookies详解
cookies简介 cookie是什么? Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密).定义于 ...
- 小程序中,设置Sticky定位,距离上面会有一个缝隙
近日,在小程序中使用sticky定位实现吸顶效果,不料入了一个大坑. 定位后,距离有position: relative:的上级元素有个1px大小的缝隙条,透过缝隙,滑动时可看到定位标题下的内容. 此 ...