得物面经学习（二）

• DomContentLoaded和ContentLoaded的区别
• promise缺点
• try catch能否捕获settimeout中抛出的error
• 扩展运算符是浅拷贝还是深拷贝，深拷贝方案
• 微前端
• monorepo是什么
• 按需加载
• ES5和ES6的继承方式

DomContentLoaded和ContentLoaded的区别

load

意思是页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。

DOMContentLoaded

HTML下载、解析完毕之后就触发。

promise缺点

• 无法取消，执行过程当中不能终止 ps:解决-可以用axios解决（XMLHttpRequest.abort中断请求），promise当中包含一个xhr请求，并且我们申明abort函数方便调用，在外调用就可以立即中断请求，resolve、reject函数都在请求内，请求中止，其实也就是相当于回调不会被调用

try catch能否捕获settimeout中抛出的error

可以捕获异常，但是必须在setTiemout里面使用tryout，不能够try（setTimeout）catch，因为tryout是捕获同步代码块中的异常的，而setTimeout是异步

function runWithCatch(callback) {
  try {
    callback();
  } catch (error) {
    console.error(error);
  }
}

setTimeout(() => {
  runWithCatch(() => {
    throw new Error('An error occurred.');
  });
}, 1000);

扩展运算符是浅拷贝还是深拷贝，深拷贝方案

对象只有一层的时候是深拷贝，超过一层是浅拷贝，object.assign也是 浅拷贝

• 扩展运算符：... const shallowCopy = { ...originalObject };
• object.assgin:const shallowCopy = Object.assign({},originalObject); 深拷贝

微前端

核心思想是将前端应用拆分成多个小型独立的子应用，每个子应用都可以独立开发、测试运行。

• qiankun微前端实现库

monorepo是什么

单一代码仓库）是一种软件开发的组织结构模式，它将多个相关的项目或模块存储在一个单独的代码仓库中，而不是将它们分散到多个独立的代码仓库中

按需加载

常见的按需加载-懒加载、

ES5和ES6的继承方式

es5:原型链和构造函数方式

// 父类
function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

// 子类
function Dog(name, breed) {
  Animal.call(this, name); // 调用父类构造函数
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 设置子类原型为父类实例
Dog.prototype.constructor = Dog; 
// 修复子类的构造函数指向，因为上一步会导致子类构造函数指向父类构造函数

Dog.prototype.sayBreed = function() {
  console.log("I am a " + this.breed + " dog");
};

// 创建子类实例
var myDog = new Dog("Max", "Labrador");
myDog.sayName(); // 输出: My name is Max
myDog.sayBreed(); // 输出: I am a Labrador dog

es6

// 父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log("My name is " + this.name);
  }
}

// 子类
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }

  sayBreed() {
    console.log("I am a " + this.breed + " dog");
  }
}

// 创建子类实例
let myDog = new Dog("Max", "Labrador");
myDog.sayName(); // 输出: My name is Max
myDog.sayBreed(); // 输出: I am a Labrador dog