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。