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