ECMAScript 6入门类学习笔记上

asoren 发布于2019-08-23 12:31 / 3547人阅读

摘要：类基本概念，记录以便自己后面加深理解了解类是什么是什么不妨写一个看看的原型可以看到这三个属性都是不可遍历的并且与类相比就多了一个原型链。和静态方法中是一样的得是哪个类就返回哪个类本类不能实例化报错正确

类class

基本概念，记录以便自己后面加深理解

了解类是什么

class是什么？不妨写一个看看

</>复制代码 
class Demo {
    constructor() {
        this.a = 1;
        this.b = this.f;
    }
    f() {
        return this;
    }
}
Demo.prototype; //{
                //  constructor: class Demo
                //  f: ƒ f()           
                //  __proto__: Object }

Demo的原型可以看到这三个属性都是不可遍历的并且与Demo类相比就多了一个__proto__原型链。我们再new一个Demo看一下

</>复制代码 
let o = new Demo();
console.log(Object.getPrototypeOf(o));  //{
                                        //  constructor: class Demo
                                        //  f: ƒ f()           
                                        //  __proto__: Object }

实际上Demo类相当于Demo实例的原型

class中的constructor

在我看来

</>复制代码 
    constructor() {
        this.a = 1;
        this.b = this.f;
    }

这部分相当于es5中构造函数的作用，在new的过程中对this进行赋值，并返回this也就成了实例对象
因此你在constructor中return了一个对象且不等于null那么实例对象就是return的值，和es5构造函数一样的效果

class中的方法

</>复制代码 
    f() {
        return this;
    }

这个方法最终属于在实例对象的原型链上不可遍历方法，因此也能被实例对象使用

新知识点 class的静态方法

表示该方法不会被实例继承，而是直接通过类来调用

</>复制代码 
class Demo {
    constructor() {
        this.a = this;
        this.b = this.f;
    }
    static g() {
        return this;
    }
    static f() {
        return this;
    }
}
let o = new Demo(); 
//console.log(o.b());    //not a function
//console.log(o.g());     //not a function
Demo.g() === Demo;        //true

静态方法中的this指向类自己，而this.a = this则指向实例对象自己

静态方法可以被子类继承

</>复制代码 
class Foo {
  static classMethod() {
    return "hello";
  }
}
class Bar extends Foo {
}
Bar.classMethod() // "hello"

静态方法可以从super对象上调用

</>复制代码 
class Foo {
  static classMethod() {
    return "hello";
  }
}
class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ", too";
  }
}
Bar.classMethod() // "hello, too"

Class 内部只有静态方法，没有静态属性

class表达式的立即执行写法

</>复制代码 
var o =  new class {
    constructor(n) {
        this.a = n;
        this.b = this.f;
    }
    g() {
        return n;
    }
    f() {
        return this;
    }
}(1)
o.a;             // 1

class类声明不存在变量提升

new.target 属性

是在new后返回一个对象，例如es5中构造函数f不是通过new调用返回undefined，通过new调用返回构造函数自己

</>复制代码 
function f() {
    return new.target;
}
console.log((new f()) === f);       //true

而class类中，则返回class自身。和静态方法中this是一样的；new得是哪个类就返回哪个类

</>复制代码 
class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error("本类不能实例化");
    }
  }
}
class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}
var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98669.html

ECMAScript 6入门类继承笔记

类继承看类继承前，先回顾构造函数怎么实现对象的继承的 function F() { this.a = 1; } function Son() { F.call(this); } function inherit(S, F) { S.protot...

_DangJin 2019-08-23 12:31 评论0 收藏0
ECMAScript 6入门读书笔记二

摘要：变量的解构赋值更加便利的从匿名对象或者数组中，对变量进行赋值数组的解构赋值基本样式，右边数据类型必须是可迭代的类型。变量的解构赋值更加便利的从匿名对象或者数组中，对变量进行赋值；数组的解构赋值基本样式，右边数据类型必须是可迭代的类型。 let a = 1, b = 2, c = 3; //等价于 //let [a, b, c] = [1, 2, 3]; 对...

wawor4827 2019-08-23 12:27 评论0 收藏0
JavaScript 学习笔记一（入门篇）

摘要：学习笔记一入门篇最近正在看高级程序设计，一直没来得及总结一下，顺便对之前看的编程艺术进行一些简单的总结，如有一些不正确的地方还请多指出讨论。其他字符可以是字母下划线美元符号或者数字。 JavaScript 学习笔记一（入门篇）最近正在看《JavaScript高级程序设计》，一直没来得及总结一下，顺便对之前看的《JavaScript DOM编程艺术》进行一些简单的总结，如有一些不正...

lentoo 2019-08-21 10:36 评论0 收藏0
ES6 Iterator笔记（摘抄至阮一峰的ECMAScript 6入门）

摘要：也就是说，遍历器对象本质上，就是一个指针对象。执行这个函数，就会返回一个遍历器。一个对象如果要有可被循环调用的接口，就必须在的属性上部署遍历器生成方法原型链上的对象具有该方法也可。后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。 ES6 Iterator笔记（摘抄至阮一峰的ECMAScript 6入门） Iterator的遍历过程创建一个指针对象，指向当前数据结构的起始位...

mayaohua 2019-08-20 18:19 评论0 收藏0
PHPer书单

摘要：想提升自己，还得多看书多看书多看书下面是我收集到的一些程序员应该看得书单及在线教程，自己也没有全部看完。共勉吧当然，如果你有好的书想分享给大家的或者觉得书单不合理，可以去通过进行提交。讲师温铭，软件基金会主席，最佳实践作者。想提升自己，还得多看书！多看书！多看书！下面是我收集到的一些PHP程序员应该看得书单及在线教程，自己也没有全部看完。共勉吧！当然，如果你有好的书想分享给大家的或者...

jimhs 2019-07-01 12:35 评论0 收藏0