Résumez quelques questions courantes d'entretien d'embauche (avec réponses) pour vous aider à consolider vos connaissances !-Questions et réponses frontales-php.cn

Résumez quelques questions courantes d'entretien d'embauche (avec réponses) pour vous aider à consolider vos connaissances !

Le but principal de la publication d'articles est de consolider mes connaissances et de devenir plus compétent. Tout est basé sur ma propre compréhension et les informations que j'ai recherchées en ligne, j'espère que vous pourrez me donner quelques conseils. Ce qui suit est un résumé des questions d'entretien courantes que j'ai résumées. Je continuerai à les mettre à jour afin de me pousser

js part

1. Parlez de votre compréhension de la chaîne de prototypes

Dans. js, chaque objet instance a un attribut __proto__, qui pointe vers son objet prototype, et le constructeur de cet objet instance a un attribut prototype prototype, qui est le même que le __proto__ de l'objet instance. Les attributs pointent vers le même objet. Lorsque l'objet recherche la valeur d'un attribut, il recherchera son prototype selon __proto__. l'objet instance sera généré. Recherchez sur l'objet prototype du constructeur. S'il n'existe toujours pas, continuez la recherche sur l'objet prototype d'Object. Si vous recherchez plus haut, ce processus de recherche en chaîne est appelé <. code>chaîne de prototypes. __proto__属性，改属性指向他的原型对象，且这个实例对象的构造函数都有一个原型属性prototype,与实例对象的__proto__属性指向同一个对象，当这个对象在查找一个属性的值时，自身没有就会根据__proto__向他的原型上寻找，如果不存在，则会到生成这个实例对象的构造函数的原型对象上寻找，如果还是不存在，就继续道Object的原型对象上找，在往上找就为null了，这个链式寻找的过程，就被称为原型链。

2、原型、构造函数、实例对象三者的关系

首先从构造函数说起，构造函数通过prototype指向他的原型对象，原型对象通过他的constructor属性指回这个构造函数，表明原型对象是由哪个构造函数生成的。原型对象通过new关键字生成的实例对象，这个实例对象可以通过__proto__属性指向生成这个实例对象的构造函数的原型对象，实现一个三角关系。

Résumez quelques questions courantes dentretien dembauche (avec réponses) pour vous aider à consolider vos connaissances !

3、实现继承的方式

继承的方式有很多种，网上的答案都有很多，我自己总结且大致说的明白的有这五种

1）原型链继承

借助原型可以基于已有的对象创建对象，同时还不必因此创建自定义类型。在 object()函数内部，先创建一个临时的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。关键代码：Star.proyotype = new Person(), Star.proyotype.constructor = Star缺点：只能继承父类的方法

2）借用构造函数继承

在子类构造函数的内部调用超类型构造函数。可以通过使用 apply()和 call()方法在新创建的对象上执行构造函数。关键代码：Person.call(this,age,name)缺点：无法复用，只能继承父类的属性

3）组合继承

也叫伪经典继承。指的是将原型链和借用构造函数的技术组合到一起，从而发挥二者之长。使用原型链实现对原型属性属性和方法的继承，通过借用构造函数来实现实例属性的继承。既通过在原型上定义方法实现了函数复用，又能保证每一个实例都有它自己的属性。但是会有一个小bug，里面的age，name，有两份，有一份的值为undefined，因为里面的apply()和call()方法会自动多调用一次。

4）寄生组合继承

通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。是公认继承比较全面的一种方法，要写全的话还是非常多的，我只会一个简单的?，关键代码：Star.prototype = Object.create(Person.prototype)

5）ES6的Class类继承方式

可利用class关键字配合extends关键字来实现继承。ES6中引入了class关键字来声明类，而class（类）可通过extends来继承父类中属性和方法，super指向父类的原型对象，可以调用父类的属性和方法，且子类constructor方法中必须有super关键字，且必须出现在this之前。

4、js数据类型

数据类型从大的方向来说分为两种

基本数据类型：字符串(String)，数字(Number)，布尔(Boolean)，空(Null)，未定义(Undefined)，Symbol(nbs)
复杂数据类型：对象(Object)，数组(Array)，函数(Function)
Symbol表示独一无二的值，避免属性名的冲突

5、检测数据类型

typeof

2. La relation entre le prototype, le constructeur et l'objet instance🎜🎜🎜Commençons d'abord par le constructeur, qui pointe vers lui via prototype Le prototype object renvoie à ce constructeur via son attribut constructor, indiquant par quel constructeur l'objet prototype a été généré. L'objet prototype est un objet instance généré par le mot-clé new. Cet objet instance peut pointer vers l'objet prototype du constructeur qui a généré l'objet instance via l'attribut __proto__, réalisant une relation triangulaire. 🎜🎜🎜
🎜3. Façons de mettre en œuvre l'héritage🎜🎜🎜Il existe de nombreuses façons d'hériter, et il existe de nombreuses réponses sur Internet. J'ai résumé et expliqué grossièrement ces cinq façons🎜🎜🎜 1) Héritage de la chaîne de prototypes🎜🎜🎜À l'aide de prototypes, vous pouvez créer des objets basés sur des objets existants sans avoir à créer de types personnalisés. Dans la fonction object(), un constructeur temporaire est d'abord créé, puis l'objet transmis est utilisé comme prototype du constructeur, et enfin une nouvelle instance de ce type temporaire est renvoyée. Code clé : Star.proyotype = new Person(), Star.proyotype.constructor = Star Inconvénients : Seules les méthodes de la classe parent peuvent être héritées🎜🎜🎜2) Emprunter l'héritage du constructeur🎜🎜🎜 dans le sous-classe En interne, le constructeur appelle le constructeur de supertype. Les constructeurs peuvent être exécutés sur des objets nouvellement créés en utilisant les méthodes apply() et call(). Code clé : Person.call(this, age, name) Inconvénients : ne peut pas être réutilisé, ne peut hériter que des attributs de la classe parent🎜🎜🎜3) L'héritage combiné🎜🎜🎜 est également appelé pseudo- héritage classique. Il s’agit de combiner les techniques de chaînage de prototypes et d’emprunt à des constructeurs pour profiter du meilleur des deux mondes. Utilisez la chaîne de prototypes pour hériter des propriétés et des méthodes du prototype, et empruntez des constructeurs pour hériter des propriétés d'instance. Il réalise non seulement la réutilisation des fonctions en définissant des méthodes sur le prototype, mais garantit également que chaque instance possède ses propres attributs. Mais il y aura un petit bug. Il y a deux copies de age et name, et l'une d'elles a une valeur indéfinie, car apply() et call(). les méthodes à l’intérieur appelleront automatiquement une fois de plus. 🎜🎜🎜4) Héritage de combinaison parasite🎜🎜🎜Hérite des propriétés en empruntant des constructeurs et hérite des méthodes via la forme hybride de la chaîne de prototypes. Essentiellement, vous utilisez l'héritage parasite pour hériter du prototype du supertype, puis attribuez le résultat au prototype du sous-type. Elle est reconnue comme une méthode complète d'héritage. Si vous voulez tout écrire, c'est encore très simple ?, le code clé : Star.prototype = Object.create(Person.prototype). )🎜 🎜🎜5) La méthode d'héritage de classe Class d'ES6 🎜🎜🎜 peut utiliser le mot-clé class avec le mot-clé extends pour obtenir l'héritage. Le mot-clé class a été introduit dans ES6 pour déclarer une classe, et une classe (classe) peut hériter des attributs et des méthodes de la classe parent via extends, et super pointe vers le L'objet prototype de la classe parent. Les propriétés et les méthodes de la classe parent peuvent être appelées, et le mot-clé super doit être dans la méthode du constructeur de sous-classe et doit apparaître avant cela. 🎜
🎜4. Types de données js 🎜🎜🎜🎜 Les types de données sont généralement divisés en deux types 🎜🎜
- Types de données de base : chaîne ( Chaîne), Nombre ( Nombre), Booléen (Booléen), Null (Null), Indéfini (Indéfini), Symbole (nbs)
- Types de données complexes : Objet (Objet), Tableau (Array), Fonction (Fonction)🎜Le symbole représente une valeur unique pour éviter les conflits de noms d'attribut
🎜5. Détecter le type de données🎜🎜
- 🎜typeof Problèmes de détection : null ou le tableau est imprimé en tant qu'objet🎜
- instanceof (ne peut détecter que les types de données complexes)
  La valeur de retour est vraie ou fausse Tant que le constructeur concerné est sur la chaîne de prototypes, c'est vrai, sinon il est faux. Il peut être utilisé pour détecter s'il s'agit d'un tableauinstanceof (只能检测复杂数据类型)
  返回值是 true 或者 false 相关的构造函数只要在原型链上,就是 true,否则就是 false 可以用于检测是不是数组
- Object.prototype.toString.call(要检测的数据值)
  为什么要借 Object.prototype.toString,因为自己的 toString 被自己原型重写了,得不到类似[object Object]
6、如何检测一个数据是数组
```
var arr = [2, 3, 4]
console.log(arr instanceof Array)
console.log(Array.isArray(arr))
console.log(Object.prototype.toString.call(arr))
```
Copier après la connexion
7、深拷贝和浅拷贝
- 浅拷贝：只是拷贝一层，更深层次对象级别的只拷贝了地址
- 深拷贝：层层拷贝，每一级别的数据都会拷贝
- 浅拷贝方法：
  1. 使用 lodash 浅拷贝 clone 方法，让他们俩指向不同地址
  2. 使用 Object.assign 方法
  3. 使用es6语法的 ... 拓展运算符
- 深拷贝方法：
  1. 使用JSON.parse(JSON.stringify(obj)) ，缺点：当对象有方法和undefined属性的时候会丢失
  2. 使用递归
  - 如果存在循环引用就会出现堆栈溢出
  - 解决思路：把处理好的对象存起来，在处理新的对象的时候，会现在这个存的地方找一找有没有处理好，如果有就直接返回就行了
```
let obj = {
        name: "zs",
        age: 20,
        father: [2, 3, 4],
      };

      function deepClone(target) {
        //这一行如果不用三元判断 如果是数组会有bug会被拷贝成伪数组对象
        let tempObj = Array.isArray(target) ? [] : {};
        for (let key in target) {
          if (typeof target[key] === "object") {
            tempObj[key] = deepClone(target[key]);
          } else {
            tempObj[key] = target[key];
          }
        }
        return tempObj;
      }

      let obj1 = deepClone(obj);
      console.log(obj1);
```
Copier après la connexion
8、slice和splice的区别
- 两者都是数组删除的方法
1.splice改变原数组，slice不改变原数组。
2.slice会返回一个新的数组，可以用于截取数组
3.splice除了可以删除之外，还可以替换，添加数组
4.splice可传入3个参数，slice接受2个参数

9、substr和substring的区别
- 两者的作用都是截取字符串的
- substr是从起始索引号开始提取指定长度的字符串
- substring是提取字符串中两个指定索引号之间的字符
10、let const var区别

let和const都是用来声明变量的，在ES5中我们可以使用var来进行变量声明 -使用let和const作用
- 防止for循环中变量提升的经典场景
- 不污染全局变量

var关键字声明变量

1.var关键字声明变量存在，变量提升的问题；
2.var声明的变量不存在块级作用域，如果是全局变量在任何地方都可以调用；
3.var声明变量如果名称重复了，后面声明的会将前面声明的覆盖掉；

let关键子声明变量

1.不存在变量提升，let声明变量不存在变量提升的问题：如果在let声明变量前调用该变量就会报错（提示初始化前无法访问该变量）；
2.块级作用域，let声明变量存在块级作用域（全局、函数、eval严格模式），只在当前的代码块中生效，如果在当前代码块以外调用就会报错（当前的变量没有定义）；
3.不影响作用域链的操作
4.不允许变量重复声明，let声明的变量是不允许重复声明的，如果同一个名称被重复声明了就会报错（当前的标识已经被声明了）；

const声明变量

1.const声明的变量也具有：不存在变量提升、块级作用域、不允许重复声明的特点；
2.const声明的变量都是常量（不允许改变的量），一旦声明就不允许被修改，如果修改就会报错--常数变量赋值
3.一般第三方的框架中会大量使用const声明变量，这样可以避免用户修改框架中的变量；
4.const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址

Object.prototype.toString.call. (valeur de données à détecter)
Pourquoi avez-vous besoin d'emprunter Object.prototype.toString Parce que votre toString a été réécrit par votre propre prototype et que vous ne pouvez pas obtenir quelque chose comme [object Object]
- 6. Comment détecter qu'une donnée est un tableau
```
function debounce(func, delay) {
        let timer = null // 计时器
        return function (...args) {
          clearTimeout(timer) // 清除上一次计时器
          timer = setTimeout(() => {
            // 重新定时
            func.apply(this, args)
          }, delay)
        }
      }
```
  Copier après la connexion
  Copier après la connexion
Méthode de copie profonde :
1. Utilisez JSON.parse(JSON.stringify(obj)). : Lorsque l'objet a des méthodes et des attributs non définis, ils seront perdus
2. Utilisez Récursion
```
function throtte(func, time) {
        let timer = null // 计时器
        return function (...args) {
          if (timer) return // 无视，直接返回
          timer = setTimeout(() => {
            func.apply(this, args)
          }, time)
        }
      }
```
Copier après la connexion
Copier après la connexion
🎜8, slice et splice La différence🎜🎜

设计模式

本人技术栈是主要是前端vue的，所以对这方面的知识还是有所欠缺的，尽量说的明白一点，其实我也不是很懂，大致明白，如果想要全面理解透还是需要很多技术储备的，很明显我不是的哈哈?

1、观察者模式

观察者模式即一个对象被多个对象所依赖，当被依赖的对象发生更新时，会自动通知所有依赖的对象

观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新
比喻：
宝宝 -> 父母爷爷奶奶一对多的依赖关系
宝宝哭 -> 父母爷爷奶奶赶紧过来服务当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新
模式特点：有二个主体 一个是被观察者 Dep 一个是观察者 watcher，在vue中v-band就是采用这种模式理念，缺点是耦合性太高

2、发布订阅模式

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。

在现在的发布订阅模式中，称为发布者的消息发送者不会将消息直接发送给订阅者，这意味着发布者和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件，称为调度中心或事件通道(event bus)，它维持着发布者和订阅者之间的联系，过滤所有发布者传入的消息并相应地分发它们给订阅者
模式特点：有三个主体 发布者调度中心订阅者，在vue中eventBus体现出来了这种模式理念，可以实现解耦

3、两者模式区别

主体数量不一样，观察者模式有二个主体分别是被观察者 Dep 和观察者 watcher2. Un certain temps s'est écoulé. À un moment donné (incertain), il y avait une autre page avec une img dessus, et le src était également logo.png. J'ai vérifié s'il y avait des ressources mises en cache localement. Si je trouvais qu'il y en avait, je l'ai revu expire , catch-control (s'il y en a une, la priorité est de voir cache-control), s'il n'a pas expiré, utilisez-le simplement (c'est un cache fort) mais j'ai trouvé que s'il expire, il commence à entrer dans la phase de négociation du cache, et envoie une requête au serveur pour changer if-modified-since (la valeur est last-modified)/if-none -match(etag) code> transmet la requête et le serveur commence à comparer pour voir si les ressources du serveur sont plus récentes que les ressources locales. Si les ressources du serveur sont encore anciennes, un code d'état de 304 est renvoyé. 304, continuez à utiliser les ressources locales hors ligne. Si les ressources du serveur ont des ressources mises à jour, le code d'état est 200 et le serveur doit transmettre un nouveau logo.png au navigateur, et le processus doit être terminé à nouveau

Modèle de conception

Ma pile technologique est principalement Vue front-end, donc je manque encore de connaissances dans ce domaine, je vais essayer de l'expliquer clairement. Je ne le comprends pas très bien. Je le comprends à peu près, si vous voulez bien le comprendre, il vous faut encore beaucoup de réserves techniques. Évidemment, je ne le suis pas, haha ?🎜

🎜1. Mode observateur🎜

🎜Le mode observateur est Un objet dépend de plusieurs objets. Lorsque l'objet dépendant est mis à jour, tous les objets dépendants seront automatiquement notifiés🎜🎜🎜🎜Le modèle d'observateur définit un -de nombreuses relations de dépendance entre les objets. Lorsqu'un objet change d'état, tous les objets qui en dépendent seront notifiés et automatiquement mis à jour 🎜Métaphore : 🎜Bébé-> > Parents, grands-parents viennent rapidement pour ne faire qu'un. Lorsque l'état d'un objet change, tous les objets qui en dépendent seront notifiés et automatiquement mis à jour🎜🎜🎜🎜Fonctionnalités du mode : Il existe deux sujets et l'un est l'observateur Dep code> L'un est l'observateur watcher En vue, v-band adopte ce concept de modèle. L'inconvénient est que. le couplage est trop élevé🎜🎜🎜

🎜2. Modèle de publication-abonnement🎜

🎜Le modèle de publication-abonnement est en fait une relation de dépendance un-à-plusieurs entre les objets. . Lorsque l'état d'un objet change, tous les objets qui en dépendent seront informés des changements d'état. 🎜🎜🎜🎜Dans le modèle de publication-abonnement actuel, l'expéditeur du message appelé éditeur n'envoie pas de messages directement aux abonnés, ce qui signifie que les éditeurs et les abonnés ne connaissent pas l'existence les uns des autres. Il existe un troisième composant entre l'éditeur et l'abonné, appelé centre de répartition ou bus d'événements, qui maintient la connexion entre l'éditeur et l'abonné, filtre tous les messages entrants de l'éditeur et répond en conséquence. Distribuez-les aux abonnés 🎜🎜🎜🎜 Fonctionnalités du modèle : il y a trois sujets abonnés au centre de répartition des éditeurs, et eventBus dans vue incarne ce concept de modèle, qui peut réaliser le découplage🎜🎜🎜