js 中的class

fai1017 发布于2019-08-26 12:20 / 1844人阅读

摘要：重点在于构造函数，使用的是构造函数来模拟类。使用创建子类由于是在类中定义，关键字可以省去创建父类类不可继承没有构造函数的对象如果一个对象没有构造函数，将不能进行继承。

js 的class
由于存在转换器这种神器，所以代码能直接转换为es5，用es6的语法写。

一些解释

js的class仅仅为一个语法糖，是在原先构造函数的基础上出现的class，仅仅如此。所以使用构造函数构造类，或者使用class语法糖构造类都是相同的。具体还是使用prototype和this来进行模拟类。

重点在于构造函数，使用的是构造函数来模拟类。

类声明

需要声明一个类，需要使用class

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

和函数声明的最大的区别在于，类声明，不会出现声明提前，函数声明会出现声明提前，这是两者最大的区别。

在上方中，声明类以后，新建一个对象。

let rectAngle = new Rectangle

该对象具有constructor方法。

匿名类

和匿名函数类似，类依旧可以进行匿名声明

let Rectangle = class {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

在类表达式中，同样会出现类声明提升的问题。

constructor

为一个构造函数，用于初始化class并创建一个对象

即为原先学习的构造函数，函数为对象，对象为函数。

class Rectangle {
    // 构造函数
    constructor(height, width) {
        this.height = height;
        this.width = width;
    };
    // get 方法即调用将会返回的值
    get area() {
        return this.calcArea();
    };
    // 定义calcArea函数
    calcArea() {
        return this.height * this.width;
    }
}

上方定义了一个类如果需要使用

const square = new Rectangle();
console.log(square.area);

即可完成对类的使用。

static

为一个静态方法，该静态new出的来的对象不能进行使用。

常常用于工具函数的书写

class Point {
    constructor(x, y){
        this.x = x;
        this.y = y;
    };

    static distance(a, b){
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        return Math.hypot(dx, dy);    // 毕达哥拉斯定理
    }
}
// 使用
const p1 = new Point(5,5);
const p2 = new Point(10,10);
console.log(Point.distance(p1,p2));

关于严格模式

由于js存在严格模式，并且上面的内容在严格模式下执行，如果该对象没有this的值，将不会返回其本身。

传统的使用prototype将会返回其本身，因为传统的不在严格模式下执行。

extends

使用extends创建子类

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

    speak() {    // 由于是在类中定义，function关键字可以省去
        console.log(this.name);
    }
}
// 创建DOg父类
class Dog extends Animal {
    speak() {
        console.log(this.name);
    }
}

let d = new Dog();
d.name = "ming"
d.speak();

类不可继承没有构造函数的对象

如果一个对象没有构造函数，将不能进行继承。
请使用

Object.create()

进行创建给予对象的新对象

const a = {

};

const b = Object.create(a);    // 创建基于原型a的对象

super

使用super调用超类

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

    speak() {
        console.log();
    };
}  

class Lion extends Cat {
    speak() {
        super.speak();
    }
}

即使用super调用超类

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

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

CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0
React入门0x007: 生命周期概念

摘要：概述上一章只是稍微了解了一下和相关的简单用法，这一章需要讲一下组件的生命周期。生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。 0x000 概述上一章只是稍微了解了一下state和setState相关的简单用法，这一章需要讲一下组件的生命周期。 0x001 生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。大凡事物从...

Blackjun 2019-08-23 11:30 评论0 收藏0
CSS中的class与id区别及用法

摘要：与基本属性及用法在程序中称类，同时在中也书面语也叫类。在样式中以小写的点及来命名如属性属性值而在页面里则以来选择调用命名好的又叫选择器。也就是说只是页面元素的标识，供其他元素脚本等引用。我们平常在用DIV CSS制作Xhtml网页页面时，常会用到class 和id来选择调用CSS样式属性。 CLASS与ID基本属性及用法： Class 在程序中称类，同时在CSS中也书面语也叫类。 ...

Carl 2019-04-23 11:57 评论0 收藏0
JS中的className操作

摘要：检查元素是否已经存在某下面的正则表达式用来检查元素是否已经存在某个使用操作使用操作现代浏览器都支持使用方法来操作元素的，但是中不支持该方法，即使使用了添加className (1)修改元素的所有的 class 用新的 class 替换掉原有的所有 class，可以设置 className 属性： document.getElementById(MyElement).className...

刘厚水 2019-08-20 12:31 评论0 收藏0
ES6 class继承与super关键词深入探索

摘要：请看对应版本干了什么可知，相当于以前在构造函数里的行为。这种写法会与上文中写法有何区别我们在环境下运行一下，看看这两种构造函数的有何区别打印结果打印结果结合上文中关于原型的论述，仔细品味这两者的差别，最好手动尝试一下。 ES6 class 在ES6版本之前，JavaScript语言并没有传统面向对象语言的class写法，ES6发布之后，Babel迅速跟进，广大开发者也很快喜欢上ES6带...

jubincn 2019-08-26 10:58 评论0 收藏0