ES6之Class类
一、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();
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关键字,就 表示该方法不会被实例继承,而是直接通过类来调用,这就称为静态方法
ES6之Class类的更多相关文章
- Nodejs与ES6系列4:ES6中的类
ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...
- ES6中的类
前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...
- 深入理解ES6之——JS类的相关知识
基本的类声明 类声明以class关键字开始,其后是类的名称:剩余部分的语法看起来像对象字面量中的方法简写,并且在方法之间不需要使用逗号. class Person { //等价于prototype的构 ...
- ES6中的类和继承
class的写法及继承 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子 function Point(x, y) { this.x = x; this. ...
- ES6中的类继承和ES5中的继承模式详解
1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...
- 160803、如何在ES6中管理类的私有数据
如何在ES6中管理类的私有数据?本文为你介绍四种方法: 在类的构造函数作用域中处理私有数据成员 遵照命名约定(例如前置下划线)标记私有属性 将私有数据保存在WeakMap中 使用Symbol作为私有属 ...
- ES6里关于类的拓展(二):继承与派生类
继承与派生类 在ES6之前,实现继承与自定义类型是一个不小的工作.严格意义上的继承需要多个步骤实现 function Rectangle(length, width) { this.length = ...
- ES6里关于类的拓展(一)
大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中 ...
- es6入门5--class类的基本用法
在ES6之前,准确来说JavaScript语言并无类的概念,却有模拟类的做法.相比在类似java这类传统面向对象语言中通过类来生成实例,js则通过构造函数模拟类来生成实例. 这是因为在JS设计初期,作 ...
- TypeScript完全解读(26课时)_7.ES6精讲 - 类Class基础
ES6精讲 - 类Class基础 es5中创建构造函数和实例 原来在es5中的写法 定义好Point后,在原型对象上定义getPostion的方法 实例自身是没有这个方法的,我们调用的时候会去创建他的 ...
随机推荐
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
目录 Event Loop 是什么? Event Loop 基本解释 事件循环阶段概览 事件循环细节 timers pending callbacks poll阶段 check close callb ...
- luogu P1731 [NOI1999]生日蛋糕 |暴力枚举
题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...
- luogu P1850 换教室
题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n 节课程安排在 n 个时间段上.在第 i (1 ≤ i ≤ n)个时间段上,两节内容 ...
- Chrome DevTools开发者工具调试
1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...
- Mybatis底层源码分析
MyBatis 流程图 Configuration.xml 该配置文件是 MyBatis 的全局配置文件,在这个文件中可以配置诸多项目.常用的内容是别名设置,拦截器设置等. Properties(属性 ...
- LNMP-Nginx配置不记录静态文件、过期时间
用户访问web网站,通常日志文件会记录很多web站点上的一些静态文件信息,如果长期不处理,日志文件会越来越大,占用的系统资源也越大,此时就需要我们配置不记录静态文件和过期时间,减少日志文件记录过多不必 ...
- Electron开发和Web开发对比
- SoC的软件开发流程,主要包含一些Linux下的操作命令
该笔记主要记录SoC的软件开发流程,主要包含一些Linux下的操作命令 1. 编写design file .c .h 2. 编写makefile 可执行文件名,交叉编译环境,compile fl ...
- django基础之day08,ajax结合sweetalert的使用
models.py文件 from django.db import models class User(models.Model): username=models.CharField(max_len ...
- 《Java基础知识》一维,二维数组的申明和使用
为什么要使用数组: 因为不使用数组计算多个变量的时候太繁琐,不利于数据的处理. -------- 数组也是一个变量,是存储一组相同类型的变量 声明一个变量就是在内存中划出一块合适的空间 声明一个数 ...