1. Vue - ES6

一、ES6部分知识点

1. 变量声明

<!-- var声明变量，导致变量提升 -->
var name = 'ruanyifeng'
function func(){
    console.log(name)
    if (false){
        var name = 'Bob'
    }
}
func()
----------
undifined

let：特点
(1)let声明不存在变量提升的问题
(2)let声明的变量只能在当前代码块生效
(3)let不能重复什么变量

var name = 'ruanyifeng'
function func(){
    console.log(name)
    if (false){
        let name = 'Bob'
    }
}
func()
----------
ruanyifeng

2. 常量

const
(1)声明的同时必须赋值
(2)不能修改
(3)同let一样只能在当前声明的代码块里生效

3. 模板字符串

python3.6:  
name = 'ruanyifeng'
str = f'my name is {name}'

js:
let name = 'ruanyifeng'
let str = `my name is ${name}`

4. 对象单体模式

let obj = {
    say:function(){
        console.log('Hello');
    }
}
obj.say()
----------
Hello

let objNew = {
    say(){
        console.log('Hello');
    }
}
objNew.say()
-----------
Hello

5. 箭头函数

(1) 箭头函数基本特点

​ 箭头函数this为父作用域的this，不是调用时的this。箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。普通函数的this指向调用它的那个对象。

let person = {
    name:'jike',
    init:function(){
        // 为body添加一个点击事件，看看这个点击后的this属性有什么不同
        document.body.onclick = ()=>{
            // this在浏览器默认是调用时的对象,可变的？   
            alert(this.name);               
        }
    }
}
person.init();

备注：init是function，以person.init调用，其内部this就是person本身，而onclick回调是箭头函数，
其内部的this，就是父作用域的this，就是person，能得到name。

let person = {
    name:'jike',
    init:()=>{
        // 为body添加一个点击事件，看看这个点击后的this属性有什么不同
        document.body.onclick = ()=>{
            // this在浏览器默认是调用时的对象,可变的？  
            alert(this.name);                
        }
    }
}
person.init();

备注：init为箭头函数，其内部的this为全局window，onclick的this也就是init函数的this，也是window，
得到的this.name就为undefined。

二、ES6推荐链接

http://es6.ruanyifeng.com/
https://www.cnblogs.com/mengff/p/9656486.html

转载于:https://www.cnblogs.com/hq82/p/11487393.html