1. Prototype and prototype chain
First code
// 类
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()
A prototype is a pointer. Each element created has a prototype that points to an object. The purpose of this object is to contain properties and methods that can be shared by all instances of a particular type.
Student
created by typeof Student // true class is a constructor,
so
xialuo.sayHi() === madongmei.sayHi()//true
Below is another piece of code that uses class to implement inheritance
// 父类
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()
You will find
到控制台输入 Student.prototype === xialuo.__proto__ 判断是true
// xialuo. proto is called implicit prototype
//Student.prototype is called explicit prototype
Note the following important points.
Each class has a display prototype.
Each instance has an implicit
prototype. The pointer of the implicit prototype points to the class corresponding to the display prototype.
So the execution rule of the prototype is to first find it in its own properties and methods. In the prototype
As shown below
People.prototype === Student.prototype._proto_ //true
This shows that the implicit prototype of Student points to the display prototype of the parent constructor, which leads to the prototype chain, as shown in the figure below,
it will eventually point to the prototype of the Object object.
Second, the closure
Find out the scope and free variables before figuring out the closure
Scope: is the code scope of a variable role.
Here: javascript scope chain is also an important point
Free variables: just function parameters and local variables
The characteristics of free variables are as follows
What is closed is as follows:
The first case code: the function is passed as a parameter
function print(fn){
const a = 200
fn()
}
const a = 100
function fn(){
console.log(a)
}
print(fn) // 100
The second kind: the function is returned as the return value
函数作为返回值
function create(){
let a = 100
return function(){
console.log(a)
}
}
const fn = create()
const a = 200
fn()//100
Incidentally regular examination of this5 scene
this five kinds of scenes to be called
this in the end what value is determined at the time the function is executed rather than a function is defined in the time determined
Returns the window object
Whatever it is called returns what
returns the object itself
Back to the instance itself The
arrow function returns this in the parent scope
The arrow function's this takes the parent's this
Three, asynchronous and single-threaded
JS is a single-threaded language and can only do one thing
JS and DOM rendering the same process, because JS can modify the DOM structure
If the single thread is not asynchronous, it will get stuck when it encounters waiting (such as network requests, scheduled tasks)
Called asynchronously based on callback function
What are the application scenarios of asynchronous as follows
Callback hell and solution
Click here: before a detailed written explanation
Detailed Method Two
Cainiao's study notes, if there are errors, thanks for correction, if there is infringement, discuss the deletion
