一、Class的基本语法

1、简介


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

如果要生成一个对象实例,需要先定义一个构造函数,然后通过new操作符来完成。构造函数实例:

//函数名和实例化构造名相同并且大写(有助于区分构造函数和普通函数)

function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.read = function(){
return "我的名字叫" + "this.name" + "今年" + this.age + "岁了";
} var obj = new Person("一诺",18);//通过构造函数创建对象,使用new
console.log(obj.read()) //结果:我的名字叫一诺今年18岁了。

上面代码的代码用ES6改写:

class Person{ //定义一个名为Person的类
constructor(name,age){ //constructor是一个构造方法,用来接收参数
this.name = name;
this.age = age;
}
read(){
return "我的名字叫" + this.name + "今年" + this.age + "岁了"
}
}
var obj = new Person ("一诺",18)
console.log(obj.read()) //我的名字叫一诺今年18岁了

constructor方法是类的构造函数的默认方法,通过new 命令生成对象实例时,自动调用该方法。

class Box{
constructor(){
console.log("这个礼拜天气不错"); //当实例化对象时该行代码会执行
}
} var obj = new Box();
 
constructor方法如果没有显式定义,会隐式生成一个constructor方法。所以即使你没有添加构造函数,构造函数也是存在的。constructor方法默认返回实例对象this,但是也可以指定constructor方法返回一个全新的对象,让返回的实例对象不是该类的实例。
class Desk{
constructor(){
this.ss = "大千世界,无奇不有";
}
}
class Box{
constructor(){
return new Desk();//没有用this,直接返回一个全新的对象
}
}
var obj = new Box();
console.log(obj.ss) //大千世界,无奇不有

class不错在变量提升,所以需要先定义再使用。因为ES6不会把类的声明提升到代码的头部,但是ES5就不一样,ES5存在变量提升,可以先使用,然后再定义

2、静态方法
类相当于实例的原型,所有再类中定义的方法,都会被实例继承。如果再一个方法前加上static关键字,就 表示该方法不会被实例继承,而是直接通过类来调用,这就称为静态方法

 
注意,如果静态方法包含this关键字,这个this指的是类,而不是实例
          类的静态方法不可被实例所继承,却可以被子类继承
3、静态属性
4、class的继承
5、super关键字

ES6之Class类的更多相关文章

  1. Nodejs与ES6系列4:ES6中的类

    ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...

  2. ES6中的类

    前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...

  3. 深入理解ES6之——JS类的相关知识

    基本的类声明 类声明以class关键字开始,其后是类的名称:剩余部分的语法看起来像对象字面量中的方法简写,并且在方法之间不需要使用逗号. class Person { //等价于prototype的构 ...

  4. ES6中的类和继承

    class的写法及继承 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子     function Point(x, y) {  this.x = x;  this. ...

  5. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  6. 160803、如何在ES6中管理类的私有数据

    如何在ES6中管理类的私有数据?本文为你介绍四种方法: 在类的构造函数作用域中处理私有数据成员 遵照命名约定(例如前置下划线)标记私有属性 将私有数据保存在WeakMap中 使用Symbol作为私有属 ...

  7. ES6里关于类的拓展(二):继承与派生类

    继承与派生类 在ES6之前,实现继承与自定义类型是一个不小的工作.严格意义上的继承需要多个步骤实现 function Rectangle(length, width) { this.length = ...

  8. ES6里关于类的拓展(一)

    大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中 ...

  9. es6入门5--class类的基本用法

    在ES6之前,准确来说JavaScript语言并无类的概念,却有模拟类的做法.相比在类似java这类传统面向对象语言中通过类来生成实例,js则通过构造函数模拟类来生成实例. 这是因为在JS设计初期,作 ...

  10. TypeScript完全解读(26课时)_7.ES6精讲 - 类Class基础

    ES6精讲 - 类Class基础 es5中创建构造函数和实例 原来在es5中的写法 定义好Point后,在原型对象上定义getPostion的方法 实例自身是没有这个方法的,我们调用的时候会去创建他的 ...

随机推荐

  1. ZZ:SDNLAB技术分享(一):ODL的SFC入门和Demo

    在网络通信过程中,包含各式各样的网络服务功能.既可以包含传统的像防火墙,NAT等功能,也有包含特定的网络应用功能(Service Function).将特定的网络应用功能有序地组合起来,接着让流量通过 ...

  2. CentOS 7 安装并配置 MySQL 5.7

    Linux使用MySQL Yum存储库上安装MySQL 5.7,适用于Oracle Linux,Red Hat Enterprise Linux和CentOS系统. 1.添加MySQL Yum存储库 ...

  3. SpringCache自定义过期时间及自动刷新

    背景前提 阅读说明(十分重要) 对于Cache和SpringCache原理不太清楚的朋友,可以看我之前写的文章:Springboot中的缓存Cache和CacheManager原理介绍 能关注Spri ...

  4. luogu P5002 专心OI - 找祖先

    题目描述 这个游戏会给出你一棵树,这棵树有NN个节点,根结点是RR,系统会选中MM个点P_1,P_2...P_MP 1 ​ ,P 2 ​ ...P M ​ ,要Imakf回答有多少组点对(u_i,v_ ...

  5. 自学PHP的第22天---ThinkPHP中的路由、ThinkPHP目录结构

    这一切的一切都得从“Hello world”说起!!! 有很多东西在thinkPHP的官方开发文档上其实都有讲到,我在这里只是想记录自己每天坚持学习PHP的情况,今天接触ThinkPHP的路由,路由这 ...

  6. 第八章 使用jQuery操作DOM

    DOM操作: jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器的兼容. 它还让有页面元素真正动起 ...

  7. 【JS】395-重温基础:事件

    本文是 重温基础 系列文章的第二十篇. 这是第三个基础系列的第一篇,欢迎持续关注呀!重温基础 系列的[初级]和[中级]的文章,已经统一整理到我的[Cute-JavaScript](http://js. ...

  8. 【JS】379- 教你玩转数组 reduce

    reduce 是数组迭代器(https://jrsinclair.com/articles/2017/javascript-without-loops/)里的瑞士军刀.它强大到您可以使用它去构建大多数 ...

  9. 【CentOS7】curl命令

    [CentOS7]curl命令 转载: 参考 https://www.thegeekstuff.com/2012/04/curl-examples/ http://www.cnblogs.com/gb ...

  10. 【CentOS7】修改yum源

    [CentOS7]修改yum源 转载:https://www.cnblogs.com/yangchongxing/p/10645944.html 1.备份源 # mv /etc/yum.repos.d ...