ES6中的类(Class)示例详解


Posted in Javascript onDecember 09, 2020

类的基本语法

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>

效果截图:

ES6中的类(Class)示例详解

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>

效果截图:

ES6中的类(Class)示例详解

类的静态成员

样例代码:

<!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>

效果截图:

ES6中的类(Class)示例详解

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

到此这篇关于ES6中类(Class)的文章就介绍到这了,更多相关ES6的类(Class)内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
jQuery插件开发全解析
Oct 10 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
JavaScript实现表单验证功能
Dec 09 #Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 #Javascript
javascript全局自定义鼠标右键菜单
Dec 08 #Javascript
javascript局部自定义鼠标右键菜单
Dec 08 #Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 #Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
You might like
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
python实现百度关键词排名查询
2014/03/30 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Python如何发布程序的详细教程
2018/10/09 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python搜索包的路径的实现方法
2019/07/19 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
乡下人家教学反思
2014/02/01 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书