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）内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇LayerClose弹窗关闭刷新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文主要介绍了echarts柱状图坐标轴内容显示不全的两种解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了JavaScript+CSS实现仿天猫侧边网页菜单效果,涉及javascript鼠标事件及页面元素动态操作的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了javascript 判断一个对象为数组的方法的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了JS正则验证邮箱的格式。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的，这也就是一个定时器效果,本文给大家介绍基于JavaScript实现一定时间后去执行一个函数的相关知识，感兴趣的朋友一起学习吧2015-12-12
这篇文章主要为大家介绍了big.js 如何解决精度丢失问题源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了Bootstrap布局之栅格系统，小编对Bootstrap栅格系统（布局）也很陌生，特分享整理这篇文章，感兴趣的小伙伴们可以参考一下2016-06-06
发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知2022-12-12
最新评论