美文网首页
JavaScript es6新语法class

JavaScript es6新语法class

作者: 1CC4 | 来源:发表于2020-04-01 17:45 被阅读0次

在没有es6带来的class的时候,编写JavaScript的时候很多时候会通过构造函数和原型链来添加方法属性,实现class的功能。

一、类

  • es5
// 构造函数
        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.sayName = function () {
                console.log("name", this.name)
            }
        }
// 原型方法
        Person.prototype.getName = function(){
            return this.name;
        }
  • es6
class Person {
  constructor(name, age) {  // 构造函数
    this.name = name;
    this.age = age;
  }
  getName() {   // 这种写法表示将方法添加到原型中
    return this.name
  }
  static a = 20;  // 等同于 Person.a = 20
  c = 20;   // 表示在构造函数中添加属性 在构造函数中等同于 this.c = 20
// 箭头函数的写法表示在构造函数中添加方法,在构造函数中等同于this.getAge = function() {}
  getAge = () => this.age   
}

二、继承extends

class Student extends Person{
    constructor(name,age){
        super(name,age); //调父类Person类构造函数
    }
}

const stu1 = new Student('张三',12);
stu1.sayhi();

只需要一个extends关键字,就可以实现继承了,不用像ES5那样去担心构造函数继承和原型继承,除此之外,我们还需要关注一个叫做super的方法。

super还可以直接调用父级的原型方法

// 构造函数中
// es6 
super(name, age);

// es5
Person.call(this);

相关文章

  • ES6新特性-class、深浅拷贝

    一、ES6新语法-class JavaScript 语言的传统方法是通过构造函数定义并生成新对象。ES6中引入了c...

  • JavaScript ES6中的“Super”和“Extends

    ES6通过class语法及其附加功能使JavaScript看起来简单得多。今天,我们将把class语法功能与继承概...

  • ES6时代的JavaScript面向对象编程

    ES6时代的JavaScript面向对象编程 ES6带来的类语法糖 类的定义 ES6支持了class,extend...

  • Node.js笔记七:es6

    Node.js笔记七:es6 es6是javascript的新一代语法规范,现在很多新的库都是基于新的es6语法规...

  • Day2. JSX核心语法一, 跟着Demo入门JSX

    一. Javascript类的定义 JS语法补充 ES5中定义类 class ES6开始才有的关键字 ES6中通过...

  • ECMAScript 6 篇2

    13. 类ES6 中有 class 语法。值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法...

  • ES6改良ES5中的5大“缺陷”

    前言 ECMAScript 6 (ES6) 新特性可以分为: 新增语法(例如:class) 增强 JavaScri...

  • ES6 面向对象 class 类

    新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 传统的写法 class ES6新写法...

  • ES6中的Class

    ES6的class语法 不是一种新的“类”机制,class基本上只是现有 [[prototype]]链(委托)机制...

  • 类(Javascript)

    类class(Javascript) 为了解决js混合和冗长的问题, ES6新引入了 class关键字具有正式定义...

网友评论

      本文标题:JavaScript es6新语法class

      本文链接:https://www.haomeiwen.com/subject/yxpouhtx.html