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的方法 实例自身是没有这个方法的,我们调用的时候会去创建他的 ...
随机推荐
- ZZ:SDNLAB技术分享(一):ODL的SFC入门和Demo
在网络通信过程中,包含各式各样的网络服务功能.既可以包含传统的像防火墙,NAT等功能,也有包含特定的网络应用功能(Service Function).将特定的网络应用功能有序地组合起来,接着让流量通过 ...
- CentOS 7 安装并配置 MySQL 5.7
Linux使用MySQL Yum存储库上安装MySQL 5.7,适用于Oracle Linux,Red Hat Enterprise Linux和CentOS系统. 1.添加MySQL Yum存储库 ...
- SpringCache自定义过期时间及自动刷新
背景前提 阅读说明(十分重要) 对于Cache和SpringCache原理不太清楚的朋友,可以看我之前写的文章:Springboot中的缓存Cache和CacheManager原理介绍 能关注Spri ...
- luogu P5002 专心OI - 找祖先
题目描述 这个游戏会给出你一棵树,这棵树有NN个节点,根结点是RR,系统会选中MM个点P_1,P_2...P_MP 1 ,P 2 ...P M ,要Imakf回答有多少组点对(u_i,v_ ...
- 自学PHP的第22天---ThinkPHP中的路由、ThinkPHP目录结构
这一切的一切都得从“Hello world”说起!!! 有很多东西在thinkPHP的官方开发文档上其实都有讲到,我在这里只是想记录自己每天坚持学习PHP的情况,今天接触ThinkPHP的路由,路由这 ...
- 第八章 使用jQuery操作DOM
DOM操作: jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器的兼容. 它还让有页面元素真正动起 ...
- 【JS】395-重温基础:事件
本文是 重温基础 系列文章的第二十篇. 这是第三个基础系列的第一篇,欢迎持续关注呀!重温基础 系列的[初级]和[中级]的文章,已经统一整理到我的[Cute-JavaScript](http://js. ...
- 【JS】379- 教你玩转数组 reduce
reduce 是数组迭代器(https://jrsinclair.com/articles/2017/javascript-without-loops/)里的瑞士军刀.它强大到您可以使用它去构建大多数 ...
- 【CentOS7】curl命令
[CentOS7]curl命令 转载: 参考 https://www.thegeekstuff.com/2012/04/curl-examples/ http://www.cnblogs.com/gb ...
- 【CentOS7】修改yum源
[CentOS7]修改yum源 转载:https://www.cnblogs.com/yangchongxing/p/10645944.html 1.备份源 # mv /etc/yum.repos.d ...