ES6类 -- 基础 · Vue&&TypeSprict--基础总结

[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](){} } ~~~