首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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）内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

ES6中的类（Class）示例详解

- Author -

牛哄哄的柯南

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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
九宫格(5) queue(1) 表结构(1) RecyclerView(1) Simhash(1) 控制流(1) Hadoop(1) REGEXP(1) 字段分割(1) TaiShan(1)
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
如何隐藏你的.php文件
2007/01/04 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
php实现的简单日志写入函数
2015/03/31 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
js 小数取整的函数
2010/05/10 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
swiper移动端轮播插件（触碰图片之后停止轮播）
2017/12/28 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python实现自动发送邮件
2018/06/20 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
python的range和linspace使用详解
2019/11/27 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
葡萄牙语专业个人求职信
2013/12/10 职场文书
高三学生评语大全
2014/04/25 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2014年护士长工作总结
2014/11/11 职场文书
化工厂员工工作总结
2015/10/15 职场文书
python如何读取.mtx文件
2021/04/22 Python