Vue(一)之ES6基礎
阿新 • • 發佈：2018-12-05
01-先了解ES6語法
1.宣告變數let和const
<script type="javascript"> //es5宣告變數 var 先宣告，後賦值 //var a = 10; //console.log(a); //因變數提升 導致 1.var宣告的變數屬於 全域性作用域; //2.var宣告的變數存在覆蓋現象; var a; console.log(a); { a = 20; //var a = 30; } console.log(a); //列印結果：i=10 for(var i = 0; i<10; i++){ } console.log(i); //es6宣告變數 let和const //let 宣告變數的好處：1.屬於區域性作用域；2.沒有覆蓋現象 //const 宣告的是 常量, 1.這個常量一旦宣告 就不可修改；2.區域性作用域； const pai = 3.14; </script>
2.模板字串
語法:` ${變數名} `
注：` ` 是tab鍵上面的反引號。
<body> <ul> <li> <a href="javascript:;"> <img src="" alt=""> </a> </li> </ul> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="javascript"> //es6模板字串 /* let name='hyp'; let age=18; // `` 使用反引號 let desc=`${name}的年齡是${age}`;//'hyp的年齡是18' console.log(desc);*/ //示例 let imgSrc = './1.png'; $(function () { $('ul').append( `<ul> <li> <a href="javascript:;"> <img src="${imgSrc}" alt=""> </a> </li> </ul>` ); }) </script> </body>
3.函式的書寫
es6箭頭函式的書寫：
function() {} 等價於 ()=>{}
箭頭函式的使用 帶來的問題：
1.使用使用箭頭函式this的指向發生了改變
2.使用箭頭函式 arguments 不能使用
<script type="text/javascript"> /* 普通函式 function add(a,b) { return a+b; }; alert(add(1,2)); */ /* // 函式物件 var add = function (a,b) { return a+b; }; alert(add(3,4)) */ /* var add = (a,b)=>{ return a+b; }; alert(add(3,7)) */ /* var person = { name:"alex", age: 20, fav:function () { console.log('喜歡AV'); // this指的是當前的物件 console.log(this.age); } }; person.fav(); */ /* var person = { name:"alex", age: 20, fav: () => { // this的指向發生了改變,指向了定義person的父級物件 window console.log('喜歡AV'); console.log(this); } }; person.fav(); */ /* var person = { name:"alex", age: 20, fav: function () { console.log('喜歡AV'); // this指的是當前的物件 console.log(this); console.log(arguments[0]) } }; person.fav('哈哈哈'); */ var person = { name:"alex", age: 20, fav: (content) =>{ // this的指向發生了改變,指向了定義person的父級物件 window console.log('喜歡AV'); console.log(this);
//arguments 是實參，此處結果為 undefined // console.log(arguments) } }; person.fav('哈哈哈'); </script>
4.物件的建立
es6中物件的單體模式
fav(){} 等價於 function fav(){} 等價於 var fav = function(){}
<script type="text/javascript"> // 字面量方式建立物件 /* var person = { name:"alex", age: 20, fav:function () { console.log('喜歡AV'); // this指的是當前的物件 console.log(this.age); } }; person.fav(); */ // es6中物件的單體模式 var person = { name:"alex", age: 20, fav(){
//此處的this 指的是 當前物件Object；
//使用單體模式 解決了 箭頭函式的this指向的問題 和 arguments 也可以使用了 console.log(this); console.log(arguments); } }; person.fav(); </script>
5.es6中類的概念class
<script type="text/javascript"> /* function Person(name,age){ this.name = name; this.age = age; } Person.prototype.showName = function(){ alert(this.name); }; // 使用new關鍵字來建立物件 var p = new Person('alex',19); p.showName() */ // es6中建立物件的方式 使用class class Person{
//constructor 相當於 __init__ constructor(name,age){ this.name = name; this.age = age; }
//函式 showName(){ alert(this.name); } } // 相當於例項化物件 var p2 = new Person('張三',20); p2.showName(); </script>
6.global物件
ES5 的頂層物件，本身也是一個問題，因為它在各種實現裡面是不統一的。
1.瀏覽器裡面，頂層物件是window，但 Node 和 Web Worker 沒有window。
2.瀏覽器和 Web Worker 裡面，self也指向頂層物件，但是 Node 沒有self。
3.Node 裡面，頂層物件是global，但其他環境都不支援。
同一段程式碼為了能夠在各種環境，都能取到頂層物件，現在一般是使用this變數，但是有侷限性。
1.全域性環境中，this會返回頂層物件。但是，Node 模組和 ES6 模組中，this返回的是當前模組。
2.函式裡面的this，如果函式不是作為物件的方法執行，而是單純作為函式執行，this會指向頂層物件。但是，嚴格模式下，這時this會返回undefined。
3.不管是嚴格模式，還是普通模式，new Function('return this')()，總是會返回全域性物件。
但是，如果瀏覽器用了 CSP（Content Security Policy，內容安全策略），那麼eval、new Function這些方法都可能無法使用。
綜上所述，很難找到一種方法，可以在所有情況下，都取到頂層物件。下面是兩種勉強可以使用的方法。
// 方法一
(typeof window !== 'undefined'
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
// 方法二
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
// CommonJS 的寫法
require('system.global/shim')();
// ES6 模組的寫法
import shim from 'system.global/shim'; shim();
上面程式碼可以保證各種環境裡面，global物件都是存在的。
// CommonJS 的寫法
var global = require('system.global')();
// ES6 模組的寫法
import getGlobal from 'system.global';
const global = getGlobal();
上面程式碼將頂層物件放入變數global。