JavaScript assume o controle de novos

Como começar rapidamente com o VUE3.0: Insira o

prefácio

O que há new ?

O operador new cria uma instância de um tipo de objeto definido pelo usuário ou um dos tipos de objeto integrados que possui um construtor.

Ainda fica um pouco obscuro só de olhar a definição. Vejamos um exemplo específico para entender a função de new em JavaScript .

Por exemplo

// Você não pode perder peso na vida real, mas deve permanecer magro online function Thin_User(nome, idade) {
    este.nome = nome;
    esta.idade = idade;
}

Thin_User.prototype.eatToMuch=função(){
    // Sonhe acordado e deixe lágrimas gordas console.log('como tanto, mas estou muito magro!!!');
}

Thin_User.prototype.isThin = verdadeiro;

const xiaobao = novo Thin_User('zcxiaobao', 18);
console.log(xiaobao.nome); //zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin);
// como muito, mas estou muito magra!!!
xiaobao.eatToMuch();

Através do exemplo acima, podemos descobrir xiaobao pode:

• acessar as propriedades no construtor Thin_User
• acessar as propriedades em Thin_User.prototype

e descrevê-lo de forma mais direta, new faz o seguinte:

• cria um objeto vazio, O __proto__->Thin_User.prototype do objeto
• executa o construtor e this para o novo objeto
• para retornar o novo objeto.

Instruções complementares:

Como new é uma palavra-chave, não podemos substituí-la como o método de simulação de matrizes de alta ordem, então escrevemos. uma função createObject para simular new efeito. O uso é o seguinte:

function Thin_User(nome, idade) {}

const u1 = novo Thin_user(...)
const u2 = createObject(Thin_User, ...a)

Simulação preliminar

De acordo com a análise acima, as etapas gerais para escrever createObject são:

• Criar um novo objeto obj
• e definir obj.__proto__->constructor.prototype ( mas JavaScript não recomenda modificando diretamente os atributos __proto__, o método setPrototypeOf é fornecido para modificar especificamente o protótipo ).
• Use constructor.call/apply(obj, ...) para adicionar atributos a obj e
• retornar obj

__proto__和prototype . Você pode ver JavaScript para uma compreensão completa de

protótipos e cadeias de protótipos.
call/apply , você pode ver o tutorial JavaScript on call e apply.

Depois de aprender isso, podemos escrever a primeira versão do código:

function createObject(Con) {.
    //Cria um novo objeto obj
    // var obj = {} também pode ser var obj = Object.create(null);

    // Converte obj.__proto__ -> protótipo construtor // (não recomendado) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Executa o construtor Con.apply(obj, [].slice.call(arguments, 1));

    // Retorna um novo objeto return obj;}

Efeito do valor de retorno

Como todos sabemos, funções possuem valores de retorno, então se o construtor possui um valor de retorno, qual é o resultado retornado após a execução final de new ?

O valor de retorno é um tipo básico.

Supondo que o valor de retorno do construtor seja um tipo básico, vamos dar uma olhada no resultado final do retorno:

function Thin_User(name, age) {
    este.nome = nome;
    esta.idade = idade;
    retorne 'vou manter-me magro para sempre';
}

Thin_User.prototype.eatToMuch=função(){
    console.log('como muito, mas estou muito magro!!!');
}

Thin_User.prototype.isThin = verdadeiro;

const xiaobao = novo Thin_User('zcxiaobao', 18);
console.log(xiaobao.nome); //zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin);
// como muito, mas estou muito magra!!!
xiaobao.eatToMuch();

O resultado final do retorno parece estar sujeito a alguma interferência.

Não se preocupe, vamos continuar testando a situação em que o valor de retorno é um objeto.

O valor de retorno é o objeto

function Thin_User(name, age) {
    este.nome = nome;
    esta.idade = idade;
    retornar {
        nome: nome,
        idade: idade * 10,
        gordura: verdade
    }
}

Thin_User.prototype.eatToMuch=função(){
    // Sonhe acordado e deixe lágrimas gordas console.log('como tanto, mas estou muito magro!!!');
}

Thin_User.prototype.isThin = verdadeiro;

const xiaobao = novo Thin_User('zcxiaobao', 18);
// Erro: xiaobao.eatToMuch não é uma função
xiaobao.eatToMuch();

Quando executei eatToMuch , o console relatou um erro diretamente e não havia função atual, então imprimi o objeto xiaobao :

Verificou-se que age do objeto xiaobao mudou e fat foi adicionado, que é exatamente igual ao valor de retorno do construtor.

Depois de ler esses dois exemplos, você pode basicamente esclarecer a situação quando o construtor retorna um valor: quando o construtor retorna um objeto, o objeto é retornado diretamente.

de simulação final

createObject(Con) {
    //Cria um novo objeto obj
    // var obj = {} também pode ser var obj = Object.create(null);

    // Converte obj.__proto__ -> protótipo construtor // (não recomendado) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Executa o construtor e aceita o valor de retorno do construtor const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // Se o valor de retorno do construtor for um objeto, retorne o objeto diretamente // Caso contrário, retorne obj
    retornar typeof(ret) === 'objeto' ? ret: obj;}