美文网首页
ES6入门之class基本用法

ES6入门之class基本用法

作者: yu580 | 来源:发表于2017-07-16 17:45 被阅读0次

基本概念

基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。


JS语言的传统方法是通过构造函数定义并生成新对象的。是一种基于原型的面向对象系统。举例来说:

const Foo = function(a,b) {
this.a = a;
this.b = b;
return this;
}
Foo.prototype = {
constructor: Foo,
print: function() {
  console.log(this.a + '' + this.b);
}
}
const foo = new Foo('hello','world').print();//hello world

以上就是es5的写法,下面用ES6对它进行改写来熟悉class的基本用法:

class Foo {
  constructor(a,b){
  this.a = a;
  this.b = b;
  return this;
  }
  print() {
    console.log(this.a +''+ this.b);
  }
}
const foo = new Foo('hello','world').print();//hello world

下面来简要的的说明一下:

  1. Foo 中的constructor方法是构造方法,this关键字则代表实例对象。也就是说,ES5的构造函数Foo,对应ES6的Foo这个类的构造方法。
    2.Foo这个类除了构造方法还有一个print方法。注意定义‘类’的方法的时候,前面是不需要加上function这个关键字的。直接把函数定义放进去就好。方法之间是不需要加逗号的,加了都好会报错。
    3.构造函数的prototype属性,在ES6的类上面继续存在。而且类的所有方法都定义在类的prototype属性上面。
    console.log(Foo.prototype); //Object {constructor: function, print: function}
    4.定义在类中的方法都是不可被枚举的。
    console.log(Object.keys(Foo.prototype));//[]
    5.constructor方法是类的默认方法,通过new命令生成的对象实例时,自动调用该方法。一个类必须有constructor方法。如果没有显式的定义,一个空的constructor方法会被默认添加。
    class Y{}; const y = new Y(); console.log(y);//function(){}一个空函数被创建就是因为默认添加了constructor
    6.生成类的实例对象的写法,与ES5完全一样,也是实用new命令。如果忘记添加new,直接调用class,将会报错。

以上都是个人理解如有不对之处还望指正交流!

相关文章

  • ES6入门之class基本用法

    基本概念 基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class...

  • ES6入门基础

    ES6入门基础 一.let & const 1.基本用法 es6新增 let命令,用来申明变量,用法类似于var,...

  • Es6 中class的理解

    参考文档ECMAScript 6 入门。 1、对于class Es6的用法可能我们平常用的比较熟悉,但是真正...

  • es6之class 基本用法解析

    javaScript 语言中,生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Jav...

  • 函数,数组的扩展

    ECMAScript 6 入门 函数参数的默认值 § ⇧ 基本用法 § ⇧ ES6 之前,不能直接为函数的参数指定...

  • 4、TS 类

    1、类的三个特点:封装、继承、多态入门重点体验封装 2、回顾js中的构造函数 3、class用法 关于es6 cl...

  • ES6之 let 和 const 命令

    ES6 之 let 和 const 命令 1、let 命令 1.1、基本用法 ES6 新增了let命令,用来声明变...

  • let和const命令

    es6标准入门 第2章 let和const命令 2.1 let命令 2.1.1 基本用法 let用来声明变量,但所...

  • Lesson4:ES6简易入门(class的基本用法)

    class这个概念,在其他编程语言中很早就实现了,而JavaScript语言并没有实现,一直以来,开发者都是使用函...

  • Set 和 Map 数据结构

    本文介绍 Set、WeakSet、Map、WeakMap 的基本用法 一、Set 1.1、基本用法 ES6 提供了...

网友评论

      本文标题:ES6入门之class基本用法

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