Explicação detalhada do protótipo JavaScript e dos pontos de conhecimento da cadeia de protótipos

1. Protótipo

1. Conceito

Em JavaScript, uma função é um objeto do tipo Function que contém propriedades e métodos. O protótipo (Prototype) é um atributo do objeto do tipo Function .

O atributo prototype é incluído quando a função é definida e seu valor inicial é um objeto vazio. Não existe um tipo de protótipo definido para funções em JavaScript, portanto o protótipo pode ser de qualquer tipo.

O protótipo é usado para salvar as propriedades e métodos compartilhados do objeto . As propriedades e métodos do protótipo não afetam as propriedades e métodos da função em si.

// Propriedades do tipo de função -> propriedades que todas as funções possuem console.log(Function.prototype);

//Definir função function fn() {
    console.log('esta é a função');
}

//O valor padrão do protótipo é o objeto vazio console.log(fn.prototype); //fn {};

// A função contém um construtor --> todos os tipos de referência são na verdade construtores console.log(Number.prototype);

console.log(Object.prototype);//{}

2. Obtenha o protótipo

Você pode obter o protótipo do objeto das duas maneiras a seguir para definir propriedades e métodos compartilhados:

• por meio prototype do construtor
• e por meio getPrototype do método Object objeto (obj).

função fn() {
    console.log('esta é a função');
}

//Use a estrutura de sintaxe de atributos do objeto de acesso console.log(fn.prototype); //fn {};
console.log(fn['protótipo']);//fn {}

//O tipo de objeto fornece o método getPrototypeOf() console.log(Object.getPrototypeOf(fn));

3. Compreender o atributo construtor no protótipo da função

Object.getOwnPropertyDescriptors() é usado para obter os descritores de todas as suas próprias propriedades de um objeto.

var resultado = Object.getOwnPropertyDescriptor(Object.prototype,'construtor');
console.log(result) //Os resultados de saída são os seguintes:
//{
// valor: [Função: Objeto],
// gravável: verdadeiro,
// enumerável: falso,
// configurável: verdadeiro
// }

constructor是在创建函数的时候自动添加的，指向构造函数本身

4. Configurando as propriedades e métodos no protótipo

Você pode definir as propriedades e métodos do protótipo das duas maneiras a seguir:

• As propriedades e métodos de o protótipo é definido separadamente.

Constructor.prototype.Attribute name = valor do atributo; Constructor.prototype.Method name = function(){}

• ;

Quando precisamos adicionar muitos atributos ao protótipo, é muito problemático escrever构造函数.prototype.属性名repetidamente. Podemos modificar diretamente o prototype inteiro

constructor.prototype = {.
    Nome do atributo: valor do atributo,
    Nome do método: function(){}}

function foo () {}foo.prototype = {
    construtor: foo,
    nome: 'geléia',
    idade: 18,
    address: 'Beijing'}var fn = new foo()console.log(fn.address) //Pequim

5.isPrototypeOf() método

Cada objeto terá um método isPrototypeOf() , que é usado para determinar se o objeto é um protótipo de outro objeto.

O código de exemplo é o seguinte:
// Define o objeto através do inicializador var obj = {
    nome: 'jam'
}
//Define a função construtora Hero() {}
// Atribui o objeto obj ao protótipo do construtor Hero Hero.prototype = obj;
// Cria o objeto através do construtor var hero = new Hero();

// O método isPrototypeOf() determina se o objeto especificado é o protótipo de outro objeto var result = obj.isPrototypeOf(hero);
console.log(resultado);//true

verifica se obj é o protótipo hero

2. Cadeia de protótipos

1. Compreensão da cadeia de protótipos

Em seguida, usamos um trecho de código para expandir nossa compreensão da cadeia de protótipos:

Cenário : Encontre os objetos no objeto obj Etapas executadas pelo atributo de endereço js:
    1. A operação get será acionada 2. Pesquise o atributo no objeto atual 3. Se não for encontrado, ele irá pesquisar no objeto da cadeia de protótipos (__proto__) neste momento. Se não for encontrado, ele continuará pesquisando ao longo da cadeia de protótipos até que o protótipo de nível superior seja encontrado (o que é o protótipo de nível superior não está temporariamente claro).

1.1 O código de exemplo é o seguinte:

var obj = {.
    nome: 'geléia',
    idade: 19
}
/* 
    Requisito: Encontre o atributo de endereço no objeto obj*/

// A cadeia de protótipos é pesquisada camada por camada. Se não for encontrada, será pesquisada até que o protótipo de nível superior seja encontrado.
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
    endereço: 'Pequim'
}

console.log(obj.address) // Pequim console.log(obj.__proto__.__proto__.__proto__) // { endereço: 'Pequim' }

1.2 Mapa de memória

Finalmente encontre o atributo de endereço
那么这里有一个问题，如果一直没有查到，会无穷尽的去查找吗？接下来我们就来了解一下

2. Qual é o protótipo de nível superior?

Como mencionamos acima, não pesquisaremos indefinidamente ao longo da cadeia de protótipos. Quando o protótipo de nível superior for encontrado, undefined será retornado se ainda não tiver sido encontrado.

Então, qual é o protótipo de nível superior?
O código de exemplo é o seguinte:

var obj = { name: 'jam' }console.log(obj.__proto__) // {}console.log(obj.__proto__.__proto__) //

O protótipo do objeto literal nulo obj é: {} . {} é o protótipo de nível superior. Quando continuamos a imprimir __proto__ para cima, um valor nulo é retornado, o que prova que a camada anterior já é o protótipo de nível superior

. está faltando no primeiro trecho de código:

顶层原型就是Object.prototype

3. Protótipo do objeto (Object.prototype)

3.1 Então, onde está o fim da cadeia de protótipos? Por exemplo, o terceiro objeto também possui um atributo protótipo __proto__ ?

var obj = {nome:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__) // {}

Descobrimos que o resultado impresso acima é空对象{}

• Na verdade, esse protótipo é nosso protótipo de nível superior

  var obj = {
    nome: 'geléia',
    idade: 19
    }
    console.log(obj.__proto__) // {}
    console.log(Object.prototype) // {}
    console.log(obj.__proto__ === Object.prototype) // true

  Object é a classe pai de todas as classes, então obj.__proto__ é na verdade Object.prototype,
  console.log(obj.__proto__ === Object.prototype) // true podemos ver que o resultado Object.prototype é o protótipo de nível superior.

• Os protótipos de objetos criados diretamente de Object são {}

3.2 Então podemos perguntar. : {} Há algo especial sobre protótipos?

• Ponto especial 1: O objeto possui um atributo protótipo, mas seu atributo protótipo já aponta para nulo, ou seja, é o protótipo de nível superior

  console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null

• ponto especial 2: Existem muitas propriedades e métodos padrão neste objeto,
  • embora o resultado da impressão de Object.prototype seja um objeto vazio {}, ele não está vazio, mas as propriedades internas não são constructor . propriedade para ver

    <!-- Pode-se ver que existe um atributo construtor e não está vazio -->console.log(Object.prototype.constructor) // [Function: Object] <!-- construtor refere-se a Object -->

  • us Você também pode obter os descritores de todas as suas próprias propriedades em Object.prototype através do método Object.getOwnPropertyDescriptors() .

    console.log(Object.getOwnPropertyDescriptors(Object.prototype)) //Conforme mostrado na longa captura de tela abaixo

    

4. Gráfico de memória de relacionamento da cadeia de protótipo