Prefacio
Como desarrollador de front-end, cuando habla de cómo crear un objeto, ¿solo piensa en crear objetos usando métodos literales comunes? ¿Alguna vez ha pensado en el proceso de creación de objetos con un nuevo Object ()? Este artículo clasifica algunos elementos comunes creaciones Método del objeto.
texto
Los métodos para crear objetos se resumen a continuación:
(1) La forma del objeto literal;
var Person = {}; // equivalente a var Person = new Object (); var Person = { nombre: "Nike" , edad: 29 , };
Objeto literal es una forma de escritura simple de definición de objeto, cuyo objetivo es simplificar el proceso de creación de objetos que contienen una gran cantidad de atributos.
(2) Modelo de fábrica;
Patrón de fábrica, uno de los patrones de diseño comunes, el proceso de creación de un objeto no necesita exponer la lógica específica de crear un objeto como el cliente, sino a través de una interfaz común para apuntar a un nuevo objeto común, en otras palabras, utiliza una función para encapsular la creación del objeto Detalles, para lograr el propósito de la reutilización de la función llamando a la función, la desventaja de este método es que el tipo de objeto no se puede identificar y la conexión entre el objeto y el no se puede establecer el tipo. Los ejemplos son los siguientes:
función persona (nombre, edad) { var o = new Object (); o.name = nombre; o.age = edad; o.sayHello = function () { console.log ( "hola" ); }; volver o; } var per = new Person ("xiaoming", 20 ) console.log (per.name) // xiaoming console.log (per.sayHello ()) // hola
(3) modo Constructor;
Cada función en JavaScript se puede usar como un constructor. Siempre que sea un objeto creado por el nuevo operador, llamamos a esta función un constructor. Este modo no necesita crear explícitamente un objeto, sino que asigna directamente atributos y métodos a este , no hay una declaración de retorno, tenga en cuenta que las especificaciones comunes deben escribir en mayúscula la primera letra del nombre de la función del constructor. Los ejemplos son los siguientes:
función Persona (nombre, edad) { este .nombre = nombre; esta .edad = edad; this .sayHello = function () { console.log ( este .nombre); }; } var person = new Person ("xiaoming", 18 ); person.sayHello (); // xiaoming person.constructor == Person; // instancia de persona verdadera de Object; // persona verdadera instancia de Person; //true Peron ("xiaohong", 18); // Usar como una función normal window.sayHello (); // xiaohong
(4) Modo de prototipo;
Debido a que cada función tiene una propiedad de prototipo, este valor de propiedad es un objeto, este objeto contiene propiedades y métodos que pueden ser compartidos por todas las instancias creadas por el constructor, por lo que podemos usar el objeto de prototipo para agregar propiedades y métodos públicos, y así realizar el código. reutilizar. En comparación con el constructor, este modo resuelve el problema de la reutilización de los objetos de función en la instancia construida, pero este modo también tiene ciertos problemas. En primer lugar, no hay forma de inicializar las propiedades de la instancia pasando parámetros. Además , si es una referencia al valor del tipo de datos, todas las instancias compartirán un objeto y los cambios realizados por una instancia al valor del tipo de datos de referencia afectarán las referencias de otras instancias al tipo. Los ejemplos son los siguientes:
function Person () {} Person.prototype.name = 'xioming' Person.prototype.sayHello = function () { console.log ( this .name) } var person = new Person () person.sayHello () // consola xiaoming .log (Person.prototype.isPrototypeOf (person)) // verdadero porque hay un puntero a Person.prototype dentro del objeto person, es decir, el prototipo de person apunta a Person
(5) Modo de combinación de constructor y prototipo;
La combinación del modo constructor y el modo prototipo es la forma más común de crear un objeto personalizado. El constructor se usa para crear las propiedades de la instancia y el modo prototipo se usa para crear propiedades y métodos compartidos.
función Persona (nombre, edad) { este .nombre = nombre; esta .edad = edad; } Person.prototype = { constructor: Person, sayName: function () { console.log ( este .name); }, }; var p = nueva persona ("xiaozhang", 123 ); console.log (p.sayName ()); // xiaozhang
Usando los dos métodos en combinación, aunque se combinan las ventajas de los dos modos, el problema es que el código está mal encapsulado.
(6) Modo de prototipo dinámico;
El modo de prototipo dinámico es mover el proceso de creación de la asignación del método del prototipo al interior del constructor. Al juzgar si el atributo existe, se puede realizar el efecto de asignar el objeto prototipo solo una vez cuando se llama a la función. De esta manera es muy bueno para lo anterior El modo de combinación está encapsulado.
función Persona (nombre, edad) { este .nombre = nombre; esta .edad = edad; if ( typeof this .sayHello! = "function" ) { Person.prototype.sayHello = function () { console.log ( "hola" ); }; } }
Se realiza mediante juicio, y el objeto prototipo se asigna cuando se llama a la función.Sólo cuando la función sayHello no exista, el método se volverá a colocar en el prototipo y se ejecutará el primer intento de llamar al constructor.
(7) Modo constructor parasitario;
El método de ejemplo es el siguiente: supongamos que necesitamos crear una matriz especial con métodos adicionales:
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操作符来确定对象类型。
总结
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
