Prefácio
Como desenvolvedor front-end, ao falar sobre como criar um objeto, você só pensa em criar objetos usando métodos literais comuns? Você já pensou sobre o processo de criação de objetos com new Object ()? Este artigo analisa alguns exemplos comuns método de objeto de criações.
texto
Os métodos de criação de objetos são resumidos da seguinte forma:
(1) O caminho do objeto literal;
var Person = {}; // equivalente a var Person = new Object (); var Person = { nome: "Nike" , idade: 29 , };
Literal de objeto é uma forma de escrita simples de definição de objeto, que visa simplificar o processo de criação de objetos que contêm um grande número de atributos.
(2) Modelo de fábrica;
Padrão de fábrica, um dos padrões de design comuns, o processo de criação de um objeto não precisa expor a lógica específica de criação de um objeto como o cliente, mas por meio de uma interface comum para apontar para um novo objeto comum, em outras palavras, usa uma função para encapsular a criação dos detalhes do objeto, de modo a atingir o propósito de reutilização da função chamando a função, a desvantagem desse método é que o tipo do objeto não pode ser identificado, e a conexão entre o objeto e o tipo não pode ser estabelecido. Os exemplos são os seguintes:
função pessoa (nome, idade) { var o = new Object (); o.name = nome; o.age = idade; o.sayHello = function () { console.log ( "hello" ); }; return o; } Var per = new Pessoa ( "xiaoming", 20 ) console.log (per.name) // xiaoming console.log (per.sayHello ()) // Olá
(3) Modo construtor;
Cada função em JavaScript pode ser usada como um construtor. Contanto que seja um objeto criado pelo novo operador, chamamos essa função de construtor. Este modo não precisa criar explicitamente um objeto, mas atribui atributos e métodos diretamente a este , não há instrução de retorno, observe que as especificações comuns precisam colocar a primeira letra do nome da função do construtor em maiúscula. Os exemplos são os seguintes:
função Pessoa (nome, idade) { este .nome = nome; esta . idade = idade; this .sayHello = function () { console.log ( this .name); }; } var pessoa = nova pessoa ("xiaoming", 18 ); person.sayHello (); // xiaoming person.constructor == Pessoa; // verdadeira pessoa instanceof Object; // verdadeira pessoa instanceof Person; //true Peron ("xiaohong", 18); // Use como uma função normal window.sayHello (); // xiaohong
(4) Modo de protótipo;
Como cada função tem uma propriedade de protótipo, este valor de propriedade é um objeto, este objeto contém propriedades e métodos que podem ser compartilhados por todas as instâncias criadas pelo construtor, para que possamos usar o objeto de protótipo para adicionar propriedades e métodos públicos, portanto, Realize o código reuso. Comparado com o construtor, este modo resolve o problema de reutilização de objetos de função na instância construída, mas este modo também tem alguns problemas. Em primeiro lugar, não há como inicializar as propriedades da instância passando parâmetros. Além disso , se for uma referência ao valor do tipo de dados, todas as instâncias compartilharão um objeto e as alterações feitas por uma instância no valor do tipo de dados de referência afetarão as referências de outras instâncias ao tipo. Os exemplos são os seguintes:
função Person () {} Person.prototype.name = 'xioming' Person.prototype.sayHello = função () { console.log ( este .name) } var person = new Pessoa () person.sayHello () // Xiaoming consola .log (Person.prototype.isPrototypeOf (pessoa)) // verdadeiro porque há um ponteiro para Person.prototype dentro do objeto pessoa, ou seja, o protótipo de pessoa aponta para Person
(5) Modo de combinação de construtor e protótipo;
Combinar o modo de construtor e o modo de protótipo é a maneira mais comum de criar um objeto personalizado.O construtor é usado para criar as propriedades da instância e o modo de protótipo é usado para criar propriedades e métodos compartilhados.
função Pessoa (nome, idade) { este .nome = nome; esta . idade = idade; } Person.prototype = { construtor: Person, sayName: function () { console.log ( this .name); }, }; var p = nova pessoa ("xiaozhang", 123 ); console.log (p.sayName ()); // xiaozhang
Usando os dois métodos em combinação, embora as vantagens dos dois modos sejam combinadas, o problema é que o código é mal encapsulado.
(6) Modo de protótipo dinâmico;
O modo de protótipo dinâmico é mover o processo de criação da atribuição do método de protótipo para o interior do construtor. Ao avaliar se o atributo existe, o efeito de atribuir o objeto de protótipo apenas uma vez quando a função é chamada pode ser realizado. muito bom para o anterior O modo de combinação é encapsulado.
função Pessoa (nome, idade) { este .nome = nome; esta . idade = idade; if ( typeof this .sayHello! = "function" ) { Person.prototype.sayHello = function () { console.log ( "hello" ); }; } }
Ele é realizado por julgamento, e o objeto de protótipo é atribuído quando a função é chamada.Somente quando a função sayHello não existir, o método será colocado de volta no protótipo, e a primeira tentativa de chamar o construtor será executada.
(7) Modo de construtor parasita;
O método de exemplo é o seguinte: suponha que precisamos criar uma matriz especial com métodos adicionais:
function SpecialArray() { var arr = new Array(); //添加值 arr.push.apply(arr, arguments); //添加方法 arr.toPipedString = function () { return this.join("|"); }; return arr; } var color = new SpecialArray( "red", "blue" ); console.log(color.toPipedString()); //red|blue
在这个函数内部，首先创建了一个数组，然后push()方法（用构造函数接收到的所有参数）初始化了数组的值。随后，又给数组实例添加了一个toPipedString()方法，该方法返回以竖线分割的数组值。最后，将数组以函数值的形式返回。接着，我们调用了SpecialArray构造函数，向其中传入了用于初始化数组的值，此后调用了toPipedString()方法。但似乎返回的对象与构造函数或构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与在构造函数外部创建 对象没有什么不同。为此，不能依赖instranceof操作符来确定对象类型。
总结
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
