ES6中的类（Class）示例详解

类的基本语法

ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
//创建对象
let p = new Point(1,2);
console.log(p.toString());

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5的构造函数Point，对应ES6的Point类的构造方法。

Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

注意：生成类的实例对象的写法，要使用new命令。如果忘记加上new，像ES5函数那样调用Class，将会报错。

// 报错
let point = Point(2,3);
// 正确
let point = new Point(2,3);

constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

constructor() {}

注意：constructor方法默认返回实例对象（即this）

扩展：constructor方法默认返回实例对象（即this），但也可以指定返回另外一个对象。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			class Point {
			  constructor() {
			    return new Date();
			    //return Object.create(null);
			  }
			}
			let p = new Point();  //返回为Date对象
			console.log(p);

		</script>
	</body>
</html>

效果截图：

Constructor与普通构造函数的区别： 类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
let p = Point(); //TypeError: Class constructor Point cannot be invoked without 'new'

this与class（原型）

class：类，是对象的模板。（或者叫：原型） this：当前对象。 以上定义，与java中的概念是相同的。 但是，由于javascript语言自身的特点，关于class与this，还需要做进一步说明。

注意：在javascript中，在定义类完毕之后，还可以再添加属性和方法。

属性与方法添加到this上

class Point {
  constructor() { }
}
let p = new Point();
p.username = 'zhangsan';
console.log(p.username);  //zhangsan

上面代码中，Point类定义之后，给对象 p 又添加了一个username属性。这是完全可以的。 但是要注意：此种方式，仅仅是给对象p添加一个属性，而不是给类添加一个属性。 或者说： 此种方式，仅仅是给对象p的this添加一个属性，而不是给类添加一个属性。

class Point {
  constructor() { }
}
let p1 = new Point();
p1.username = 'zhangsan';
console.log(p1.username);  //zhangsan

let p2 = new Point();
console.log(p2.username);  //undefined

上面例子中，只给对象p1添加了username属性，但没有给类添加属性。 所以，p2对象中并没有username属性。

属性与方法添加到类上

class Point {
  constructor() { }
}
Point.prototype.username = 'zhangsan';

let p1 = new Point();
console.log(p1.username);  //zhangsan

let p2 = new Point();
console.log(p2.username);  //zhangsan

上面代码中，使用 Point.prototype方式，给类添加属性。 这样，类的所有对象（p1、p2）就都有username属性了。

在javascript中，每一个类都有一个prototype，它就是类的原型，类的所有实例共享一个原型。如果想访问这个原型，可以使用proto指针。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			class Point {
			 constructor() { }
			}
			let p = new Point();
			console.log(p.__proto__);   //注意proto指针的写法
			/**
			 * 输出结果：
			 * {constructor: ƒ}
			 * constructor: class Point //这里证明：proto指针指向类的原型
			 * __proto__: Object
			 */

			let p1 = new Point();
			let p2 = new Point();
			//这里证明：类的所有实例共享一个原型
			console.log(p1.__proto__===p2.__proto__); //true
		</script>
	</body>
</html>

效果截图：

类的静态成员

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			class Point {
			  constructor() { }
			}
			Point.username = '牛哄哄的柯南';

			let p = new Point();
			console.log(p.username);    //undefined
			console.log(Point.username);  //牛哄哄的柯南
		</script>
	</body>
</html>

效果截图：

上面代码中，直接使用 Point.username 方式给类添加一个属性，此种方式只是添加了一个静态属性，访问时，只能通过类名才能访问。

到此这篇关于ES6中类（Class）的文章就介绍到这了,更多相关ES6的类（Class）内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 聊聊JS ES6中的解构

    概述 es6新增了一种从数组或者对象中获取指定元素的方式,这种方式就是我们今天要说的解构. 先来说说数组的解构 在有解构之前呢,我们获取数组中的指定元素通常是根据索引去做的: const arr = [1, 2, 3]; const a = arr[1]; 有了解构之后呢,我们便可以使用如下方式快速的去获取数组中的某个元素: const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a); console.log(b); console.

  • ES6 十大特性简介

    ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率. 本文主要针对ES6做一个简要介绍. 也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范.在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的十大特性. 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.Block-Scop

  • ES6基础之展开语法(Spread syntax)

    展开语法用"..."进行表示,展开语法将可迭代的对象拆分成独立的值(语法层面展开).扩展语法通常用于将可迭代的对象的值传递到函数的参数中.今天小编将从以下方面进行介绍: 函数传参中的应用 数组的相关应用 剩余参数的应用 函数传参中的应用 ES6之前,如果我们希望将数组作为参数分别传递给函数中的参数,我们可以使用Function的apply()方法.如下段代码所示: function myFunction(a, b) { return a + b; } var data = [1, 4]

  • JS ES6展开运算符的几个妙用

    1. 添加属性 复制对象的同时,为其添加新的属性. 例子中复制了user对象到userWithPass,并添加了password属性. const user = { id: 110, name: 'Kayson Li'} const userWithPass = { ...user, password: 'Password!' } user //=> { id: 110, name: 'Kayson Li'} userWithPass //=> { id: 110, name: 'Kayson

  • JavaScript中展开运算符及应用的实例代码

    展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用. let obj1 = { value1: 1, value2: 2 }; let obj2 = {...obj1 }; console.log(obj2); // {value1: 1, value2: 2} 上面的用法实际相当于 obj2 = {value1: 1, value2: 2} 展开运算符的写法与obj2

  • JavaScript展开操作符(Spread operator)详解

    你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串.展开运算符(spread)是三个点(-),可以将可迭代对象转为用逗号分隔的参数序列.如同rest参数的逆运算. 用于数组 以数组为例,首先创建一个数组, const a = [1, 2, 3], b = [4,5,6]; 你可以轻松赋值一个数组: const c = [...a] // [1,2,3] 你还可以轻松拼接两个数组: const d = [...a,...b] // [1,2,3,4,5,6] 也可

  • 详解ES6 扩展运算符的使用与注意事项

    扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开:还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开.常用的语法如下: //函数调用: myFunction(...iterableObj); //字面量数组构造或字符串: [...iterableObj, '4', ...'hello', 6]; // 构造字面量对象时,进

  • ES6字符串的扩展实例

    本节我们来学习 ES6 中字符串类型的扩展,包括一些字符串对象的新增方法的使用等. 字符的 Unicode 表示法 ES6 加强了对 Unicode 的支持,JavaScript 中可以采用 \\uxxx 形式表示一个字符,其中 xxxx 表示字符的码点.例如: console.log("\u0075"); // u 但是这种表示法只限于码点在 \\u0000~\\uFFFF 之间的字符.超出这个范围的字符,必须用两个双字节的形式表示. console.log("\uD842

  • JS ES6异步解决方案

    最初使用回调函数 ​ 由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不便于使用. ​ 但是node中有明确的规范 ​ node中的的回调模式: 1. 所有回调函数必须有两个参数,第一个参数表示错误,第二个参数表示结果 2. 所有回调函数必须作为函数最后的参数 3. 所有回调函数不能作为属性出现 es6 异步处理模型 Es6 出现以后, 官方就提出了异步处理的规范, 提出了一种适用于所有异步场景的处理模型.该模型有:

  • Python中的类对象示例详解

    抽象特点 Python 一切皆对象,基于此概念,对 类 class 有以下特点: 类与实例的属性 类对象创建可选择定义类属性,创建实例对象时,实例属性自动执行类的__init__方法初始化 实例对象自动继承相应的类属性(如果有),但实例属性优先级更高 实例方法,类方法,静态方法的参数 实例方法是一般函数但实例方法需要传入self参数(与一般函数的区别) 类方法和静态方法是通过装饰器实现的函数,类方法需要传入cls参数,静态方法无需传入self参数或者是cls参数(但也能传入参数) 其中self参

  • React项目使用ES6解决方案及JSX使用示例详解

    目录 不使用 ES6 绑定 JSX如何? 不使用 ES6 然而,在纯浏览器端使用ES6语法时,浏览器支持存在差异,这需要特殊处理才能正常运行. 支持ES2015桌面浏览器 Chrome:从51版开始,它可以支持ES6 97%的新功能. Firefox:53版本支持97%的ES6新功能. Safari:从版本10开始,ES6 99%的新功能都可以得到支持. IE:Edge 15可以支持96%的ES6新功能. Edge 14可以支持93%的新ES6功能.(IE7~11基本不支持ES6) class

  • Flutter 中 Dart的Mixin示例详解

    原文在这里.写的不错,推荐各位看原文. 这里补充一下Mixin的定义: 只要一个类是继承自Object的而且没有定义构造方法,那么这个类可以是一个Mixin了.当然,如果你想让mixin的定义更加的清晰,可以使用mixin关键字开头来定义.具体请参考这里 原文截图体会一下风格. 正文 在经典的面向对象编程语言里一定会有常规的类,抽象类和接口.当然,Dart也有它自己的接口,不过那是另外的文章要说的.有的时候阴影里潜伏者另外的野兽:Mixin!这是做什么的,如何使用?我们来一起发现. 没有mixi

  • shrio中hashedCredentialsMatcher密码匹配示例详解

    shrio中hashedCredentialsMatcher密码匹配示例详解

    类图如下: SimpleCredentialsMatcher是明文匹配,也是shrio框架默认的比对方式,网上的例子多是此方式.实际项目中,数据库中的密码一般是密文,此时密码的匹配需使用HashedCredentialsMatcher完成. 处理过程 在controller中通过Subject的login(token)将接收过来用户账号和密码(明文)交给shrio框架,示例代码如下 其次通过HashedCredentialsMatcher告诉shrio使用加密方式: 最后通过Authorizin

  • Java中的反射机制示例详解

    Java中的反射机制示例详解

    目录 反射 什么是Class类 获取Class实例的三种方式 通过反射创建类对象 通过反射获取类属性.方法.构造器 更改访问权限和实例赋值 运用场景 反射 反射就是把Java类中的各个成分映射成一个个的Java对象.即在运行状态中,对于任意一个类,都能够知道这个类的所以属性和方法:对于任意一个对象,都能调用它的任意一个方法和属性.这种动态获取信息及动态调用对象方法的功能叫Java的反射机制 每一个Java程序执行必须通过编译.加载.链接和初始化四个阶段 1.编译:将.java.文件编译成字节码.

  • Swift 中的 JSON 反序列化示例详解

    Swift 中的 JSON 反序列化示例详解

    目录 业界常用的几种方案 手动解码方案,如 Unbox(DEPRECATED) 阿里开源的 HandyJSON 基于 Sourcery 的元编程方案 Swift build-in API Codable 属性装饰器,如 BetterCodable 各个方案优缺点对比 Codable 介绍 原理浅析 Decoder.Container 协议 自研方案 功能设计 Decoder.Container 具体实现 再议 PropertyWrapper 应用场景示例 单元测试 性能对比 业界常用的几种方案

  • Java中随机函数变换的示例详解

    Java中随机函数变换的示例详解

    目录 说明 解决的问题 问题1 问题2 问题3 问题4 说明 本示例中基于 Java ,其他语言也有类似的 API 解决的问题 问题1 Java 中 Math.random()函数是等概率返回区间[0,1)中的任意一个小数.即x < 1情况下,[0,x)中的数出现的的概率是x,如果我们要将x < 1情况下,[0,x)中的数出现的的概率调整成x^2,应该如何做? 问题1思路 由于[0,x)的概率是x,那么调用两次Math.random(),如果较大的那个值也要在[0,x)区间内,那么两次调用都必

  • Java中String类常用方法总结详解

    Java中String类常用方法总结详解

    目录 一. String对象的比较 1. ==比较是否引用同一个对象 2. boolean equals(Object anObject) 3. int compareTo(String s) 4. int compareToIgnoreCase(String str) 二. 字符串查找 三. 转化 1. 数值和字符串转化 2. 大小写转化 3. 字符串和数组的转换 4. 格式化 四. 字符串替换 五. 字符串拆分 六. 字符串截取 七. 其他操作方法 1. String trim() 2. b

  • python案例中Flask全局配置示例详解

    目录 WEB服务全局配置 Flask全局配置 before_request after_request Flask自定义中间件 WEB服务全局配置 在目前的开发过市场当中,有很多WEB服务框架,Flask只是其中之一,但是总体上来看,所有的WEB框架都是依据HTTP协议的逻辑从请求到响应设计的.固然有很多功能是独立的,但是也有一部分功能需要全局设定,比如安全校验,比如埋点日志,那么这里就用到了全局配置. 所谓的全局配置,就是在框架全局,请求前后,响应前后,设置的全局配置,比如登录校验,这个功能并

  • Java中Math类常用方法代码详解

    近期用到四舍五入想到以前整理了一点,就顺便重新整理好经常见到的一些四舍五入,后续遇到常用也会直接在这篇文章更新... public class Demo{ public static void main(String args[]){ /** *Math.sqrt()//计算平方根 *Math.cbrt()//计算立方根 *Math.pow(a, b)//计算a的b次方 *Math.max( , );//计算最大值 *Math.min( , );//计算最小值 */ System.out.pri

随机推荐