ES6类 — 基础
最后更新于：2022-04-02 08:10:22
[Toc]
>[success] # es6 -- 类
[本节部分内容来自阮一峰老师的--es6](http://es6.ruanyifeng.com/#docs/class)
~~~
1.ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对
象的模板。通过class关键字，可以定义类。
~~~
>[info] ## es5 -- 类的声明写法
~~~
1.'es5' 的时候我们还不叫类 ，而是叫'构造函数'，通常将构造还是的命名首
字母大写，利用下面三条实现:
1.1.构造函数中有'prototype'
1.2.对象中有'__proto__'但指向了构造函数中的'prototype'
1.3.构造函数中有'prototype'，就可以利用构造函数给'prototype'赋值，指
向对象中
2.简单的说构造函数中（也就是常说的类）有一个属性'prototype'，我们通
过每一个构造函数(也就是类)创建的实例，有一个'__proto__',它会指向我们
构造函数(也就是类)里面的'prototype',简单的说我们创建构造函数(类)，将方
法寄托给'prototype' 变相的实例就能访问到
~~~
* 案例
~~~
// es5 创建一个对象
function Person(age, name){
this.age = age
this.name = name
}
Person.prototype.toString = function(){
return '名字：'+this.name + '，年龄：' + this.age
}
// 创建一个小明的实例
const xiaoMing = new Person(10,'小明')
console.log(xiaoMing.toString()) // 名字：小明，年龄：10
~~~
>[info] ## es6 人性化的语法糖 -- class
~~~
1.'es5'中类 的概念对与其他语言开发者过来的我来说就是'噩梦'，'es6'在遵
循'es5'的这种方式上，又结合市面大多正常语言创建'类'的方式，衍生了一
个语法糖的形式'class'写法
~~~
>[danger] ##### 用es6重新翻新上面es5的写法
~~~
1.'constructor' 叫构造方法，对应可以理解成'es5'的构造函数，作用就是实
例对象初始化的时候会创建
2.'constructor' 每一个class 中都有这个方法。如果不写实际默认会给创建
一个:
class Person {
}
// 等同于
class Person {
constructor() {}
}
~~~
~~~
// es6 创建一个对象
class Person{
constructor(age,name){
this.age = age
this.name = name
}
toString(){
return '名字：'+this.name + '，年龄：' + this.age
}
}
// 创建一个小明的实例
const xiaoMing = new Person(10,'小明')
console.log(xiaoMing.toString())
~~~
>[danger] ##### 为什么说class 是一个语法糖
~~~
1.使用typeof 看一下刚才创建的class 是'function'类型,变相的说明'js'中还是
没有'class' 只是变相的通过'化妆'的形式，让他变得像其他语言写法相似
~~~
~~~
console.log(typeof Person) // function
console.log(Person === Person.prototype.constructor) // true
~~~
>[danger] ##### class里的constructor -- this 指向
~~~
1.首先里面的构造方法'constructor' -- 中this的指向是'创建的当前实例对象'
2.这里面的'this' 是可以更改的通过return
~~~
* 对第一条说明
~~~
class Person{
constructor(age,name){
this.age = age
this.name = name
}
toString(){
return '名字：'+this.name + '，年龄：' + this.age
}
}
// 创建一个小明的实例 现在constructor 中的this 是
const xiaoMing = new Person(10,'小明')
console.log(xiaoMing.toString())
~~~
* 对第二条说明
~~~
class Person{
constructor(age,name){
this.age = age
this.name = name
return Array
}
toString(){
return '名字：'+this.name + '，年龄：' + this.age
}
}
const xiaoMing = new Person(10,'小明')
console.log(xiaoMing instanceof Person) // false 当前实例已经不是Person归属了
~~~
>[danger] ##### hasOwnProperty -- 判断属性是否存在
~~~
1.说明下这里的案例用的是阮一峰老师的案例
2.hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有
指定的属性
3.通过案例就可以再次证'class' 就是一个语法糖，和'es5' 一样，类的方法是
在实例对象'__proto__' 中
~~~
~~~
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var point = new Point(2, 3);
point.toString() // (2, 3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true
~~~
>[danger] ##### 取值函数（getter）和存值函数（setter）
~~~
1.我们先看下java 中，为什么这么做，首先在java中会把变量设置为私有，
只能类内部调用，外部是无法调用这些私有属性，然后对这些私有属性，分
别提供两个对外暴露的方法方法命名一般：'set属性名'/'get属性名',想操作
这些私有属性只能通过这些方法
2.java 中的好处是' 定义为private 是为了实现数据的隐藏和封装'对象的封装
性，private的只有对象自己才可以访问，其他任何对象不行，包括它的子类
和父类。安全性高，其他对象只能通过它的public方法，set,get来获取或设
置原对象的private属性。public其他对象可以访问，安全性就不高了。
3.但是'es6'目前还没有私有属性这个概念，但未来也会有的
4.'set' 用来赋值，'get' 用来获取
~~~
*es5
~~~
var info = {
_age: 18,
set age (newValue) {
this._age = newValue
if (this._age > 18) {
console.log('怎么变老了')
} else {
console.log('哈哈我还年轻')
}
},
get age () {
console.log('你问我年龄干嘛')
return this._age
}
}
console.log(info.age) //调用get 打印结果 你问我年龄干嘛 18
info.age = 17 // 调用set 打印结果 哈哈我还年轻
~~~
* es6
~~~
class Info {
constructor (age) {
this._age = age
}
// 在set 中吧一些私有的属性进行加工重新赋值
set age (newAge) {
console.log('new age is:' + newAge)
this._age = newAge
}
// 在get 中调用
get age () {
return this._age
}
}
const infos = new Info(18)
// infos.age = 17
// console.log(infos.age)
~~~
>[danger] ##### class -- 表达式
~~~
1.函数是命名函数 和 函数表达式，class也一样也有函数表达式
~~~
~~~
const Infos = class c {
constructor () {}
}
// 缩写省略 class 后面那个名字
// const Infos = class {
// constructor () {}
// }
// 调用new 新建的是 定义变量
const testInfo = new Infos()
~~~
>[danger] ##### class 的静态方法--static
~~~
1. 静态方法就是类方法，只能通过类名调用，不能通过实例调用
2. static 只能用在方法'es6' 目前只支持静态方法不支持静态属性
~~~
~~~
class Point {
constructor (x, y) {
this.x = x;
this.y = y
}
getPosition () {
return `(${this.x}, ${this.y})`
}
static getClassName () {
return Point.name
}
}
const p = new Point(1, 2)
console.log(p.getPosition())
// console.log(p.getClassName()) erro 是静态方法，只能类调用
console.log(Point.getClassName()) // Point
~~~
>[danger]##### 自己伪造静态属性
~~~
1.'es6' 未来会提静态属性，现在不提供那就自己写一个，但比较鸡肋
~~~
~~~
class Point {
constructor () {
this.x = 0
}
}
Point.y = 2
const p = new Point()
console.log(p.x) // 0
console.log(p.y) // y 是我类有的，不是实例有的，因此实例调用打印是undefined
~~~
>[danger] ##### 私有属性/私有方法
~~~
1.什么是私用属性私有方法，就是只能class内部调用，外部不能访问调用
2.可以通过命名这种就是看遵守的人了
3.将私有方法移除利用call 指向
4.symbol 方法创建私有方法
5.但是说明上面3，4都是利用了文件的导入导出才能实现
~~~
* 命名前加_
~~~
class Point {
constructor () {
this.x = 0
}
// 凭良心的规定这是私有
_fun(){
}
}
~~~
* 把想要的私有方法提出，利用call改变指向，但是导出的时候，不将该方法导出，只导出类，这样其他人是无法使用这个提出的方法
~~~
// 我是定义的私有方法 我不导出别人也用不了
function praviteFun(){}
// 我只把class 导出
export default class Point {
constructor () {
this.x = 0
}
// 凭良心的规定这是私有
fun(){
praviteFun.call(this)
}
}
~~~
* 独一无二的symbol（跟上面同理的)看ts章节中symbol 使用
~~~
// 我是定义的私有方法 我不导出别人也用不了
const func1 = Symbol('func1')
// 我只把class 导出
export default class Point {
constructor () {
this.x = 0
}
// 利用了Symbol 是独一无二只要我们没把这个独一无二的变量暴露
// 就不会有人匹配到这个方法，更不会使用成功，变相私有
// 私有一般是类方法所以加了static 修饰,[] 这个是es6新的使用
// 可以定义一个变量用[]变成动态
static [func1](){}
}
~~~
';