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 指向了 AB.[[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 基础知识汇总 (十三)的更多相关文章

  1. JavaScript基础知识汇总

    1. 图片热区: <img src="logo.jpg" usemap="#logo"> <map id="logo" n ...

  2. javaScript 基础知识汇总(三)

    1.循环:while 和 for while 循环 while(condition){ //代码 循环体 } do ... while  循环 let i =0; do { //循环体 }while( ...

  3. javaScript 基础知识汇总(六)

    1.基本类型与对象的区别 基本类型:是原始类型的中的一种值. 在JavaScript中有6中基本类型:string number  boolean  symbol  null  undefined 对 ...

  4. javaScript 基础知识汇总(五)

    1.垃圾回收 JavaScript 的内存管理是自动的,不能强制执行或者阻止执行 可达性 JavaScript中主要的内存管理概念是可达性. 什么是可达性? 定义一个对象 let user = { n ...

  5. javaScript 基础知识汇总(二)

    1.运算符 术语或者叫法:一元运算符.二元运算符.运算元(参数) let x=0; x=5+2; //5和2为运算元,“+” 为二元运算符: x=-x; //"-" 为一元运算符 ...

  6. javascript 基础知识汇总(一)

    1.<script> 标签 1) 可以通过<script> 标签将javaScript 代码添加到页面中 (type 和language 属性不是必须的) 2)外部的脚本可以通 ...

  7. JavaScript 基础知识汇总目录

    一.标签.代码结构.现代模式.变量.数据类型.类型转换 GO 二.运算符.值的比较.交互.条件运算符.逻辑运算符 GO 三.循环 while 和 for .switch语句.函数.函数表达式和箭头函数 ...

  8. javaScript 基础知识汇总(七)

    1.数组 特点:数组是可以存储有序集合的对象. 声明: let arr = new Array();   let arr=[]; 大多数情况下我们使用第二种. let fruits = [" ...

  9. javaScript 基础知识汇总 (十)

    1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...

随机推荐

  1. Python-多任务复制文件夹

    import multiprocessing import os import time def copy_file(queue, file_name, old_folder_name, new_fo ...

  2. 转:zabbix 2.0.6监控cisco交换机 2950 2960s 3560G

    转自: http://blog.chinaunix.net/uid-24250828-id-3806551.html 想在zabbix 上监控交换机端口的流量,找了两天的模板,包括官方的和网友写的.在 ...

  3. POJ 2112 Optimal Milking 最短路 二分构图 网络流

    题意:有C头奶牛,K个挤奶站,每个挤奶器最多服务M头奶牛,奶牛和奶牛.奶牛和挤奶站.挤奶站和挤奶站之间都存在一定的距离.现在问满足所有的奶牛都能够被挤奶器服务到的情况下,行走距离的最远的奶牛的至少要走 ...

  4. file / from install of XXX conflicts with file from package filesystem-XXX

    在centos上安装一个偏门软件时出现如下问题: rpm -ivh mNetAssist-0.1.1-2.x86_64.rpm #执行命令 file / from install of XXX con ...

  5. react router为什么推荐使用browserHistory而不推荐hashHistory?

    首先 browserHistory 其实使用的是 HTML5 的 History API,浏览器提供相应的接口来修改浏览器的历史记录:而 hashHistory 是通过改变地址后面的 hash 来改变 ...

  6. 大忙人的jdk8,比出生晚了好几个激情的夏天

    写给大忙人的jdk8到手了,第一件事情就蒙蔽了,mac装的jdk7,切换jdk的功能要整出来才行,下好jdk8up101安装,假装几行代码搞定目标在命令行下,可以通过命令'jdk6', 'jdk7', ...

  7. Selenium&Pytesseract模拟登录+验证码识别

    验证码是爬虫需要解决的问题,因为很多网站的数据是需要登录成功后才可以获取的. 验证码识别,即图片识别,很多人都有误区,觉得这是爬虫方面的知识,其实是不对的. 验证码识别涉及到的知识:人工智能,模式识别 ...

  8. OLE DB访问接口“MICROSOFT.JET.OLEDB.4.0”配置为在单线程单位模式下运行,所以该访问接口无法用于分布式

    OLE DB访问接口"MICROSOFT.JET.OLEDB.4.0"配置为在单线程单位模式下运行,所以该访问接口无法用于分布式 数据库操作excel时遇到的以上问题的解决方法 解 ...

  9. HTTP协议 有这篇文章足够了

    HTTP 协议详解 HTTP(HyperText Transfer Protocol)超文本传输协议.其最初的设计目的是为了提供一种发布和接收HTML页面的方法. HTTP是一个客户端(用户)和服务端 ...

  10. 从0开发3D引擎(补充):介绍领域驱动设计

    我们使用领域驱动设计(英文缩写为DDD)的方法来设计引擎,在引擎开发的过程中,领域模型会不断地演化. 本文介绍本系列使用的领域驱动设计思想的相关概念和知识点,给出了相关的资料. 上一篇博文 从0开发3 ...