《ES6標準入門》學習筆記

        //1,聲明關鍵字：const、letconst plus1 = a => a + 1;const mult2 = b => b * 2;console.log(mult2(plus1(1)));//plus1 = 2;//const聲明的變量的值不能重新被賦值//let聲明一個塊級作用域，只在其所在包含塊中有效。//2 箭頭函數=>//箭頭函數/*1.參數 => 返回值2.this綁定（其內部并沒有this，因此也不能作為構造函數和new構造器組合使用）3.等同于匿名函數4. 不能使用call、apply、bind方法*/console.log([1,2,3].map(x => x +1));//[2,3,4]//箭頭函數綁定thislet handler = {id: '123456',init:function () {//因為箭頭函數中沒有this，所以下行代碼中的this為init方法的this，指向handlerdocument.addEventListener('click', event => this.doSomething(event.type), false);},doSomething: function (type) {console.log("Handling " + type + " for " + this.id);}};handler.init();//箭頭函數練習function foo() {return () => {return () => {return () => {console.log("id:", this.id);}}}}foo.call({id: "zgatry"})()()();//輸出zgatry,這里通過.call把foo函數內部的this指向了{id:"zgatry"}對象//箭頭函數也不像其他函數一樣自帶類數組argumentsfunction fn() {setTimeout(() => {//這里的arguments其實是fn函數的argumentsconsole.log("args:", arguments);}, 1000);}fn("zgatry", 2, 3, 4);//輸出"zgatry", 2, 3, 4//箭頭函數總結：主要用于解決this綁定、簡化函數提升可讀性問題。<<----個人理解//關于this綁定的問題，ES7提出了“::”this綁定符。它會將符號左邊的對象作為右邊代碼的this指向。該符號返回的是原對象，可以進行鏈式寫法。//尾調用優化：在一個函數的最后一步調用另一個函數//函數調用——在內存形成調用記錄（調用幀）——嵌套調用時，外部函數必須等內部的函數執行完畢，它的調用幀才會消失。它們的組合形成“調用棧”。//所以調用幀最好是及時清除，否則對內存是極大的消耗。//尾調用優點:及時清除外部函數的調用幀，減少調用幀的個數。//注意：尾調用優化在嚴格模式才會生效//例如：function plusThenMult(a, b) {var val = a + b;console.log("加的結果", val);return mult(a, b);}function mult(a, b) {var val = a * b;console.log("乘的結果", val);}plusThenMult(1,2);//尾調用不一定出現在尾部，只要求是最后一步。//尾調用拓展——尾遞歸， 還涉及到復雜度//階乘函數的例子//尾遞歸的方式function factorial(n, total) {if(n === 1) return total;return factorial(n - 1, n * total);//只有一個調用幀，復雜度O(1);}//正常的方式function factor2(n) {if(n === 1) return 1;return n * factor2( n - 1);//形成多層調用幀，容易發生棧溢出錯誤stack overflow//形成n層調用幀，復雜度O(n);}//尾調用優化對遞歸操作意義大//上面使用尾調用優化的階乘函數傳參怪怪的，我要得到5的階乘，還要這樣傳 (5, 1);//使用ES6的函數默認值就優雅多了//改寫function factorial(n, total = 1) {  //默認值只有在total為undefined時才生效if(n === 1) return total;return factorial(n - 1, n * total);//只有一個調用幀，復雜度O(1);}console.log("5的階乘：",factorial(5));//輸出120//Symbol/*新的原始數據類型——獨一無二——由Symbol函數生成——類似于字符串*/let s = Symbol();console.log(typeof s);let s1 = Symbol('foo'); //Symbol傳參用以與其他值區分，解釋該值。let s2 = Symbol('bar');s1.toString();s2.toString();console.log(s1);console.log(s2);//主要用于對象的屬性名的標示符，避免屬性名重復導致屬性被覆蓋的問題//增強的對象寫法let s3 = Symbol('test'); let obj = {[s](args) {console.log(1);},name: 'zgatry'}console.log(obj[s]);//ES6的class類————ES5的構造函數的一層包裝class userMethod {constructor (ele) {this.$class = ele;}renderHtml () {console.log('渲染用戶頁面');return true;}}let userInfo = new userMethod('zgatry');userInfo.renderHtml();console.log(userInfo.$class);//所有的實例共享一個原型對象let user1 = new userMethod('aoao');let user2 = new userMethod('aobo');console.log("相同的原型對象？", user1.__proto__ === user2.__proto__);//實例為原型添加方法<<---不推薦使用user1.__proto__.plus = function (val){return val + 1}console.log("原型方法添加成功", user2.plus(2));//不存在變量提升:ES不會把變量聲明提升到代碼頭部      let命令也是不提升的// new Foo();//Foo is not defined// class Foo{}//上面的特性與繼承有關：為了保證子類在父類之后定義。{let Foo = class {};class Bar extends Foo {     //通過extend關鍵字進行繼承}}//關于繼承//繼續使用上面的userMethod的類class VIPuser extends userMethod {constructor($class, VIPnumber) {super($class);  //調用父類的constructor(x, y);   不調用該方法會報錯   不加$class則繼承不到父類的屬性但this可以用了this.VIPnumber = VIPnumber; //子類沒有this，需要通過super關鍵字，它指代了父類的實例（即父類的this對象）}}let VIP1 = new VIPuser('bobo', 1);console.log(VIP1.$class, VIP1.renderHtml(), VIP1.VIPnumber);//兩條繼承鏈的解釋和說明//例子class A {}class B extends A {}//1.作為對象，B的原型(__proto__)就是父類A;B.prototype.__proto__ = A.prototype;//2.作為構造函數, 子類B的原型(prototype屬性)是父類的實例.B.prototype = new A();//class的存值函數和取值函數，為某個屬性添加取值和存值, 捕獲取值和存值行為class MyClass {constructor() {//...}get prop() {console.log('getter');}set prop(value) {console.log('setter:', value);}}var inst = new MyClass();inst.prop = 123;inst.prop;//ES6在類和模塊的內部默認使用嚴格模式//Generator方法   在方法前加*表示    暫不拓展//靜態方法與靜態屬性     在方法前加static表示/*1.靜態方法不會被實例繼承2.靜態方法可以被子類繼承3.只能直接通過類調用。4.但也可以通過super對象調用（因為super是父類的this）*/class Foo {static classMethod () {return 'hello'}}class Bar extends Foo {static classMethod () {return super.classMethod() + ', too';}}console.log(Bar.classMethod());//靜態屬性//兩種無效的寫法// class Foo {//     //寫法一//     prop:2//     //寫法二//     static prop:2// }//實例屬性的新寫法  ES7// class Myclass {//     myProp = 42;//     constructor () {//         console.log(this.myProp);//42//     }// }// class Myclass {//     static myStaticProp = 42;//     constructor () {//         console.log(Myclass.myProp);//42//     }// }/*模塊Module語法是JavaScript的標準語法1.使用import替代require2.使用export替代module.exports//badconst moduleA = require('moduleA');const func1 = moduleA.func1;const func2 = moduleA.func2;//good import {func1, func2} form 'moduleA';//CommonJs 寫法var React = require('react');var Breadcrumbs = React.createClass({render () {return <nav />;}});module.exports = Breadcrumbs;//ES6寫法import React from 'react';const Breadcrumbs = React.createClass({render () {return <nav />;}});export default Breadcrumbs; //只有一個輸出值的時候使用default，多個值就不適用。*//*異步操作和async函數ES6前異步編程的方法1.回調函數2.事件監聽3.發布-訂閱4.promise對象回調函數-->>回調函數噩夢：多個回調函數嵌套的問題上，比如說依次讀取多個文件，就會出現多重嵌套，代碼很快就會亂做一團。fs.readFile(fileA, function(err, data) {fs.readFile(fileB, function(err, data) {//...})})PromisePromise允許將回調函數的橫向加載改成縱向加載。Promise 提供了then方法用于執行回調函數，catch方法捕捉執行過程中跑出的錯誤。缺點：代碼冗余，缺乏語義化。var readFile = require('fs-readfile-promise');readFile(fileA).then(function(data) {console.log(data.toString());}).then(function() {return readFile(fileB);}).then(function(data) {console.log(data.toString);}).catch(function(err) {console.log(err);});基于Promise對象的自動執行器var fs = require('fs');var readfile = function(fileName) {return new Promise(function (resolve, reject) {fs.readFile(fileName, function(error, data) {if(error) reject(error);resolve(data);});});};var gen = function* () {var f1 = yield readFile('/etc/fstab');var f2 = yield readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());};//手動執行Generator函數var g = gen();g.next().value.then(function(data) {g.next().value.then(function(data) {g.next(data);});});//手動操作其實就是通過then層層執行回調函數。//現在來寫自動執行器var run = function(gen) {var g = gen();function next() {var result = g.next(data);if(result.done) return result.value;result.value.then(function(data) {next(data);});}next();};//這樣Generator函數就可以自動執行了。run(gen);async函數———Generator函數的語法糖用async實現讀取兩個文件的范例：var asyncReadFile = async function() {var f1 = await readFile('/etc/fatab');var f2 = await readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());};var result = asyncReadFile();*/

editTime: 2016/10/09