js 学习笔记 -- js基础知识

js

变量,类型,计算

类型

值类型：字符串，数字，bool，Symbol

引用类型：object，array，function，null

typeof运算符

typeof能识别所有值类型，识别函数，判断是否是引用类型（不可再细分）

拷贝

1. 浅拷贝 -- 改变拷贝对象的值，原值改变
2. 深拷贝 -- 改变拷贝对象的值，原值不改变

如何实现深拷贝：

• 判断是值类型还是引用类型
• 判断是数组还是对象
• 递归

判断和计算

运算符：

当加号运算符时，String和其他类型时，其他类型都会转为 String；其他情况，都转化为Number类型 ， 注： undefined 转化为Number是 为’NaN‘， 任何Number与NaN相加都为NaN。
其他运算符时， 基本类型都转换为 Number，String类型的带有字符的比如： '1a' ,'a1' 转化为 NaN 与undefined 一样。

当object与基本类型，Number类型会先调用valueOf(), String类型会先调用toString(), 如果结果是原始值，则返回原始值，否则继续用toString 或 valueOf(),继续计算，如果结果还不是原始值，则抛出一个类型错误

布尔转化：

!!完全等同于Boolean()

除了 == null之外，其他都一律用 ===

类型比较:

如图所示：
对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字
对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。
对象和数字进行比较时，对象先转换为字符串，然后转换为数字，再和数字进行比较。
字符串和数字进行比较时，字符串转换成数字，二者再比较。
字符串和布尔值进行比较时，二者全部转换成数值再比较。
布尔值和数字进行比较时，布尔转换为数字，二者比较。

原型和原型链

类和继承

class people {
    name;
    constructor(name){
        this.name = name
    }
    say() {
        console.log(this.name)
    }
}

class student extends people{
    age;
    constructor(name,age){
        super(name)
        this.age = age
    }
    say() {
        console.log(this.age)
    }
}

let a = new student("chuck",10)
a.say()
console.log(a.name)
console.log(a.__proto__.name)

原型链

• 关系

每个 class 都有显式原型 prototype
每个实例都有隐式原型 proto
实例的 proto 指向对应 class 的 prototype

• 基于原型的执行规则

对象的成员查找机制依靠原型链：当访问一个对象的属性（或方法）时，首先查找这个对象自身有没有该属性；如果没有就找它的原型；如果还没有就找原型对象的原型；以此类推一直找到null为止，此时返回undefined。__proto__属性为查找机制提供了一条路线，一个方向。

new在执行时做了什么：

1.在内存中创建一个新的空对象实例；
2.将对象实例的__proto__属性指向构造函数的原型对象实例；
3.让构造函数里的this指向这个新的对象实例；
4.执行构造函数里的代码，给这个新对象添加成员，最后返回这个新对象。

类型判断 instanceof

A instanceof B成立的条件为

左边A的隐式__proto__链上能找到一个等于右边B的显式prototype则为true，否则为false

继承

ES6之前常用

原型对象+构造函数组合

function Person(uname, age) {
    this.uname = uname;
    this.age = age;
}
Person.prototype.say = function() {
    return '我叫' + this.uname + '，今年' + this.age + '岁。';
};
function Student(uname, age, grade) {
    Person.call(this, uname, age); // 构造函数调用父类
    this.grade = grade;
}
Student.prototype = Object.create(Person.prototype); // 原型类对象指向父类
Student.prototype.constructor = Student; //别忘了把constructor指回来

Student.prototype.exam = function() {
    console.log('正在考试！');
};
Student.prototype.say = function() {
    return Person.prototype.say.call(this) + this.grade + '学生。';
};
var stu = new Student('张三', 16, '高一');
console.log(stu.say()); //输出：我叫张三，今年16岁。高一学生。

1.首先在子构造函数中用call方法调用父构造函数，修改this指向，实现继承父类的实例属性；
2.然后修改子构造函数的prototype的指向，无论是寄生组合式继承，还是组合式继承，还是我们自己探索时的修改方式，本质都是把子类的原型链挂到父构造函数的原型对象上，从而实现子类继承父类的实例方法；
3.如果需要给子类新增实例方法，挂到子构造函数的prototype上；
4.如果子类的实例方法需要调用父类的实例方法，通过父构造函数的原型调用，但是要更改this指向。

核心就是原型对象+构造函数组合使用。只使用原型对象，子类无法继承父类的实例属性；只使用构造函数，又无法继承原型对象上的方法。

ES6 之后 使用 extends 关键字来继承。

class中，所有的属性，无论是否在contructor中指定，都会绑定到class的实例对象上

 class A {

 }

 class B extends A {

 }

 let b = new B()
 console.log(b.__proto__ === B.prototype)
 console.log(B.prototype.__proto__ == A.prototype)

闭包

闭包是作用域应用的特殊情况，有两种表现：

1.函数作为参数被传递

2.函数作为返回值被传递

简单理解：当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包

异步

JS是单线程语言，只能同时做一件事，DOM渲染时，JS执行必须停止，JS执行时，DOM渲染也必须停止

Promise

Promise三种状态：pending、fulfilled、rejected

状态变化：
1.pending-->fulfilled(成功了)
2.pending-->rejected(失败了)

状态变化是不可逆的

async/await

1. 执行async函数，返回的是Promise对象
2. await相当于Promise的then
3. try...catch可捕获异常，代替了Promise的catch

宏任务/微任务

宏任务：setTimeout、setInterval、Ajax、I/O、UI交互事件(比如DOM事件)
微任务：Promise回调、async/await、process.nextTick(Node独有，注册函数的优先级比Promise回调函数要高)、MutaionObserver

微任务执行时机比宏任务要早（记住）

注意：script全部代码、(这个是执行栈的代码，属于同步代码)，包括new Promise（function(){...}）里面的代码，只有then、catch回调才是微任务

实现 Promise.All

我们可以设置一个数组，用它来存放每个 Promise 返回的数据，当该数组的长度等于 Promise 任务的个数时，说明拿到了所有的数据，此时就可以把该数组返回出去了。
然后又因为原生 Promise.all 返回的是一个 Promise，所以我们也需要返回一个 Promise，然后把结果数据放入 resolve 中返回出去。

Promise.all = promises => {
	// 返回的是一个 Promise
	return new Promise((resolve, reject) => {
		let dataArr = new Array(promises.length)
		let count = 0

		for (let i = 0; i < promises.length; i++) {
			// 在 .then 中收集数据，并添加 .catch，在某一个 Promise 遇到错误随时 reject。
			// 这样，在最外面调用 Promise.all().catch() 时也可以 catch 错误信息
			promises[i].then(res => { addData(res, i) })
				.catch(err => { reject({ message: err, index: i }) })
		}

		function addData(data, index) {
			dataArr[index] = data
			count++
			// 如果数据收集完了，就把收集的数据 resolve 出去
			if (count === promises.length) resolve(dataArr)
		}
	})
}

笔试题:

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
 
async function async2() {
    console.log('async2');
}
 
console.log('script start');
 
setTimeout(function (){
    console.log('setTimeout');
}, 0)
 
async1();
 
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
    console.log("???"); // 这一句是我自己加的，目的考察大家是否知道同步代码和微任务，迷惑大家resolve()后面是否还会执行
}).then(function() {
    console.log('promise2');
})
 
console.log('script end');


从上到下，先是2个函数定义
再打印一个script start
看到setTimeout，里面回调函数放入宏任务队列等待执行
接着执行async1()，打印async1 start，看到await async2()，执行后打印async2，await后面的语句相当于Promise的then回调函数，所以是微任务，console.log('async1 end')放入微任务队列
执行new Promise，new Promise里面传的函数是同步代码，打印promise1，执行resolve()，后续触发的then回调是微任务，放入微任务队列，然后执行同步代码打印 ???
打印script end，同步代码执行完了
检查微任务队列，依次打印async1 end和promise2（这里指的是chrome/73+浏览器，后面会说不同）
尝试DOM渲染（如果DOM结构有变化）
检查宏任务队列，打印setTimeout
检查微任务队列为空，尝试DOM渲染，检查宏任务队列为空，执行结束