vue学习之二ECMAScript6标准
一、ECMAScript6標(biāo)準(zhǔn)簡述
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標(biāo)準(zhǔn)，已經(jīng)在 2015 年 6 月正式發(fā)布了。它的目標(biāo)，是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。
1.1ECMAScript 和 JavaScript 的關(guān)系
要講清楚這個問題，需要回顧歷史。1996 年 11 月，JavaScript 的創(chuàng)造者 Netscape 公司，決定將 JavaScript 提交給標(biāo)準(zhǔn)化組織 ECMA，希望這種語言能夠成為國際標(biāo)準(zhǔn)。次年，ECMA 發(fā)布 262 號標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語言的標(biāo)準(zhǔn)，并將這種語言稱為 ECMAScript，這個版本就是 1.0 版。
該標(biāo)準(zhǔn)從一開始就是針對 JavaScript 語言制定的，但是之所以不叫 JavaScript，有兩個原因。一是商標(biāo)，Java 是 Sun 公司的商標(biāo)，根據(jù)授權(quán)協(xié)議，只有 Netscape 公司可以合法地使用 JavaScript 這個名字，且 JavaScript 本身也已經(jīng)被 Netscape 公司注冊為商標(biāo)。二是想體現(xiàn)這門語言的制定者是 ECMA，不是 Netscape，這樣有利于保證這門語言的開放性和中立性。
因此，ECMAScript 和 JavaScript 的關(guān)系是，前者是后者的規(guī)格，后者是前者的一種實(shí)現(xiàn)（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）。日常場合，這兩個詞是可以互換的。
1.2ECMAScript 的歷史
ES6 從開始制定到最后發(fā)布，整整用了 15 年。
前面提到，ECMAScript 1.0 是 1997 年發(fā)布的，接下來的兩年，連續(xù)發(fā)布了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一個巨大的成功，在業(yè)界得到廣泛支持，成為通行標(biāo)準(zhǔn)，奠定了 JavaScript 語言的基本語法，以后的版本完全繼承。直到今天，初學(xué)者一開始學(xué)習(xí) JavaScript，其實(shí)就是在學(xué) 3.0 版的語法。
2000 年，ECMAScript 4.0 開始醞釀。這個版本最后沒有通過，但是它的大部分內(nèi)容被 ES6 繼承了。因此，ES6 制定的起點(diǎn)其實(shí)是 2000 年。
為什么 ES4 沒有通過呢？因?yàn)檫@個版本太激進(jìn)了，對 ES3 做了徹底升級，導(dǎo)致標(biāo)準(zhǔn)委員會的一些成員不愿意接受。ECMA 的第 39 號技術(shù)專家委員會（Technical Committee 39，簡稱 TC39）負(fù)責(zé)制訂 ECMAScript 標(biāo)準(zhǔn)，成員包括 Microsoft、Mozilla、Google 等大公司。
2007 年 10 月，ECMAScript 4.0 版草案發(fā)布，本來預(yù)計次年 8 月發(fā)布正式版本。但是，各方對于是否通過這個標(biāo)準(zhǔn)，發(fā)生了嚴(yán)重分歧。以 Yahoo、Microsoft、Google 為首的大公司，反對 JavaScript 的大幅升級，主張小幅改動；以 JavaScript 創(chuàng)造者 Brendan Eich 為首的 Mozilla 公司，則堅持當(dāng)前的草案。
2008 年 7 月，由于對于下一個版本應(yīng)該包括哪些功能，各方分歧太大，爭論過于激烈，ECMA 開會決定，中止 ECMAScript 4.0 的開發(fā)，將其中涉及現(xiàn)有功能改善的一小部分，發(fā)布為 ECMAScript 3.1，而將其他激進(jìn)的設(shè)想擴(kuò)大范圍，放入以后的版本，由于會議的氣氛，該版本的項(xiàng)目代號起名為 Harmony（和諧）。會后不久，ECMAScript 3.1 就改名為 ECMAScript 5。
2009 年 12 月，ECMAScript 5.0 版正式發(fā)布。Harmony 項(xiàng)目則一分為二，一些較為可行的設(shè)想定名為 JavaScript.next 繼續(xù)開發(fā)，后來演變成 ECMAScript 6；一些不是很成熟的設(shè)想，則被視為 JavaScript.next.next，在更遠(yuǎn)的將來再考慮推出。TC39 委員會的總體考慮是，ES5 與 ES3 基本保持兼容，較大的語法修正和新功能加入，將由 JavaScript.next 完成。當(dāng)時，JavaScript.next 指的是 ES6，第六版發(fā)布以后，就指 ES7。TC39 的判斷是，ES5 會在 2013 年的年中成為 JavaScript 開發(fā)的主流標(biāo)準(zhǔn)，并在此后五年中一直保持這個位置。
2011 年 6 月，ECMAscript 5.1 版發(fā)布，并且成為 ISO 國際標(biāo)準(zhǔn)（ISO/IEC 16262:2011）。
2013 年 3 月，ECMAScript 6 草案凍結(jié)，不再添加新功能。新的功能設(shè)想將被放到 ECMAScript 7。
2013 年 12 月，ECMAScript 6 草案發(fā)布。然后是 12 個月的討論期，聽取各方反饋。
2015 年 6 月，ECMAScript 6 正式通過，成為國際標(biāo)準(zhǔn)。從 2000 年算起，這時已經(jīng)過去了 15 年。
二、ES6常用語法
2.1變量的定義
ES5里面只有全局作用域，函數(shù)作用域
ES6的let帶來了塊級作用域，全局作用域，函數(shù)作用域
- 沒有變量提升
- 帶來了塊級作用域
- 不能重復(fù)定義
2.1.2 const定義常量
- 沒有變量提升
- 帶來了塊級作用域
- 不能重復(fù)定義
- 定義的時候需要賦值
- 定義之后不能修改 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>// ES5里面只有全局作用域，函數(shù)作用域// ES6的let帶來了塊級作用域，全局作用域，函數(shù)作用域// 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數(shù)據(jù)的結(jié)構(gòu)賦值
2.3.1 數(shù)組的解構(gòu)賦值2.3.2 對象的解構(gòu)賦值 <!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、函數(shù)的擴(kuò)展
2.4.1 函數(shù)參數(shù)默認(rèn)值2.4.2 箭頭函數(shù)
- this的指向問題
- 定義的時候就確定了
- 普通函數(shù)的this指向調(diào)用者
- 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代表需要傳入的參數(shù)// 第二個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來實(shí)例化, 否則報錯2.5.2 必須要有constructor構(gòu)造函數(shù)，如果沒有，默認(rèn)傳入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 解決了箭頭函數(shù)中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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/wangshuyang/p/9875748.html
總結(jié)
以上是生活随笔為你收集整理的vue学习之二ECMAScript6标准的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 启用或禁用对 Exchange Serv
- 下一篇： Vue 框架-05-动态绑定 css 样