Cadeia de protótipo de protótipo de objeto JavaScript


对象的创建方法

  1. var obj = {} objeto plainObject literal / objeto direto
  2. Construtor
    1. O construtor embutido do sistema new Object()
    2. Função personalizada new FunctionName()

As funções personalizadas são nomeadas com uma grande caixa de camelo (todas as primeiras letras são maiúsculas)

构造函数内部原理

  1. Adicione implicitamente este = () à frente do corpo da função
  2. Execute this.xxx = xxx;
  3. Implícito retornar este

Também pode passar parâmetros

    function Car(number){
    
    
        // this = {};
        this.date = 2020;
        this.number = number;

        //return this;
    }

    new car1 = new Car(1);

包装类

  • novo número()
  • new String ()
  • novo booleano ()

O tipo original não tem atributos e métodos
e, na verdade, torna-se automaticamente uma classe de wrapper quando chamado

    //包装类
    var a = 1;

    a.abc = 2;
    // 不忍心报错  自动执行 
    // new Number(1).len = 2;  delete  执行完又删除了

    
    console.log(a.len); // undefined
    // 发现访问属性又自动创建 new Number(4).len  是空的 

A string tem a propriedade .length e o
processo é igual ao anterior

    var str = 'abcd';

    str.length = 2;
    // nwe String('abcd').length = 2;  delete
    
    console.log(str);  // 4
    // new String('abcd').length  本身这个属性是存在的

ps. Du Yi exercícios de "Objeto, Embalagem (Parte 2)" na segunda metade

原型

.prototype - O protótipo é um ancestral


    Person.prototype.name= 'hello';
    function Person{
    
    

    }
    var a = new Person();
    console.log(a.name);   // 输出 hello 继承自原型

O protótipo também é um objeto que pode ser escrito assim

    Person.prototype = {
    
    
        name : 'hello'
    }
    ...
    方别写很多

Mas há uma pequena diferença mencionada mais tarde

定义

O protótipo é um atributo do objeto de função, que define o ancestral comum
do objeto produzido pelo construtor. O objeto produzido pelo construtor pode herdar as propriedades e métodos do
protótipo. O protótipo também é um objeto.

功能

Reduza a duplicação de código e
coloque peças comuns no protótipo

修改原型

Adicionar, excluir, modificar e verificar
só pode operar diretamente as operações de protótipo

Não pode ser operado por elementos filho

    function Father(){
    
    
        this.num = 1;
    }
    var father = new Father();

    Son.prototype = father;
    function Son(){
    
    
        
    }
    var son = new Son();

    son.num = 2;  
    //son.num ++;   同

    console.log(father.num);  // 1

É equivalente a adicionar um novo atributo num ao filho. O atributo no
pai não foi modificado ou modificado (erro),
mas isso pode ser feito

    function Father(){
    
    
        this.num = 1;
        this.say = {
    
    
            name : 'niko'
        }
    }
    var father = new Father();

    Son.prototype = father;
    function Son(){
    
    
        
    }
    var son = new Son();

    son.say.name = 'dio';   // 二次调用 .name


    console.log(son.say.name);  // dio

A modificação bem-sucedida só pode modificar os atributos no método, o que é equivalente a uma segunda chamada

constructor

O protótipo do sistema possui um atributo construtor e
retorna um construtor,
mas pode ser alterado manualmente

    

_proto_

_proto_Aponte para o protótipo,
conecte o protótipo e o
subobjeto , encontre o atributo em _proto_ após encontrar o atributo

_proto_O protótipo armazenado por padrão,
mas pode ser modificado

A diferença entre as duas escritas

Faça a diferença na segunda modificação

    Person.prototype.name = 'hello';

    function Person(){
    
    
        // 系统自动执行 var this = {_proto_ : Person.prototype}
    }

    var person = new Person();

//两种修改方式
// 1.   Person.prototype.name = 'wow';
// 2.   Person.prototype = {
    
    
//       name : 'wow'
//    }
  1. A modificação bem-sucedida é equivalente a alterar diretamente os dados no espaço

  2. Person.prototype.name ainda é
    a onda do Olá. Essa onda é para criar um novo espaço. Observe que o comentário no construtor se refere à direção de _proto_ para
    facilitar o entendimento:

    var obj = {
    
    name : 'a'};
    var obj1 = obj ;
    obj = {
    
    name : 'b'};   //  obj1 指向的还是a

    Person.prototype = {
    
    name : 'a'};
    _proto_ = Person.prototype;
    Person.prototype = {
    
    name : 'b'};

Espaço alterado

1 Mude a propriedade na sala
2 Mude a sala diretamente

Observe o pedido agora mesmo! !

    Person.prototype.name = 'hello';

    function Person(){
    
    
        // 系统自动执行 var this = {_proto_ : Person.prototype}
    }

    Person.prototype = {
    
    
       name : 'wow'
    }

    var person = new Person();

Agora modifique com sucesso o novo na parte de trás

Cadeia de protótipo

Não preciso falar mais sobre a composição da cadeia de protótipos.

Adicionar, excluir, modificar

Igual ao protótipo acima

este pouco conhecimento

    Son.prototype = {
    
    
        name : 'niko',
        sayName : function (){
    
    
            console.log(this.name);
        }  
    }

    function Son () {
    
    
        this.name = 'dio';
    }

    var son = new Son();   // dio

isso aponta para a pessoa que chamou o método aqui é a chamada do filho

Object.create (protótipo)

Construção mais conveniente

    var obj = {
    
    name : 'sunny' , age : 123};
    var obj1 = Object.create(obj);  // obj1 原型就是obj  可以使用name和age

    等同于
    
    Obj.prototype.name = 'sunny';
    function Obj() {
    
    

    }
    var obj1 = new Obj();
    //var obj1 = Object.creat(Obj.prototype);  和上面相等  构造函数是空的就一样

O mais terminal da maioria dos objetos é Object.prototype

O terminal de cadeia de protótipo Object.prototype
tem métodos como toString (a classe wrapper também tem seu próprio toString)

Observe que, na maioria dos casos, existem casos especiais. O
protótipo pode ser nulo quando construído com Object.creat ()

    var obj = Object.creat(null);

Não há nenhuma propriedade no método Object.prototype
definido como nulo após adicionar pessoas _proto_não podem usar
(dúvida na hora de dormir) _proto_e .prototype

toString reescrever

123.toStringO ponto de erro é reconhecido como um número de ponto flutuante e atribuído à variável
. O toString de 123 é chamado com a ajuda de um valor intermediário . É o próprio método de Number em vez de Object.

    var num = 123;
    num.toString();   --> // new Number(num).toString();
    
    Number.prototype.toString = function(){
    
    }   --> 有自己的toString
    Number.prototype._proto_=Object.prototype

Esta situação é chamada de 方法重写: O método com o mesmo nome implementa funções diferentes z
é abordado no front end da cadeia de protótipo

ToSting (); método é chamado quando document.write (xx); é chamado

Precisão fora do tópico

O intervalo que js pode calcular normalmente é de 16 dígitos antes do ponto decimal e 16 dígitos depois do ponto decimal

ligar / aplicar

Função Alterar o ponto this O
objetivo é alterar o this na função de execução para o objeto passado, a
diferença é que a lista de parâmetros é diferente.

    var name = "1";
    var obj = {
    
    
        name:2,
        prop: {
    
    
            name:3,
            getName: function() {
    
    
                return this.name;
            }
        }
    }
    console.log(obj.prop.getName()); //3
    console.log(obj.prop.getName.call(obj)); //2
    console.log(obj.prop.getName.call(this)); //1  在全局的this 是window

Se você deseja obter 3 diretamente obj.prop.getName (), o objeto atual deste método é prop

Se quisermos obter 2, podemos obj.prop.getName.call (obj) é passar o objeto obj para o método, desta vez este objeto é obj, this.name é equivalente a obj.name

1 é o mesmo que obj.prop.getName.call (this), onde esta é a página atual e a janela é a mesma

Claro, você também pode usar apply.A diferença entre apply e call é call, ou seja, o método call aceita uma lista de vários parâmetros, enquanto o método apply aceita uma matriz contendo vários parâmetros. apply (thisargs, []) usa uma matriz para passar parâmetros para o método, call (this, param1, param2); um pequeno exemplo abaixo

    function callTest(name, price) {
    
    
        console.info(name + "-" + price);
    }
    callTest.call(this, 'superbing', 100);
 
    callTest.apply(this, ['superbing', 200]);

Exemplo prático

借用别人的函数实现自己的功能

    function Person(name,age,sex){
    
    
        this.name = name;
        this.age = age;
        this.sex = sex;   // Person的this
    }

    function Student(name,age,sex,tel,grade){
    
    
        // var this ={}   等待赋值
        Person.call(this,name,age,sex);
        this.tel = tel;
        this.grade = grade;
    }

    var student = new Student('sunny',123,'male',139,2017);

Passe o objeto Aluno a Pessoa para que em Pessoa se refira realmente à variável em Aluno, que
equivale a levar as três sentenças de Pessoa a Aluno. É
abreviado quando a estrutura dos outros está completamente alinhada com você.

protótipo e proto

Isso é bom

Acho que você gosta

Origin blog.csdn.net/S_aitama/article/details/107393260
Recomendado
Clasificación