十二、class 与 extends

 ①、类的基本定义和生成实例

  1. {
  2. class Parent{
  3. constructor(name='Lain'){ //定义构造函数
  4. this.name = name;
  5. }
  6. }
  7. let a = new Parent('Mayu'); //生成实例
  8. console.log(a); //Parent {name: "Mayu"}
  9.  
  10. //继承
  11. class Child extends Parent{ //通过 关键字 extends 实现继承
  12.  
  13. }
  14. let b = new Child();
  15. console.log(b) //Child {name: "Lain"} 继承了Parent 并使用了Parent的默认值
  16. }

②、通过 extends 实现继承

  1. {
  2. class Parent{
  3. constructor(name='Lain'){
  4. this.name = name;
  5. }
  6. }
  7. //继承
  8. class Child extends Parent{ //通过 关键字 extends 实现继承
  9. constructor(name='child'){ //定义了子类的默认值
  10. super(name); //使用 super方法传递参数
  11. this.type='child'; // **在继承关系中 如果使用了super 一定要将 super方法放在第一行
  12. }
  13. }
  14. let b = new Child();
  15. console.log(b) //Child {name: "child", type: "child"} 继承了Parent 并使用了Child的默认值
  16. }

③、class 中的 getter 和 setter

  1. {
  2. class Parent{
  3. constructor(name='Lain'){
  4. this.name = name;
  5. }
  6. get longName(){ // ** 这里是属性 而不是方法
  7. return 'Hello '+this.name;
  8. }
  9. set longName(value){
  10. this.name =value;
  11. }
  12. }
  13.  
  14. let c = new Parent();
  15. console.log('getter',c.longName); //getter Hello Lain
  16. c.longName = 'abc';
  17. console.log('setter',c.longName); //setter Hello abc
  18. }

④、class 中的 静态方法

  1. {
  2. class Parent{
  3. constructor(name='Lain'){
  4. this.name = name;
  5. }
  6.  
  7. static tell(){ // 使用 关键字 static 定义静态方法
  8. // *** 该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
  9. console.log('static');
  10. }
  11. }
  12. Parent.tell(); //static
  13. }

⑤、class 中的 静态属性

  1. {
  2. class Parent{
  3. constructor(name='Lain'){
  4. this.name = name;
  5. }
  6.  
  7. static tell(){
  8. console.log('static');
  9. }
  10. }
  11. Parent.type ='test'; // 在 class 定义完毕后 在 类 上直接定义 静态方法 而不是在实例上
  12. console.log('静态属性',Parent.type); //静态属性 test
  13. }

ES6新特性使用小结(五)的更多相关文章

  1. ES6新特性使用小结(三)

    九.数据类型 Symbol /* * Symbol 数据类型 概念: Symbol 提供一个独一无二的值 * */ { let a1 = Symbol(); let a2 = Symbol(); co ...

  2. ES6新特性使用小结(六)

    十三.promise 异步编程 ①.使用 promise 模拟异步操作 { //ES5 中的 callback 解决 异步操作问题 let ajax = function (callback) { c ...

  3. ES6新特性使用小结(四)

    十一.Proxy .Reflect ①.Proxy 的概念和常用方法 { let obj = { //1.定义原始数据对象 对用户不可见 time: '2017-09-20', name: 'net' ...

  4. ES6新特性使用小结(二)

    六.Array 扩展 /* * Array Api Array.of 数组的构建 * */ { let arr = Array.of(, , , , , ); console.log(arr); // ...

  5. ES6新特性使用小结(一)

    一.let const 命令 'use strict'; /*function test(){ //let a = 1; for(let i=1;i<3;i++){ console.log(i) ...

  6. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  7. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  8. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  9. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

随机推荐

  1. nginx日志输出参数记录

    摘自: http://www.cnblogs.com/LoveJulin/p/5082363.html nginx服务器日志相关指令主要有两条,一条是log_format,用来设置日志格式,另外一条是 ...

  2. 2017SN多校D1T2 note:dp

    题意: 给你一个长度为n的字符串s,并且告诉你有m对字母不能相邻,问你最少在s中取出多少个字符能够使这个字符串合法. 题解: 表示状态: dp[i] = max num of letters 考虑到第 ...

  3. html5--1.16 内联框架

    html5--1.16 内联框架 学习要点: 1.iframe内联框架2.综合实例1 1.iframe内联框架 1.iframe元素用来在文档中添加一个内联框架. 2.iframe为body元素的子元 ...

  4. 通过阿里云域名动态解析 IP 地址

    这两天在家里用树莓派折腾了一个家用服务器,主要用来做 mac 的 Time Machine ,还有就是当做下载机和 nas ,想着平时上班时间家里没人用网络,空着也是空着,就可以利用空闲带宽下个美剧啥 ...

  5. 使用同一个目的port的p2p协议传输的tcp流特征相似度计算

    结论: (1)使用同一个目的port的p2p协议传输的tcp流特征相似度高达99%.如果他们是cc通信,那么应该都算在一起,反之就都不是cc通信流. (2)使用不同目的端口的p2p协议传输的tcp流相 ...

  6. Linus Torvalds: 成功的项目源于99%的汗水与1%的创新

    2017年2月15日,在加利福尼亚州的开源领袖峰会上,由Linux基金会执行董事Jim Zemlin进行的一次采访中,Torvalds讨论了他如何管理Linux内核的开发以及他对工作的态度. Linu ...

  7. zabbix告警邮件美化

    为了更好的用户体验,我们需要尽量美化我们的输出内容,尽量做到整齐划一,让人看了会有很舒服的感觉, 这个好像和苹果的产品一样,给人一种美感让人感觉非常享受. 一般我们的zabbix告警邮件就是纯文字,建 ...

  8. AtCoder Beginner Contest 100 2018/06/16

    A - Happy Birthday! Time limit : 2sec / Memory limit : 1000MB Score: 100 points Problem Statement E8 ...

  9. BZOJ_3165_[Heoi2013]Segment_线段树

    BZOJ_3165_[Heoi2013]Segment_线段树 Description 要求在平面直角坐标系下维护两个操作: 1.在平面上加入一条线段.记第i条被插入的线段的标号为i. 2.给定一个数 ...

  10. Python 静态方法和类方法的区别

    python staticmethod and classmethod Though classmethod and staticmethod are quite similar, there’s a ...