vue学习之二ECMAScript6标准
一、ECMAScript6標準簡述
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
1.1ECMAScript 和 JavaScript 的關系
要講清楚這個問題，需要回顧歷史。1996 年 11 月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成為國際標準。次年，ECMA 發布 262 號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript，這個版本就是 1.0 版。
該標準從一開始就是針對 JavaScript 語言制定的，但是之所以不叫 JavaScript，有兩個原因。一是商標，Java 是 Sun 公司的商標，根據授權協議，只有 Netscape 公司可以合法地使用 JavaScript 這個名字，且 JavaScript 本身也已經被 Netscape 公司注冊為商標。二是想體現這門語言的制定者是 ECMA，不是 Netscape，這樣有利于保證這門語言的開放性和中立性。
因此，ECMAScript 和 JavaScript 的關系是，前者是后者的規格，后者是前者的一種實現（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）。日常場合，這兩個詞是可以互換的。
1.2ECMAScript 的歷史
ES6 從開始制定到最后發布，整整用了 15 年。
前面提到，ECMAScript 1.0 是 1997 年發布的，接下來的兩年，連續發布了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一個巨大的成功，在業界得到廣泛支持，成為通行標準，奠定了 JavaScript 語言的基本語法，以后的版本完全繼承。直到今天，初學者一開始學習 JavaScript，其實就是在學 3.0 版的語法。
2000 年，ECMAScript 4.0 開始醞釀。這個版本最后沒有通過，但是它的大部分內容被 ES6 繼承了。因此，ES6 制定的起點其實是 2000 年。
為什么 ES4 沒有通過呢？因為這個版本太激進了，對 ES3 做了徹底升級，導致標準委員會的一些成員不愿意接受。ECMA 的第 39 號技術專家委員會（Technical Committee 39，簡稱 TC39）負責制訂 ECMAScript 標準，成員包括 Microsoft、Mozilla、Google 等大公司。
2007 年 10 月，ECMAScript 4.0 版草案發布，本來預計次年 8 月發布正式版本。但是，各方對于是否通過這個標準，發生了嚴重分歧。以 Yahoo、Microsoft、Google 為首的大公司，反對 JavaScript 的大幅升級，主張小幅改動；以 JavaScript 創造者 Brendan Eich 為首的 Mozilla 公司，則堅持當前的草案。
2008 年 7 月，由于對于下一個版本應該包括哪些功能，各方分歧太大，爭論過于激烈，ECMA 開會決定，中止 ECMAScript 4.0 的開發，將其中涉及現有功能改善的一小部分，發布為 ECMAScript 3.1，而將其他激進的設想擴大范圍，放入以后的版本，由于會議的氣氛，該版本的項目代號起名為 Harmony（和諧）。會后不久，ECMAScript 3.1 就改名為 ECMAScript 5。
2009 年 12 月，ECMAScript 5.0 版正式發布。Harmony 項目則一分為二，一些較為可行的設想定名為 JavaScript.next 繼續開發，后來演變成 ECMAScript 6；一些不是很成熟的設想，則被視為 JavaScript.next.next，在更遠的將來再考慮推出。TC39 委員會的總體考慮是，ES5 與 ES3 基本保持兼容，較大的語法修正和新功能加入，將由 JavaScript.next 完成。當時，JavaScript.next 指的是 ES6，第六版發布以后，就指 ES7。TC39 的判斷是，ES5 會在 2013 年的年中成為 JavaScript 開發的主流標準，并在此后五年中一直保持這個位置。
2011 年 6 月，ECMAscript 5.1 版發布，并且成為 ISO 國際標準（ISO/IEC 16262:2011）。
2013 年 3 月，ECMAScript 6 草案凍結，不再添加新功能。新的功能設想將被放到 ECMAScript 7。
2013 年 12 月，ECMAScript 6 草案發布。然后是 12 個月的討論期，聽取各方反饋。
2015 年 6 月，ECMAScript 6 正式通過，成為國際標準。從 2000 年算起，這時已經過去了 15 年。
二、ES6常用語法
2.1變量的定義
ES5里面只有全局作用域，函數作用域
ES6的let帶來了塊級作用域，全局作用域，函數作用域
- 沒有變量提升
- 帶來了塊級作用域
- 不能重復定義
2.1.2 const定義常量
- 沒有變量提升
- 帶來了塊級作用域
- 不能重復定義
- 定義的時候需要賦值
- 定義之后不能修改 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>// ES5里面只有全局作用域，函數作用域// ES6的let帶來了塊級作用域，全局作用域，函數作用域// if (true) {// let username = "alex";// }const PI = 3.14;PI = 3.2;console.log(PI)</script></body> </html>
?2.2模版字符串
2.2.1 `` 反引號2.2.2 ${}存儲變量 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"></div><script>var oDiv = document.getElementById("app");// oDiv.innerHTML = '<h1>Hello world' +// '<h2>Hello world</h2>' +// '<h3>hello world</h3>' +// '</h1>'let username = "alex";let age = 73;let hobby = 'girls';oDiv.innerHTML = `<h1>Hello ${username}<h2>hello ${age}</h2><h3>hello ${hobby}</h3></h1>`</script> </body> </html>
2.3數據的結構賦值
2.3.1 數組的解構賦值2.3.2 對象的解構賦值 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>let ary = [1, 2, 3];// let a = ary[0];// let b = ary[1];// let c = ary[2];let [a, b, c, d = 1] = ary;let obj = {name: "alex",age: 18};let { name: username, age } = obj;console.log(username, age);</script></body> </html>
2.4、函數的擴展
2.4.1 函數參數默認值2.4.2 箭頭函數
- this的指向問題
- 定義的時候就確定了
- 普通函數的this指向調用者
- arguments不能使用 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>// function foo(x, y=10) {// number = y;// return number;// }//// // ret = foo(1, 2);// // var ret = foo(1);// var ret = foo(1, 0);// console.log(ret);// 第一個v代表需要傳入的參數// 第二個v代表返回值// let func = v => v;// let func1 = (x, y) => x;// let func2 = (x, y) => {let result = x + y; return result;};// console.log(func(10));// console.log(func1(10, 20));// console.log(func2(10, 20));// function foo() {// console.log(this);// }//// foo();//// let obj = {// func: foo,// };//// obj.func();function foo() {setTimeout(() => console.log(this.id), 1000);setTimeout(function () {console.log(this.id)}, 2000)}var id = 100;foo.call({id: 10})</script></body> </html>
2.5類
2.5.1 必須要用new來實例化, 否則報錯2.5.2 必須要有constructor構造函數，如果沒有，默認傳入constructor(){}
2.5.3 類的繼承 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>// function Timer() {// this.t1 = 10;// }//// Timer.prototype.showInfo = function () {// console.lo(this.t1);// }// let timer = new Timer();//////// class Person{// constructor (uname, uage) {// this.uname = uname;// this.uage = uage;// }// showInfo() {// console.log(this.uname, this.uage);// }// }//// let person = new Person("pizza", 18);// console.log(person.uname);class XiaoHe{constructor (userName, userAge, userAccount=100000) {this.userName = userName;this.userAge = userAge;this.userAccount = userAccount;}}class Peiqi extends XiaoHe{constructor (userName, userAge) {super(userName, userAge);this.userName = userName;this.userAge = userAge;}showInfor() {console.log(this.userName, this.userAge, this.userAccount);}}let peiqi = new Peiqi("peiqi", 18);peiqi.showInfor();</script> </body> </html>
2.6對象的單體模式
2.6.1 解決了箭頭函數中this的指向問題 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>var obj = {name: "Pizza",func(){console.log(this.name);}};obj.func();</script></body> </html>
?
轉載于:https://www.cnblogs.com/wangshuyang/p/9875748.html
總結
以上是生活随笔為你收集整理的vue学习之二ECMAScript6标准的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 启用或禁用对 Exchange Serv
- 下一篇： Vue 框架-05-动态绑定 css 样