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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
js实现右键自定义菜单
Dec 03 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
mpvue 单文件页面配置详解
Dec 02 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
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python字典简介以及用法详解
2016/11/15 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
2014年纠风工作总结
2014/12/08 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
mysql如何查询连续记录
2022/05/11 MySQL