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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
jquery 插件学习(一)
Aug 06 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
JS中判断null的方法分析
Nov 21 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
webpack常用构建优化策略小结
Nov 21 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 不同编码下的字符串长度区分
2009/09/26 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python完全新手教程
2007/02/08 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python反编译学习之字节码详解
2019/05/19 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
波兰在线运动商店:YesSport
2020/07/23 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
年度考核评语
2014/01/19 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
十八大感想感言
2014/02/10 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python