ES6中class的使用

用户84 发布于2019-08-23 18:34 / 1020人阅读

摘要：如果不指定一个构造函数方法则使用一个默认的构造函数。一个类中出现多次构造函数方法将会抛出一个错误。四关键字作为函数时，指向父类的构造函数。五类的属性和属性作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。

一、class的定义与基本用法

1.class的定义

ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

2.定义类
用class定义类有两种方法：类表达式和类声明

1.类声明

class Person{
  constructor(x,y){
     this.x=x;
     this.y=y;
  }
  tostring(){
      return this.x+this.y
} }

2.类表达式

 // 匿名类
    var Person=class {
        constructor(x,y){
           this.x=x;
           this.y=y;
        }
        tostring(){
           return this.x+this.y
        }
    }
    // 命名类
    var Person = class Person {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        tostring() {
            return this.x + this.y
        }
    }

以上需要说明的点：
1.类声明/类表达式不会向函数声明/函数表达式一样提升。你要访问一个类，就必须先声明。
2.ES6类的constructor函数相当于ES5的构造函数。
3.类中定义方法时，前面不用加function，后面不得加 ,。

二、继承
extends 关键字在类声明或类表达式中用于创建一个类作为另一个类的一个子类。

//父类
class Animal{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    tostring() {
        return (this.name + "的年龄是：" + this.age)
    }
}


//子类
class Dogs extends Animal {
    constructor(name,age,code) {
        super(name, age); //  调用父类的 constructor(name,age)  
        this.code = code;
    }
    toString() {
        return this.color + " 的" + super.toString(); //  调用父类的 toString()  
    }      
}

也可以扩展传统的基于函数的“类”（构造函数）

function Animal (name) {
  this.name = name;  
}
Animal.prototype.speak = function () {
  console.log(this.name + " makes a noise.");
}

class Dog extends Animal {
  speak() {
    super.speak();
    console.log(this.name + " barks.");
  }
}

var d = new Dog("Mitzie");
d.speak();//Mitzie makes a noise.  Mitzie barks.

请注意，类不能继承常规（非可构造）对象。如果要继承常规对象，可以改用

var Animal = {
  speak() {
    console.log(this.name + " makes a noise.");
  }
};

class Dog {
  constructor(name) {
    this.name = name;
  }
}

Object.setPrototypeOf(Dog.prototype, Animal);// If you do not do this you will get a TypeError when you invoke speak

var d = new Dog("Mitzie");
d.speak(); // Mitzie makes a noise.

以上需要说明的点：
1.类必须使用new调用，否则会报错。
2.子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

三、constructor方法

constructor 是一种用于创建和初始化class创建的对象的特殊方法。如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。

class Animal {
}
 
// 等同于
class Animal {
  constructor() {}
}

以上需要说明的点：
1.constructor方法默认返回实例对象（即this）。
2.在一个类中只能有一个名为 “constructor” 的特殊方法。一个类中出现多次构造函数 (constructor)方法将会抛出一个 SyntaxError 错误。

四、super关键字

1.super作为函数时，指向父类的构造函数。super()只能用在子类的构造函数之中，用在其他地方就会报错。

class Animal{
   constructor(){
      console.log(new.target.name);
   } 
} 
class Dogs extends Animal {
   constructor() {
      super(); 
  } 
} 
new Animal() // Animal
new Dogs() // Dogs

super作为对象时，指向父类的原型对象。

class A {
  p() {
    return 2;
  }
}
 
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}
super指向父类的原型对象，此时super.p()就相当于A.prototype.p()。
以上需要说明的点：
1.由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

五.类的prototype属性和__proto__属性

Class 作为构造函数的语法糖，同时有prototype 属性和__proto__属性，因此同时存在两条继承链。
1.子类与父类
1.子类的__proto__属性，表示构造函数的继承，总是指向父类。
2.子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

class A {}  
class B extends A {}  
B.__proto__ === A // true  
B.prototype.__proto__ === A.prototype // true

2.实例的 proto 属性

子类实例的 proto 属性的 proto 属性，指向父类实例的 proto 属性。也就是说，子类的原型的原型，是父类的原型。

class A{}  
class B extends A{}  
let a = new A();  
let b = new B();  
console.log(b.__proto__ === a.__proto__);//false  
console.log(b.__proto__.__proto__ === a.__proto__);//true

云服务器 GPU云服务器 es6中的class es6class java中class类 linux中的使用

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

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

ES6+ class中代码的真正样子

摘要：一用定义一个空类在中在中结论这个结果很清晰，原来中的类在中也是定义一个构造函数，然后返回出来。这篇文章用代码对比的方式解释ES6中的类如果用我们熟悉的ES5来看是什么样的。一、用class定义一个空类在ES6中： class Person { } 在ES5中： var Person = (function () { function Person() { } ...

PascalXie 2019-08-20 15:11 评论0 收藏0
ES6 系列之 Babel 是如何编译 Class 的(上)

摘要：前言在了解是如何编译前，我们先看看的和的构造函数是如何对应的。这是它跟普通构造函数的一个主要区别，后者不用也可以执行。该函数的作用就是将函数数组中的方法添加到构造函数或者构造函数的原型中，最后返回这个构造函数。前言在了解 Babel 是如何编译 class 前，我们先看看 ES6 的 class 和 ES5 的构造函数是如何对应的。毕竟，ES6 的 class 可以看作一个语法糖，...

shadajin 2019-08-23 12:48 评论0 收藏0
ES6深入浅出 Classes

摘要：一步，一步前進一步深入浅出之。是构造函数，可在里面初始化我们想初始化的东西。类静态方法大多数情况下，类是有静态方法的。中添加类方法十分容易类方法和静态方法是同一个东西在的语法中，我们可以使用关键字修饰方法，进而得到静态方法。一步，一步前進の一步 ES6深入浅出之Classes。翻译的同时乱加个人见解，强烈推荐阅读原作者的文章，言简意赅。es6-classes-in-depth 类语...

array_huang 2019-08-23 10:45 评论0 收藏0
React Native填坑之旅--class（番外篇）

摘要：构造函数定义侦探类作为例子。里的既是类的定义，也是构造函数。在构造函数中定义的实例方法和属性在每一个实例中都会保留一份，而在原型中定义的实例方法和属性是全部实例只有一份。无论React还是RN都已经迈入了ES6的时代，甚至凭借Babel的支持都进入了ES7。ES6内容很多，本文主要讲解类相关的内容。构造函数定义侦探类作为例子。 ES5的类是如何定义的。 function ES5D...

TwIStOy 2019-08-20 11:37 评论0 收藏0
ES6 中Class创建对象与继承实现

摘要：使用类创建实例对象也是直接对类使用命令，跟中构造函数的用法一致。中没有构造函数，作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。 1 Class in ES6 ES6提出了类(Class)的概念，让对象的原型的写法更像面向对象语言写法。 ES6中通过class定义对象，默认具有constructor方法和自定义方法，但是包含...

zhou_you 2019-08-20 14:40 评论0 收藏0
ES6 中Class创建对象与继承实现

摘要：使用类创建实例对象也是直接对类使用命令，跟中构造函数的用法一致。中没有构造函数，作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。 1 Class in ES6 ES6提出了类(Class)的概念，让对象的原型的写法更像面向对象语言写法。 ES6中通过class定义对象，默认具有constructor方法和自定义方法，但是包含...

wind5o 2019-08-01 16:25 评论0 收藏0