你真的彻底理解js原型和原型链，闭包，异步和单线程吗？

一，原型和原型链

先上一段代码

// 类
class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
        // this.gender = 'male'
    }
    sayHi() {
        console.log(
            `姓名 ${this.name} ，学号 ${this.number}`
        )
 
}

// 通过类 new 对象/实例
const xialuo = new Student('夏洛', 100)
xialuo.sayHi()

const madongmei = new Student('马冬梅', 101)
madongmei.sayHi()

原型就是一个指针，创建的每一个元素都有一个原型，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例所共享的属性和方法

typeof Student//true
class创建的Student就是一个构造函数
所以

xialuo.sayHi() === madongmei.sayHi()//true

下面又是用class实现继承的一段代码

// 父类
class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat something`)
    }
}

// 子类
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name} 学号 ${this.number}`)
    }
}

// 子类
class Teacher extends People {
    constructor(name, major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(`${this.name} 教授 ${this.major}`)
    }
}

// 实例
const xialuo = new Student('夏洛', 100)
xialuo.sayHi()
xialuo.eat()

// 实例
const wanglaoshi = new Teacher('王老师', '语文')
wanglaoshi.teach()
wanglaoshi.eat()

你会发现

到控制台输入 Student.prototype === xialuo.__proto__ 判断是true

// xialuo.proto 叫隐式原型
//Student.prototype 叫显式原型

注意下面重点
每个class都有显示原型
每个实例都有隐式原型
隐式原型的指针指向class对应显示原型
所以原型的执行规则就是先到自身的属性和方法中寻找，找不到则到隐式原型中找

如下图

People.prototype === Student.prototype._proto_ //true

这说明了Student的隐式原型指向了父构造函数的显示原型，这就引出了原型链，如下图

最终都会指向Object对象的原型

二,闭包

搞清楚闭包前先搞清楚作用域和自由变量

作用域：就是一个变量作用的代码范围
点这里：javascript作用域链也是个重要点

自由变量：就是不是函数参数和局部变量

自由变量的特点如下

什么是闭包了如下：

第一种情况代码：函数作为参数被传递

function print(fn){
    const a = 200
    fn()
}

const a = 100
function fn(){
    console.log(a)
}

print(fn)  // 100

第二种：函数作为返回值被返回

函数作为返回值
function create(){
    let a = 100
    return function(){
        console.log(a)
    }
}

const fn = create()
const a = 200

fn()//100

顺便提一下经常考的this5种场景
this的被调用的5种场景


this到底取什么值是在函数被执行的时候确定的而不是函数在被定义的时候确定的

返回window对象
什么调用它就返回什么
返回对象本身
返回实例本身
箭头函数返回父级作用域的this

箭头函数的this取父级的this

三，异步和单线程

JS是单线程语言，只能做一件事

JS和DOM渲染同一个进程，因为JS可以修改DOM结构

单线程如果没有异步的话遇到等待（比如网络请求，定时任务）就会卡住

异步基于回调函数来调用

异步有哪些应用场景如下

回调地狱及解决方法

点这里：以前的写过详细讲解一
详解方法二

菜鸟的学习笔记，如有错误，感谢纠正，如有侵权，商讨删除