前端基础 JS篇07

这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战」

前言

之前都是忙于业务开发，对前端的基本知识都是用到什么查什么，很少有时间沉下心来自己归纳，总结下基础，有时候，用到什么，觉得值得留意一下的东西，也都是自己笔记里记录下，也不怎么及时整理，然后随着时间的推移，陆陆续续记录的东西都是乱七八糟的，都没整理过，这次，写这个前端的基础系列，整理一下

打算以轻松，闲谈的调调来聊聊，文笔不好，大家将就的看

快速回顾

上文讲了

原型

var、let 及 const 区别

讲这个之前，需要先来了解提升（hoisting）这个概念。

console.log(a) // undefined 
var a = 1
复制代码

从上述代码中我们可以发现，虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。

对于这种情况，我们可以把代码这样来看

var a 
console.log(a) // undefined 
a = 1
复制代码

接下来我们再来看一个例子

var a = 10 
var a 
console.log(a)
复制代码

对于这个例子，如果你认为打印的值为 undefined 那么就错了，答案应该是 10，对于这种情况，我们这样来看代码

var a 
var a 
a = 10 
console.log(a)
复制代码

到这里为止，我们已经了解了 var 声明的变量会发生提升的情况，其实不仅变量会提升函数也会被提升。

console.log(a) // ƒ a() {} 
function a() {} 
var a = 1
复制代码

对于上述代码，打印结果会是 ƒ a() {}，即使变量声明在函数之后，这也说明了函数会被提升，并且优先于变量提升。

说完了这些，想必大家也知道 var 存在的问题了，使用 var 声明的变量会被提升到作用域的顶部，接下来我们再来看 let 和 const 。

我们先来看一个例子：

var a = 1 
let b = 1 
const c = 1 
console.log(window.b) // undefined 
console.log(window. c) // undefined 
function test(){ 
    console.log(a) 
    let a 
}

test()
复制代码

首先在全局作用域下使用 let 和 const 声明变量，变量并不会被挂载到 window 上，这一点就和 var 声明有了区别。

再者当我们在声明 a 之前如果使用了 a，就会出现报错的情况

你可能会认为这里也出现了提升的情况，但是因为某些原因导致不能访问。

首先报错的原因是因为存在暂时性死区，我们不能在声明前就使用变量，这也是 let 和 const 优于 var 的一点。然后这里你认为的提升和 var 的提升是有区别的，虽然变量在编译的环节中被告知在这块作用域中可以访问，但是访问是受限制的。

那么到这里，想必大家也都明白 var、let 及 const 区别了，不知道你是否会有这么一个疑问，为什么要存在提升这个事情呢，其实提升存在的根本原因就是为了解决函数间互相调用的情况

function test1() { 
    test2() 
}

function test2() { 
    test1() 
} 

test1()
复制代码

假如不存在提升这个情况，那么就实现不了上述的代码，因为不可能存在 test1 在 test2 前面然后 test2 又在 test1 前面。

那么最后我们总结下这小节的内容：

函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
var 存在提升，我们能在声明之前使用。let、const 因为暂时性死区的原因，不能在声明前使用
var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会
let 和 const 作用基本一致，但是后者声明的变量不能再次赋值

原型继承和 Class 继承

首先先来讲下 class，其实在 JS 中并不存在类，class 只是语法糖，本质还是函数。

class Person {} 
Person instanceof Function // true
复制代码

在上一节(前端基础 JS篇06)我们讲解了原型的知识点，在这一小节中我们将会分别使用原型和 class 的方式来实现继承。

组合继承

组合继承是最常用的继承方式，

function Parent(value) { 
    this.val = value 
}
Parent.prototype.getValue = function() { 
    console.log(this.val) 
} 
function Child(value) { 
    Parent.call(this, value)
} 
Child.prototype = new Parent() 
const child = new Child(1) 
child.getValue() // 1 
child instanceof Parent // true
复制代码

以上继承的方式核心是在子类的构造函数中通过 Parent.call(this) 继承父类的属性，然后改变子类的原型为 new Parent() 来继承父类的函数。

这种继承方式优点在于构造函数可以传参，不会与父类引用属性共享，可以复用父类的函数，但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数，导致子类的原型上多了不需要的父类属性，存在内存上的浪费。

寄生组合继承

这种继承方式对组合继承进行了优化，组合继承缺点在于继承父类函数时调用了构造函数，我们只需要优化掉这点就行了。

function Parent(value) { 
    this.val = value
} 
Parent.prototype.getValue = function() { 
    console.log(this.val) 
} 
function Child(value) { 
    Parent.call(this, value) 
} 
Child.prototype = Object.create(Parent.prototype, { 
    constructor: { 
        value: Child, 
        enumerable: false, 
        writable: true, 
        configurable: true
    }
})
const child = new Child(1) 
child.getValue() // 1 
child instanceof Parent // true
复制代码

以上继承实现的核心就是将父类的原型赋值给了子类，并且将构造函数设置为子类，这样既解决了无用的父类属性问题，还能正确的找到子类的构造函数。

Class 继承

以上两种继承方式都是通过原型去解决的，在 ES6 中，我们可以使用 class 去实现继承，并且实现起来很简单

class Parent { 
    constructor(value) { 
        this.val = value
    } 
    getValue() { 
        console.log(this.val)
    }
}

class Child extends Parent { 
    constructor(value) { 
        super(value)
    }
}
let child = new Child(1) 
child.getValue() // 1 
child instanceof Parent // true
复制代码

class 实现继承的核心在于使用 extends 表明继承自哪个父类，并且在子类构造函数中必须调用 super，因为这段代码可以看成 Parent.call(this, value)。

当然了，之前也说了在 JS 中并不存在类，class 的本质就是函数。

总结

var、let 及 const 区别
原型继承和 Class 继承

ps: 干巴巴的文字讲了还是比较枯燥，并且难以印象深刻的，大家还是日常使用中，多多体会