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。