Falando sobre o protótipo e a cadeia de protótipos em JS

1. Protótipo e função

Como todos sabemos, JS não tem o conceito de classes.Embora ES6 tenha começado a ter o conceito de classes, isso não significa que JS tenha um novo modelo de herança como Java e outras linguagens orientadas a objetos baseadas em classes. As aulas no ES6 são apenas um açúcar sintático com base na herança do protótipo existente.

Alguns pontos-chave

• As funções possuem prototypeatributos, apontando para seu objeto protótipo. Também pode ser dito: todo construtor tem umprototype原型对象
• O objeto Prototype tem um constructoratributo para o seu construtor
• A função pode criar objetos usando o novo operador, o objeto __proto__aponta para o objeto de protótipo de função
• Cada objeto tem uma __proto__propriedade e aponta para seu objeto protótipo de protótipo
• As funções também podem ser vistas como um objeto , ele __proto__aponta para Funtion.prototype
  

---

Observe o objeto e a função

// 结果都是 "function"
typeof Function
typeof Object
typeof Array

Portanto, agora sabemos que essas são funções fornecidas pelo próprio JS, e uma função também é um objeto, então ela terá:

• prototype Atributos
• __proto__ Atributos

No objeto de protótipo:

• constructor Atributos
• __proto__ Atributos

Agora analisamos essas duas propriedades em Object, Function e seus objetos de protótipo

A imagem desenhada por você
é verificada no navegador

> Function.__proto__ === Function.prototype
< true
> Function.prototype.constructor === Function
< true
> Function.prototype.__proto__ === Object.prototype
< true
> Object.__proto__ === Function.prototype
< true
> Object.prototype.constructor === Object
< true
> Object.prototype.__proto__ === null
< true

Nos podemos concluir que:

• Todas as funções __proto__estão apontando Function.prototype
• Protótipo de objeto __proto__apontando Object.prototype
• Object.prototype.__proto__ Aponte para nulo

Quando definimos uma função, o protótipo do objeto "função" __proto__aponta paraFunction.prototype

function func() {
    
    }

func.__proto__ === Function.prototype // true

---

Em seguida, examinamos mais detalhadamente Object, Function e Array

function fun1() {
    
    }
const obj = {
    
    }
const arr = []

• fun1, obj e arr podem ser considerados como instâncias de new, eles apontam para Function.prototype, Object.prototype e Array.prototype respectivamente.
• O __proto__ de Function.prototype e Array.prototype apontam para Object.prototype.

---

2. Fale sobre o atributo __proto__

Para funções: o protótipo __proto__ do objeto "função" aponta para Function.prototype

Para objetos: cada objeto tem um atributo __proto__ e aponta para seu objeto protótipo

---

Agora passamos a função new an object

function Person() {
    
    }
const p1 = new Person()

A estrutura atual é mostrada na figura:

---

Qual é o uso de protótipo e __proto__?

O __proto__ do objeto instância aponta para o protótipo do construtor, obtendo assim a herança.

O objeto de protótipo é equivalente a um recipiente público que todos os objetos de instância de um tipo específico podem acessar

---

3. Cadeia de protótipo

Ao tentar acessar as propriedades de um objeto, ele não apenas pesquisa o objeto, mas também o protótipo do objeto e o protótipo do objeto, pesquisando para cima sucessivamente até encontrar uma propriedade com um nome correspondente ou chegar ao protótipo O fim da cadeia.

Exemplo: procurando pelo método valueOf ()

var arr = [1,2,3]

arr.valueOf()  //  [1, 2, 3]

A cadeia de protótipo é a seguinte:
arr -> Array.prototype -> Object.prototype -> null

Esta é a lendária cadeia de protótipos, procure camada por camada e retorne indefinida antes do final

4. instância do operador

instância de princípio

A lógica de julgamento de instanceof é: procure a cadeia de protótipo, camada por camada, do __proto__ atualmente referenciado, você pode encontrar o protótipo correspondente. Retorna verdadeiro se encontrado.

Implementação simples

const instanceOf = (A, B) => {
    
    
  let p = A;
  // 遍历链表
  while (p) {
    
    
    if (p === B.prototype) {
    
    
      return true;
    }
    p = p.__proto__;
  }
  return false;
};

instanceOf(Function, Object); // true

Artigo de referência: Zhihu-talk sobre protótipo, cadeia de protótipo e herança de protótipo