JS Basic

1.预解析与变量提升

console.log(web)
var web = "sleep"

输出的结果是undefined 实际上代码在运行时解析结果是这样的，将变量的声明放到了前面，所以输出结果是undefined。

var web
console.log(web)
web = "sleep"

这段代码输出的结果依然是undefined，但是如果把var web = “Jay” 注解掉，将无法执行。

function hd() {
    if(false){
        var web = "Jay"
    }
    console.log(web)
}

2.let&const暂死区TDC

假设我们使用let的话，这样将无法运行

console.log(web)
let web = "Jay"

函数体使用时找不到变量就会到外部去寻找

let web = "Jay";
function func() {
    console.log(web);
}
func();

内部有定义优先使用内部

let web = "Jay";
function func() {
    let web = "奶茶天使";
    console.log(web);
}
func();

此时的i是没有作用域的，所以最后i输出为5

var i = 99
for (var i = 0; i < 5; i++) {
    console.log(i)
}
console.log(i)

var改成let后再执行i=99

var i = 99
for (let i = 0; i < 5; i++) {
    console.log(i)
}
console.log(i)

3.声明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])
        }
    })
}

4.箭头函数this指向

4.1调用链

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

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

4.2箭头函数无法使用arguments

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

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

const Course = (name,price)=>{
    this.name = name
    this.price = price
}

4.4箭头函数不能使用prototype

Course.prototype.study = () =>{
    console.log(`学习${this.name},价格是${this.price}`)
}

5.解构赋值正确使用姿势

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)

6.严格模式use strict

没啥用use strict之前这段代码可以正常执行

var public = "public"
console.log(public)

使用use strict后再执行则会报错

"use strict"
var public = "public"
console.log(public)

6.1严格模式作用域

放到外部就是全局作用域

"use strict"
function show() {
    web = "file"
}
function pageView() {
    site = "半岛铁盒"
}
show()

放到show函数体中执行时会提示web未定义

function show() {
    "use strict"
    web = "file"
}
function pageView() {
    site = "半岛铁盒"
}
show()

但是执行pageView方法则正常

function show() {
    "use strict"
    web = "file"
}
function pageView() {
    site = "半岛铁盒"
}
pageView()

总结：严格作用域会从当前作用域向下查找，而不会向上查找
学习到章节19