原始数据类型： boolean，string，null，undefined，symbol，bigint，number
引用类型： Object，Array，RegExp(正则)，Date，Math，Function
(直接修改引用类型上的属性值，依旧指向的是原先的引用，而赋值新的对象后，相当于指向了另外的引用)
typeof null = Object 原因在于其二进制的前三位都为0，所以才会判定null为object
体现了基本包装类型的性质，当我们对一个保存了基本数据类型值的变量调用方法时，都会创建一个基本包装类型的对象。
// "1".toString
var obj = new Object('1'); // 实际上创建的结果是 String {"1"}，也可以理解为new String("1")
obj.toString();
obj = null; //使用完后会立马销毁对象，清理其占用的内存
原因在于0.1和0.2在转换成二进制后无限循环，故相加后出现精度缺失，相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成0.30000000000000004
对于基本数据类型，除了null以外都可以，输出对应的基本数据类型
对于引用数据类型，除了function以外都会输出object
typeof 1; // 'number'
typeof null // 'object'
能，相当于自定义instanceof
Symbol.hasInstance用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个类上的行为。
class primitenNumber {
static [Symbol.hasInstance](instance) {
return typeof instance === 'number';
}
}
console.log('111' instanceof primitenNumber) // true
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
// type也可以是构造函数
function instanceof(value, type) {
// 如果是基本数据类型，则直接返回
if (typeof value !== 'object' || value === null) return false;
// getPrototypeOf返回指定对象的原型，即__proto__
let proto = Object.getPrototypeOf(value)
while(true) {
// 查到尽头还未查到
if (proto === null) return false;
// 找到相同的原型对象
if (proto === type.prototype) return true;
proto = Object.Object.getPrototypeOf(proto);
}
}
console.log(instanceof('111', String)) // false
console.log(instanceof(new String('111'), String)) // true
链接地址
__proto__：double underscore proto，该属性在ES标准中应该叫做[[Prototype]]
prototype: prototype是函数所独有的
function Foo(){};
const f1 = new Foo();
constructor：
这里补充说明一下：[[prototype]]属性是隐藏的，不过目前大部分新浏览器实现方式是使用__proto__来表示。构造函数的prototype属性我们是可以显式访问的。
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const car1 = new Car('Eagle', 'Talon TSi', 1993);
function new(constru, ...args){
if (typeof constru !== 'function' || constru === null) return;
// Object.create() 方法用于创建一个新对象，使用现有的对象来作为新创建对象的原型（prototype）。
const obj = Object.create(constru.prototype);
// 将constru内部的this指向obj
const result = constru.apply(obj, ...args);
// 如果构造函数返回的是对象，则使用构造函数执行的结果。否则，返回新创建的对象
return result instaceof Object ? result : obj;
}
new(Car, 'Eagle', 'Talon TSi', 1993);
Object.is修复了一些 === 判断的缺陷，+0和-0(===将+0和-0视为相等)，NAN和NAN(===将其视为不相等)的判断
function is(x, y){
if (x === y) {
//运行到1/x === 1/y的时候x和y都为0，但是1/+0 = +Infinity， 1/-0 = -Infinity, 是不一样的
// 1/+0 === 1/-0 结果为false
return x !== 0 || y !== 0 || 1/x === 1/y;
} else {
//NaN===NaN是false,这是不对的，我们在这里做一个拦截，x !== x，那么一定是 NaN, y 同理
//两个都是NaN的时候返回true
return x !== x && y !== y;
}
}
如果有布尔值那么两边转化为数值进行比较，如果有字符串，那么两边都转化为字符串进行比较
左边会首先转化为number(数组属于引用类型，且是空数组，故会被转化为0，如果是[1]，会被转化为1)，0
右边会首先转化为boolean值，由于[]作为一个引用类型转换为布尔值为true，!true则为false，再转化为number则为0
0 == 0 返回 true
（1）如果是布尔值，true和false分别被转换为1和0
（2）如果是数字值，返回本身。
（3）如果是null，返回0.
（4）如果是undefined，返回NaN。
（5）如果是字符串，遵循以下规则：
1、如果字符串中只包含数字，则将其转换为十进制（忽略前导0）
2、如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0）
3、如果是空字符串，将其转换为0
4、如果字符串中包含非以上格式，则将其转换为NaN
（6）如果是对象，则调用对象的valueOf()方法，然后依据前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，再次依照前面的规则转换返回的字符串值。
// 字符串和数字相加
'111' + 1 = '1111';
// boolean和数字相加
true + 1 = 2;
false + 1 = 1;
// boolean和字符串相加
false + '1' = 'false1'
1 + null = 1;
1 + undefiend = NaN;
'1' = undefined = '1undefiend'; // null同理
true + undefined = NaN;
true + null = 1;
闭包是指有权访问另外一个函数作用域中的变量的函数，
当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链
比如回调函数，单例模式也可以使用闭包来实现，高阶函数
var a = 1;
function f1(){
var a = 2;
function f2(){
var a = 3;
console.log(a); // 3
}
}
解决闭包的this指向问题
var name = "window" //这里是全局的
var obj = {
name:"obj",//这里是局部的
say:function(){ //这里是对象中的方法，这里的this指向obj这个对象
return function(){ //这里是闭包
return this.name //这里的this指向是window，所以结果是window
}
}
}
alert(obj.say().call(obj))
var name = "window" //这里是全局的
var obj = {
name:"obj",//这里是局部的
say:function(){ //这里是对象中的方法，这里的this指向obj这个对象
let that = this
return function(){ //这里是闭包
return that.name //这里的this指向是window，所以结果是window
}
}
}
alert(obj.say())
使用场景：回调函数(事件，计时器)
解决循环输出的问题：
for (var i = 0; i < 5; i++) {
setTimeout((index) => {
console.log(index)
}, 0, i)
}
添加setTimeout的第三个参数，作为回调函数的第一个参数
使用let增加块级作用域
立即执行函数
for (var i = 0; i < 5; i++) {
((index) => {
setTimeout(() => {
console.log(index)
}, 0)
})(i);
}
// 对象中this指向问题
let value = '2';
const obj = {
value: '1',
a: function(){
console.log(this.value)
return function() {
console.log(this);
}
}
}
obj.a()() // '1';
// 如果obj中没有value，则this.value = undefined
// 函数当中this指向问题
const value = 'test';
function con() {
console.log(this.value);
}
con() // undefined
// 这种情况下this指向undefined或全局，必须要使用new运算符实例化之后，this才能指向正确
function Obj() {
this.value = 1;
}
Obj.prototype.getValue = () => {
console.log(this.value);
}
const test = Obj.prototype.getValue;
test()
箭头函数
指向最近的非箭头函数的this
DOM时间绑定
onclick和addEventerListener中 this 默认指向绑定事件的元素。
IE比较奇异，使用attachEvent，里面的this默认指向window。
没定义一个函数数据类型，都会自带一个prototype属性，指向函数的原型对象。
当函数经过new运算符调用时，函数就成为了构造函数，返回一个全新的实例对象，这个实例对象有一个proto属性，指向构造函数的原型对象。
// 通过call方法来实现继承
// 缺点：可以继承父类自己的属性和方法，但是无法继承父类原型上的属性和方法
fucntion parent(){
this.a = 'name';
this.b = function(){
console.log('list')
}
}
function child(){
parent.call(this);
this.c = 'abound';
}
const test = new child();
test.b(); // Unexpected identifier
// 借助原型链
// 缺点：共用相同的原型属性，其中一个实例对象的属性改变，其他实例上对应的属性值也会改变(只针对引用类型，因为引用类型指向的是引用而不是真实的值，基本数据类型不会受到影响)
function parent(){
this.name = 'xiaohong';
this.arr = [1, 2, 3, 4];
}
function child() {
this.type = 'proto';
}
child.prototype = new parent();
const test_1 = new child();
const test_2 = new child();
test_1.arr.push(5);
console.log(test_2.arr); // [1, 2, 3, 4, 5]
// 寄生组合继承(推荐)
function parent(){
this.name = 'xiaohong';
this.arr = [1, 2, 3, 4];
}
function child(){
parent.call(this);
this.type = 'proto'
}
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = child;
补充一点(这里需要更详细的作为补充知识)：
在目前实现的继承上其实没有考虑父类的静态方法的继承
附加原型链
//可以使用
Object.setPrototypeOf() 或者 child.__proto__ = parent来实现
继承的最大问题在于：无法决定继承哪些属性，所有属性都得继承。
可以理解为arguments是一个类数组
通过扩展运算符或者Array.prototype.slice.call()可以转化为真实的数组
链接地址
第42篇
forEach()
async function test(){
let arr = [4, 2, 1];
arr.forEach(async (item) => {
const res = await handle(item);
console.log(res)
})
console.log('end')
}
function handle(item) {
return new Promise((res, rej) => {
setTimeout(() => {
resolve(item);
}, 1000 * item)
})
}
// 期待结果
4
2
1
end
// 实际结果
end
1
2
4
原因在于forEach对于回调函数的处理是拿来即用，所以传入的异步回调还是会按照事件循环机制运转
// forEach核心逻辑
for (var i = 0; i< length; i++) {
// in可以判断索引值是否在数组中
if (i in array) {
var element = array[i];
useCallback(element, i);
}
}
对于循环中的异步处理，可以替换为for…of来实现同步执行
// in运算符获取的是数组的下标，of获取的是数组元素
const arr = [4, 3, 2, 1];
async function test() {
for (const item of arr) {
const res = await handle(item);
console.log(res);
}
console.log('end');
}
for…of之所以可以实现异步函数的同步运行，原因在于它使用了迭代器来进行遍历而不是像forEach一样只是简单地循环。
具有迭代器属性的的数据类型：
如数组、类数组（如arguments、NodeList）、Set和Map。
多个任务成功地按顺序执行！其实刚刚的for...of循环代码就是这段代码的语法糖。
async function test(){
let arr = [4, 3, 2, 1];
let interator = arr[Symbol.iterator]();
let res = interator.next();
while(!res.done) {
let value = res.value;
console.log(value);
await handle(value);
res = interator.next();
}
console.log('end');
}
// indexOf()
此方法判断数组中是否存在某个值，如果存在，则返回数组元素的下标，否则返回-1。
// includes()
此方法判断数组中是否存在某个值，如果存在返回true，否则返回false
// find(callback)
返回数组中满足条件的第一个元素的值，如果没有，返回undefined
//findeIndex(callback)
返回数组中满足条件的第一个元素的下标，如果没有找到，返回 -1
链接地址
let arr = [1,[2,[3,4,5]]];
function flat(arr) {
// reduce(pre, current)：pre表示上一次处理的结果，current表示当前正在处理的值
return arr.reduce((pre, current) => {
return pre.concat(Array.isArray(current) ? flat(current) : current)
})
}
concat()方法会去除掉一层数组
let arr = [1,[2,[3,4,5]]];
function flat(arr) {
while(arr.some((item) => Array.isArray(item))) {
arr = [].concat(...arr)
}
return arr;
}
arr.flat([depth])
let arr = [1, [2, [3, 4]]];
function flatten(arr) {
return arr.flat(Infinity);
}
console.log(flatten(arr));//[ 1, 2, 3, 4 ]
bind()方法如果传的是null或者undefined，则this默认指向window
Function.prototype.bind(this, ...args)
返回一个原函数的拷贝，并拥有指定的 this 值和初始参数
如果给bind()的第一个参数传递为null或undefined或空：this在非严格模式下指向全局，严格模式下指向undefined
且bind()中传入的参数会作为绑定函数的参数一次往后排列，bind()中传入的参数排在调用函数时传入的参数前面
对于普通函数，绑定this指向
对于构造函数，要保证原函数的原型对象上的属性不能丢失
//bind返回的函数如果作为构造函数，搭配new关键字出现的话，我们绑定的this就需要被忽略
//处理构造函数场景下的兼容
Function.prototype.bind = Function.prototype.bind || function(context){
//确保调用bind方法的一定要是一个函数
if(typeof this !== "function"){
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var args = Array.prototype.slice.call(arguments, 1);
var self = this;
var F = function(){};
F.prototype = this.prototype;
var bound = function(){
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
//bind返回的函数如果作为构造函数，搭配new关键字出现的话，我们绑定的this就需要被忽略
self.apply(this instanceof self ? this : context, finalArgs);
}
bound.prototype = new F();
return bound;
}
就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组
call()
// 使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined
Function.prototype.call = function(context) {
var context = context || window;
context.fn = this;
var args = [];
for (let i = 1; i< arguments.length; i++){
args.push(arguments[i]);
}
var result = context.fn(args);
delete context;
return result;
}
apply()
传入的数组将作为一个整体独立参数
Function.prototype.apply = function(context, ...args) {
var context = context || window;
context.fn = this;
var result = context.fn(...args);
delete context;
return result;
}
bind和call，apply的区别：
只能拷贝一层对象，对于嵌套的对象而言，仅仅拷贝的是对象的引用
object.assign()
方法将所有可枚举（Object.propertyIsEnumerable() 返回 true）和自有（Object.hasOwnProperty() 返回 true）属性从一个或多个源对象复制到目标对象，返回修改后的对象。
// 简易版以及问题
JSON.parse(JSON.stringify())
// 简易版二
function deepClone(obj) {
let result = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === 'object') {
for(let key in obj) {
if (obj.hasOwnPrototype(key)) {
if (typeof obj[key] === 'object') {
result[key] = deepClone(obj[key])
} else {
result[key] = obj[key]
}
}
}
}
return result;
}
1. 无法解决循环引用的问题
const a = {val: 1};
a.target = a;
const b = JSON.parse(JSON.stringify(a));
//Converting circular structure to JSON
2. 无法拷贝一些特殊函数
如RegExp, Date, Set, Map
3.首先实现一个简易的深拷贝
function deepClone(target) {
if (typeof target === 'object' && target !== null) {
const cloneTarget = Array.isArray(target) ? [] : {};
for (let item in target) {
if (target.hasOwnProperty(item)) {
cloneTarget[item] = deepClone(item);
}
}
} else {
return target;
}
}
4. 解决循环引用的问题
// 使用Map结构来记录，遇到已经创建过的，直接返回
function deepClone(target) {
const map = new Map();
if (map.get(target)) {
return target
}
if (typeof target === 'object' || typeof target === 'function' && target !== null) {
map.set(target, true);
const cloneTarget = Array.isArray(target) ? [] : {};
for (let item in target) {
if (target.hasOwnProperty(item)) {
cloneTarget[item] = deepClone(item);
}
}
} else {
return target;
}
}
基本数据类型：栈存储
引用数据类型：在栈中存放对象的引用地址，而真实数据存放在堆中
对于系统栈来说，它的功能除了保存变量之外，还有创建并切换函数执行上下文的功能。
对于JS来说，V8引擎只能使用系统的一小部分内存，具体来说。64位系统只能分配1.4G，32位系统只能分配0.7G。
2. 首先将新生代内存区域分为From(存放正在使用的对象)和To(闲置空间)
3. 检查From中，如果是存活对象，则按照从头放置的顺序转入To中，如果是非存活对象，则回收
4. 转移完毕后，再将两空间对调，即To变为了From，以此为循环
因为堆是连续分配内存空间，这么做的目的是为了防止在存活对象在占用空间时产生的内存碎片，导致大一点内存的无法被分配空间
4. 新生代的垃圾回收算法成为Scavenge算法，优势是将内存空间规整之后，方便后续的内存分配，缺点是空间使用率会大大降低。
老生代：常驻内存，存活时间长(由新生代内存空间中多次回收后依然存在的变量会被提升到老生代内存空间中)
新生代内存中的变量如果被多次回收之后依旧存在，则会被放入老生代内存当中
1. 标记—清除
遍历堆中的所有对象进行标记
对于使用变量以及强引用的变量取消标记，剩下的就是需要删除的变量
当然这又会引发内存碎片的问题，存活对象的空间不连续对后续的空间分配造成障碍。老生代又是如何处理这个问题的呢？
2. 整理内存碎片
V8 的解决方式非常简单粗暴，在清除阶段结束后，把存活的对象全部往一端靠拢。
由于JS单线程执行的缘故，V8在执行垃圾回收时不可避免会存在阻塞的情况，那这个时候为了避免这样问题，V8 采取了增量标记的方案，即将一口气完成的标记任务分为很多小的部分完成，每做完一个小的部分就"歇"一下，就js应用逻辑执行一会儿，然后再执行下面的部分，如果循环，直到标记阶段完成才进入内存碎片的整理上面来。其实这个过程跟React Fiber的思路有点像，这里就不展开了。
机器是读不懂 JS 代码，机器只能理解特定的机器码，那如果要让 JS 的逻辑在机器上运行起来，就必须将 JS 的代码翻译成机器码，然后让机器识别。
let name = 'xiaoming'
(关键字) (变量名) (赋值) (字符串)
当生成了 AST 之后，编译器/解释器后续的工作都要依靠 AST 而不是源代码。
babel实际上就是将ES6转化为ES6的AST，然后再将ES6的AST转化为ES5的AST，最后再转化为ES5代码。
生成字节码
在原先的V8引擎中是直接将AST转化为机器码的，但是体积由于过大的缘故，后面改为先转为字节码之后再一句一句转化为机器码。
字节码仍然需要转换为机器码，但和原来不同的是，现在不用一次性将全部的字节码都转换成机器码，而是通过解释器来逐行执行字节码，省去了生成二进制文件的操作，这样就大大降低了内存的压力。
执行代码
执行字节码的过程中，对于重复代码，会被V8标记为热点代码，通过V8的编译器会将字节码编译成机器码，重复的热点代码会被保存起来，这样就可以在后续遇到重复代码的时候直接复用机器码。
https://www.jianshu.com/p/32db2f258986
https://zhuanlan.zhihu.com/p/361683562
用途
IDE的错误提示、代码格式化、代码高亮、代码自动补全等
JSLint、JSHint对代码错误或风格的检查等
webpack、rollup进行代码打包等
CoffeeScript、TypeScript、JSX等转化为原生Javascript
JS Parser(JS语言解析器)
将 JS 解析为 AST
常用的Parser有esprima、traceur、acorn、shift
解析过程主要有两个步骤：分词和语法解析
分词：将代码分解成最小语法单元(具备实际意义的最小单元)数组，通过词法分析将其转化为令牌流的
语法解析：在分词基础上建立分析语法单元之间的关系
| let | sum | = | 10 | + | 66 | ; |
[{
"type": "VariableDeclaration",
"content": {
{"type": "kind", value: "let"} // kind 表示是什么类型的声明
{"type": "Identifier", value: "sum"} // Identifier 表示是标识符
{"type": "init", value: "="} // init 表示初始值的表达式
{"type": "Literal", value: "10"} // Literal 表示是一个字面量
{"type": "operator", value: "+"} // operator 表示是一个二元运算符
{"type": "Literal", value: "66""}
{"type": "Punctuator", value: ";"}
}
}]
语法单元的分类：
关键字：例如 var、let、const等
标识符：没有被引号括起来的连续字符，可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些内置常量
运算符： +、-、 *、/ 等
数字：像十六进制，十进制，八进制以及科学表达式等语法
字符串：因为对计算机而言，字符串的内容会参与计算或显示
空格：连续的空格，换行，缩进等
注释：行注释或块注释都是一个不可拆分的最小语法单元
其他：大括号、小括号、分号、冒号等
AST作用
以babel为例，其作用就是通过将ES6的代码转化为AST，再转化为ES5的AST后变成ES5的代码。
babel的两个核心库：@babel/core用于实现核心引擎转换，babel-types用来进行类型判断，生成AST的零部件
const sum = (a, b) => a + b;
const sum = function(a, b) {
return a + b;
}
通过 babel的transform来实现
//transform方法转换code
//babel先将代码转换成ast，然后进行遍历，最后输出code
//babel 核心库，用来实现核心转换引擎
const babel = require('@babel/core')
//类型判断，生成AST零部件
const types = require('babel-types')
let result = babel.transform(code,{
plugins:[
{
visitor
}
]
})
一种是单一处理，结构如下，其中 path 代表当前遍历的路径 path.node 代表当前变量的节点
let visitor = {
// 节点对应的访问者方法
VariableDeclaration(path) {
// 该路径对应的节点
const node = path.node
// 实现对const和let 到 var 的替换
['let', 'const'].includes(node.kind) && (node.kind = 'var')
}
// 箭头函数对应的访问者方法
ArrowFunctionExpression(path){
let {id, params, body, generator, async} = path.node;
path.replaceWith(types.functionExpression(id, params, body, generator, async))
}
}
另一种是用于输入和输出双向处理，结构如下，参数 node 表示当前遍历的节点
let visitor = {
ArrowFunctionExpression : {
enter(node){
},
leave(node){
}
}
}
链接地址
function Promise((resolve, reject) => {
if (true) {
resolve('true');
} else {
reject('false');
}
})
// 自定义Promise
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
function Promise(executor) {
const this_ = this;
this_.value = null // 执行成功回调的传参
this_.error = null // 执行失败回调的传参
this_.onFulfilled = null // 成功的回调函数
this_.onRejected = null // 失败的回调函数
this_.status = PENDING
this_.callbacks = [] // 成功或失败的回调数组，实现链式调用
const resolve = (value) => {
if (this_.status !== PENDING) return;
this_.value = value;
this_.status = FULFILLED;
// 使得在异步状态下也可以得出正确的结果
if (this_.callbacks.length !== 0) {
this_.callbacks.forEach((item) => {
item.onFulfilled(this_.value);
})
}
}
const reject = (error) => {
if (this_.status !== PENDING) return;
this_.error = error;
this_.status = REJECTED;
// 使得在异步状态下也可以得出正确的结果
if (this_.callbacks.length !== 0) {
this_.callbacks.forEach((item) => {
item.onRejected(this_.error);
})
}
}
exector(resolve, reject);
}
Promise.prototype.then = function (onFulfilled, onRejected) {
return new Promise((resolve, rejected) => {
if (this.status === PENDING) {
// 实现链式调用
this.callbacks.push({
onFulfilled: function(value) {
// 如果传入的不是函数
if (!isFunction(onFulfilled)) {
resolve(value)
} else {
}
},
onRejected: onRejected,
})
} else if (this_.status === FULFILLED) {
if (!isFunction(onFullfilled)) {
resolve(this.value)
} else {
const result = onFullfilled(this.value);
// 如果返回的是一个promise
if (result instanceof Promise) {
result.then((res) => {
resolve(res)
}, (rej) => {
reject(rej)
})
} else {
resolve(result)
}
}
} else if (this_.status = REJECTED) {
if (!isFunction(onRejected)) {
reject(this.error)
} else {
const result = onRejected(this.error);
// 如果返回的是一个promise
if (result instanceof Promise) {
result.then((res) => {
resolve(res)
}, (rej) => {
reject(rej)
})
} else {
reject(result);
}
}
}
})
}
Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected)
}
无论当前 Promise 是成功还是失败，调用finally之后都会执行 finally 中传入的函数，并且将值原封不动的往下传。
Promise.prototype.finally = function(callback) {
this.then((value) => {
return Promise.resolve(callback).then(() => value)
}, (error) => {
return Promise.reject(callback).then(() => throw error)
})
}
// Promise.all
// 必须等待所有的promise都执行完之后才能输出值
Promise.prototype.all = function(promises) {
return new Promise((resolve, reject) => {
let result = [];
if (promises?.length === 0) {
resolve(result);
return;
}
const handleData = (data, index) => {
result[index] = data;
if (index === promises.length - 1) resolve(result);
}
for (let i = 0; i<promises.length; i++) {
// 不直接使用promises[i].then是因为传入的promises数组项不能保证是promise
Promise.resolve(promises[i]).then((res) => {
handleData(res, i);
}).catch((err) => {
reject(err)
})
}
})
}
// Promise.race
// 只要存在一个promise执行完即输出
Promise.prototype.race = function(promises) {
return new Promise((resolve, reject) => {
if (promises?.length === 0) {
return;
}
for (let i = 0; i<promises.length; i++) {
// 不直接使用promises[i].then是因为传入的promises数组项不能保证是promise
Promise.resolve(promises[i]).then((res) => {
resolve(res);
return;
}).catch((err) => {
reject(err);
return;
})
}
})
}
设计模式
// addEventListener()也是一种：
target就是被观察对象Subject，listener就是观察者Observer。
target.addEventListener(type, listener [, options]);
观察者模式中Subject对象一般需要实现以下API：
subscribe(): 接收一个观察者observer对象，使其订阅自己
unsubscribe(): 接收一个观察者observer对象，使其取消订阅自己
fire(): 触发事件，通知到所有观察者
function Subject() {
this.observes = [];
}
Subject.prototype = {
const this_ = this;
subscribe: function(observer) {
this_.observers.push(observer)
}
unsubscribe: function(unObserver) {
this_.observers = this_.observers.filter((item) => {
item !== unObserver
})
}
fire: function() {
this_.observers.forEach(observer => {
observer.call(this_);
});
}
}
var obj = new Proxy({}, {
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
},
set: function (target, propKey, value, receiver) {
console.log(`setting ${propKey}!`);
return Reflect.set(target, propKey, value, receiver);
}
});
obj.count = 1
// setting count!
++obj.count
// getting count!
// setting count!
// 创建一个Proxy的实例，第一个参数表示需要拦截的对象，也可以设定为{}空对象，第二个参数表示添加的拦截方法
var proxy = new Proxy(target, handler);
function BenzCar(color) {
this.color = 'black';
this.brand = 'Benz';
}
function BMWCar(color) {
this.color = 'black';
this.brand = 'BMW';
}
function CarFactory() {
this.create = (brand, color) => {
switch(brand) {
case 'Benz':
return new BenzCar(color);
case 'BMW':
return new BMWCar(color);
default:
return 'null';
}
}
}
const carFactory = new CarFactory();
const cars = [];
cars.push(carFactory.create(BRANDS.suzuki, 'brown'));
cars.push(carFactory.create(BRANDS.honda, 'grey'));
cars.push(carFactory.create(BRANDS.bmw, 'red'));
function sayHello() {
console.log(`Hello, I am a ${this.color} ${this.brand} car`);
}
for (const car of cars) {
sayHello.call(car);
}
function Instance(){}
function createInstance() {
let instance = null
return function() {
if (!instance) {
instance = new Instance();
}
return instance;
}
}
let create = createInstance();
let p1 = create(1);
let p2 = create(2);
console.log(p1 === p2)
https://juejin.cn/post/7001025002287923207
// class类
class Person {
static instance = null;
static getInstance() {
return super.instance;
}
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
console.log('hi');
}
sayHello = () => {
console.log('hello');
}
sayBye = function() {
console.log('bye');
}
}
// 实现
在 class 中不直接使用 = 来定义的方法，最终都会被挂载到原型上，使用 = 定义的属性和方法，最终都会被放到构造函数中。
var Person = (function () {
function Person(name, age) {
_classCallCheck(this, Person);
this.sayHello = function () {
console.log('hello');
};
this.sayBye = function () {
console.log('bye');
};
this.name = name;
this.age = age;
}
_createClass(Person, [{
key: 'sayHi',
value: function sayHi() {
console.log('hi');
}
}]);
return Person;
})();
Person.instance = null;
// extends
class Child extends Parent {
constructor(name, age) {
super(name, age);
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
}
class Parent {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
}
// 实现
var Child = (function (_Parent) {
_inherits(Child, _Parent);
function Child(name, age) {
_classCallCheck(this, Child);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Child).call(this, name, age));
_this.name = name;
_this.age = age;
return _this;
}
_createClass(Child, [{
key: "getName",
value: function getName() {
return this.name;
}
}]);
return Child;
})(Parent);
// _inherits()方法实现
function _inherits(subClass, superClass) {
// 如果有一个不是函数，则抛出报错
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
// 将 subClass.prototype 设置为 superClass.prototype 的实例
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
// 将 subClass 设置为 superClass 的实例（优先使用 Object.setPrototypeOf）
if (superClass)
Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function Person(name){
this.name=name;
}
Person.prototype.sayName=function(){
console.log(this.name+' '+this.gender+' '+this.age);
}
function Female(name,gender,age){
Person.call(this,name);//第一次调用父类构造函数，考虑父类构造函数可能存在返回值
this.age=age;
this.gender=gender;
}
一般函数默认的prototype是一个类型为"object"的对象，它有两个属性：constructor和 __proto__。
Female.prototype=new Person();//第二次调用父类构造函数，将父类实例赋值到子类原型上
Female.prototype.constrcutor=Female;//因重写原型而失去constructor属性，所以要对constrcutor重新赋值
函数作用域中的this指向window
function Test() {
this.name = 'xiaoming'; // 实际上是在window中定义了name属性
console.log(this); // 指向的是window
return function() {
console.log(this.name); // 打印结果为'xiaoming'，原因在于闭包情况下this指向全局，故可以访问到正确的name属性值
}
}