JavaScriptEs6 笔记

声明const的值被修改解决方法与原因

如果不调用myFreeze(esObj)函数，extension中的元素将会被修改

const esObj = {
    name: "es6",
    page: 2,
    extension: [10, 20, 3, 40]
}
Object.freeze(esObj)
/*
    即使冻结后依然可以改变extension的值
    这是因为数组是存储在堆内存(heap)里
    而基本数据类型是存储在栈内存(stack)
    而且freeze只能冻结最外层
*/
myFreeze(esObj)
esObj.extension[0] = 12
console.log(esObj)
// 自定义方法使其全部冻结
function myFreeze(obj) {
    Object.freeze(obj)
    Object.keys(obj).forEach(key => {
        if (typeof obj[key] === 'object') {
            myFreeze(obj[key])
        }
    })
}

箭头函数this指向

这段代码输出会报错this调用链查找到外部没有找到address

const obj2 = {
    address: "广州",
    showAddress= () => {
        console.log(this.address)
    }
}
obj2.showAddress()

箭头函数无法使用arguments

const sum = (x, y) => {
    console.log(arguments)
    return x + y
}

不能使用箭头函数作为构造函数

// 不能使用箭头函数作为构造函数
const Course = (name,price)=>{
    this.name = name
    this.price = price
}

箭头函数不能使用prototype

// 箭头函数不能使用prototype
Course.prototype.study = () =>{
    console.log(`学习${this.name},价格是${this.price}`)
}

优雅的取值方式，结构得一致

const esObj = {
    name: "es6",
    page: 2,
    extension: [10, 20, 3, 40],
    teacher: {
    	name: 'jack'
    }
}
const {name,page} = esObj
// 取数组
const courseArr = ['e6', 'e7', 'e8']
const [a, b, c] = courseArr
console.log(a, b, c)

// 取内部对象
const { name, page, teacher: {
    name: name1 // 重名可以取别名
} } = esObj
console.log(name, page, name1)