美文网首页
2019-01-11

2019-01-11

作者: kathyever | 来源:发表于2019-01-11 18:11 被阅读0次

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,但其他环境都不支持。

相关文章

网友评论

      本文标题:2019-01-11

      本文链接:https://www.haomeiwen.com/subject/uwsxdqtx.html