2019-01-11

ES6 箭头函数

const Person = {
    'name':'little bear',
    'age':18;
    'sayHello':function(){
        setInterval(function(){
            console.log('我叫' + this.name + '我今年' + this.age + '岁')
        },1000)
    }
}
Person.sayHello()
//输出的结果：我叫undefined，今年我undefined岁。

//因为setInterval执行的时候，是在全局作用域下的
//所有this指向的是全局window，而window上没有name和age，所以输出的就是undefined


const Person = {
    'name':'little bear',
    'age':18,
    'sayHello':function(){
        let self=this
            setInterval(function(){
                console.log('我叫' + self.name + '我今年' + self.age + '岁!')
            },1000)
    }
}
const sayHelloFun = Person.sayHello
sayHelloFun()

箭头函数表示法：()=>console.log('Hello')

箭头函数和普通函数的区别

和普通函数相比，箭头函数主要就是下面两个方面的特点：
1、不绑定this，arguments
2、更简化的代码语法

◆ 不绑定this

const Person ={
    'name':'little bear',
    'age':18,
    'sayHello':()=>{
        setInterval(()=>{
            console.log('我叫'+this.name+'我今年'+this.age+'岁！')
        },1000)
    }
}
Person.sayHello()
//输出的结果还是undefined，为什么呢？
//因为把方法写在对象里，而对象的括号是不能封闭作用域的。此时的this还是指向全局对象
`最好不要用箭头作为对象的方法！`

function Person(){
    this.name='little bear',
    this.age=18
    setInterval(()=>{
        console.log('我叫'+this.name+'我今年'+this.age+'岁！')
    },1000)
}
let p=new Person()
//箭头函数使用了定义时上下文的this，且与哪里调用没有关系。

◆ 不绑定arguments
箭头函数还有一个比较有特点的地方就是其不绑定arguments。如果在箭头函数中使用arguments参数不能得到想要的内容。

let arrowfuc=>()=>console.log(arguments.length)
arrowfunc()//arguments is not defined

ES6声明变量的6中方法

ES5只有两种声明变量的方法：var命令和function命令
ES6除了添加left和const命令，还有另外两种声明变量的 方法：important命令和class命令。

顶层对象的属性

顶层对象，在浏览器环境指的事window对象，在Node值的是global对象。
ES5之中，顶层对象的属性与全局变量是等价的。

window.a=1;
a//1

a=2;
window.a//2

顶层对象的属性赋值与全局变量的赋值是同一件事。

顶层对象的属性与全局变量挂钩被认为是Javascript语言最大的败笔之一：
1、无法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能顶层对象的属性创造的，而属性的创造是动态的。）
2、很容易不知不觉的就创建了全局变量
3、顶层对象的属性是到处可以读写的，这非常不利于模块化编程。
window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

ES6为了改变这一点，做了些改变：
1、为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性
2、let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性
也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。

var a=1;
//如果再Node的REPL环境，可以写成global.a
//或者采用通用方法，写成this.a
window.a//1

let b=1;
window.b//undefined

上面代码中，全局变量a由var命令声明，所以它是顶层对象的属性
全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined

global对象

ES5的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。
◆ 浏览器里面，顶层对象是window，但Node和Web Worker没有window。
◆ 浏览器和Web Worker里面，self也指向顶层对象，但是Node没有self。
◆ Node里面，顶层对象是global，但其他环境都不支持。