ES6中的class的使用

brianway 发布于2019-08-23 12:09 / 1761人阅读

摘要：的传统生成一个类的方法，需要定义一个构造函数，然后通过的方式生成。定义类父类定义子类，继承父类可以调用父类的方法如果子类中有构造函数，则必须使用调用。这是因为子类没有自己的对象，而是继承父类的对象，然后对其进行加工。

js的传统生成一个类的方法，需要定义一个构造函数，然后通过new的方式生成。

function Cat() {
    this.name = "kitty";
    this.color = "yellow";
}
var cat = new Cat();

js中只有对象，没有类。这样的写法和传统面向对象语言差异很大，很容易让新手感到困惑。

定义类

ES6添加了类，作为对象的模板。通过class来定义一个类：

//定义类
class Cat {
    constructor() {
        this.name = "kitty";
        this.color = "yellow";
    }
    //不需要加分号隔开，否则会报错,而且不用加上function关键字
    getNames() {
        console.log("name:" + this.name);
    }
}
//使用new操作符得到一个实力对象
let cat = new Cat()

其实ES6的类，完全可以看作构造函数的另一种写法。

class Cat {
    //...
}
typeof Cat // "function"
Cat === Cat.prototype.constructor // true
//类的数据类型就是函数，类本身就只想构造函数

而且构造函数的prototype属性，在ES6的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面

class Cat {
    constructor () {
        //...
    }
    like () {
        //...
    }
    eat(){
        //...
    }
}    
//等同于
Cat.prototype = {
    constructor () {},
    like () {},
    eat () {}
}

let miao = new Cat()
miao.constructor === Cat.prototype.constructor // true

严格模式

类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。
考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

constructor 方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

类的实例对象

用new命令生成类的实例对象

class Cat {
    //...
}
var cat = Cat ( "kitty" , "blue");//报错
var cat =  new Cat ( "kitty" , "blue"); //正确

实例的属性定义在原型上

//定义类
class Cat {
    constructor() {
        this.name = "kitty";
        this.color = "yellow";
    }
    getNames() {
        console.log("name:" + this.name);
    }
}
//使用new操作符得到一个实例对象
let cat = new Cat()
cat.getNames() // name:kitty
cat.hasOwnProperty("name")//true
cat.hasOwnProperty("getNames")//false
cat.__proto__.hasOwnProperty("getNames")//true

和ES5一样，类的所有实例共享一个原型对象

let cat1 = new Cat();
let cat2 = new Cat();
cat1.__proto__ === cat2.__proto__

Class 表达式

let dogClass = class Dog {
    getClassName() {
        return Dog.name;
    }
}
let dog = new dogClass();
dog.getClassName() // Dog

不存在变量提升

定义类不存在变量提升，只能先定义类后使用，跟函数声明是有区别的。

//-----函数声明-------
//定义前可以先使用，因为函数声明提升的缘故，调用合法。
func();
function func(){}

//-----定义类---------------
new Cat();  //报错，Cat is not defined
class Cat{}

this的指向

类的方法内部如果如果含有this,它默认指向类的实例。但是，必须非常小心，如果多带带使用，有可能会报错。

class Cat {
    eatFish ( kind = "fish"){
        this.print (`Hello ${fish}`);
    }
    print(str){
        console.log(str)
    }
}
let cat = new Cat();
const { eatFish } = cat;
eatFish;// TypeError: Cannot read property "print" of undefined

上面代码中，eatFish方法中的this, 默认指向Cat类的实例。但是，如果将这个方法提取出来多带带使用，this会指向该方法运行时所在的环境，因为找不到print() 方法而导致错误。

所以，可以在构造方法中绑定this，这样就不会找不到print方法了。

class Cat {
    constructor () {
        this.eatFish = this.eatFish.bind(this);
    }
    //...
}

或者使用箭头函数

class Cat {
    constructor () {
        this.eatFish = (kind = "fish") => {
            this.print(`Hello ${name}`)
        }
    }
}

extends继承

使用extends 关键字实现类之间的继承。这比在ES5中使用继承要方便很多。

//定义类父类
class Parent {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    speakSometing(){
        console.log("I can speek chinese");
    }
}
//定义子类，继承父类
class Child extends Parent {
    coding(){
        console.log("coding javascript");
    }
}

var c = new Child();

//可以调用父类的方法
c.speakSometing(); // I can speek chinese

如果子类中有constructor构造函数，则必须使用调用super。

//定义父类
class Parent {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    speakSometing(){
        console.log("I can speek chinese");
    }
}
//定义子类，继承父类
class Child extends Parent {
    constructor(name,age){
        //不调super()，则会报错  this is not defined

        //必须调用super
        super(name,age);
    }

    coding(){
        console.log("coding javascript");
    }
}

var c = new Child("job",30);

//可以调用父类的方法
c.speakSometing(); // I can speek chinese

子类必须在constructor方法中调用super方法，否则新建实例时会报错(this is not defined)。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

参考：

http://es6.ruanyifeng.com/#docs/class
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes

GPU云服务器云服务器 es6中的class es6class es6中的promise php中的使用

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

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

ES6+ class中代码的真正样子

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

PascalXie 2019-08-20 15:11 评论0 收藏0
ES6 探秘：Classes

摘要：中的同名的实际上就是我们在的原型继承中使用的构造函数，所以中的是对中的构造函数的一种包装。我们发现，在中设定的属性被放在的构造函数中，而方法则以键值对的形式传入一个函数中。大家是不是对这种继承模式似曾相识呢对了，这就是所谓的构造函数窃取。 ES6中增加了一些新特性，但从底层的角度来说，只是一些语法糖。但是就我个人来说，如果不了解这些语法糖的本质，是用不安心的。那我们要如何揭开这些语法糖...

caoym 2019-08-19 17:33 评论0 收藏0
es6中的class

摘要：和大多数浏览器的实现中，每一个对象都有属性除外，指向对应的构造函数的属性。作为构造函数的语法糖，同时有属性和属性，因为存在两条继承链。前言 es6的class其实是构造函数的语法糖，但是又有区别，下面来详细分析下class 定义先来看下class的定义的代码 class Point{ constructor(){} toString(){} } ...

546669204 2019-08-23 11:42 评论0 收藏0
ES6学习总结（三）

摘要：不同于其他面向对象语言，以前的中中没有类的概念，主要是通过原型的方式来实现继承，中引入了原型链，并且将原型链用来实现继承，其核心是利用原型使得一个对象继承另一个对象的方法和属性，中原型继承的关键是将一个实例的原型对象指向另一个实例，因此前一不同于其他面向对象语言，ES6以前的JavaScript中中没有class类的概念，主要是通过原型的方式来实现继承，JavaScript中引入了原...

baoxl 2019-08-21 11:55 评论0 收藏0
JavaScript的es6的class使用

摘要：记录的学习笔记，在回答别人的问题时发现自己的的理解误差很大的在没有带来的的时候，我们编写的时候很多时候会通过构造函数和原型链来添加方法属性，实现的功能。而是看成是构造函数的写法。等同于类的实例对象就像使用构造函数一样使用命令来创建一个实例。记录class的学习笔记，在回答别人的问题时发现自己的的理解误差很大 javascript的class 在没有es6带来的class的时候，我们编...

zgbgx 2019-08-22 13:34 评论0 收藏0