This article is the second article about objects written in Chapter 8 of the JS Red Book. Several modes for creating objects: Factory pattern:Factory means function. The core of the factory pattern is to define a function that returns a new object. function getObj(name, age) { let obj = {} obj.name = name obj.age = age return obj } let person1 = getObj("cc", 31) Disadvantage: Don’t know what type the newly created object is Constructor pattern: Get an object instance through a constructor. function CreateObj(name, age) { this.name = name this.age = age } let person1 = new CreateObj("cc", 31) console.log(person1) console.log(person1.constructor === CreateObj); // true console.log(person1 instanceof CreateObj); // true Two questions about constructors: 1. The only difference between a constructor and an ordinary function is the calling method. The constructor must use the new keyword. If new is not used, attributes are added to the Global object. In the following example, the CreateObj method adds the name and age attributes to the window object. function CreateObj(name, age) { this.name = name this.age = age } CreateObj('cc', 10) console.log(window.name) // 'cc' 2. Problems with the constructor: The methods in the constructor are created once each time an instance is created. person1.sayName() === person2.sayName() // false The solution is to define sayName outside of createObj. function sayName() { console.log(this.name) } function CreatePerson(name, age) { this.name = name this.age = age this.sayName = sayName } let person1 = new CreatePerson('joy', 31) person1.sayName() However, this will prevent the code referenced by custom types from being grouped together well. Prototype mode: The principle is that every function has a prototype property. Prototype is an object whose properties and methods are shared by all instances. function Person() { } let person1 = new Person() console.log(person1.__proto__ === Person.prototype) // true console.log(Person.prototype.constructor === Person); // true Three methods about prototype objects: isPrototype, getPrototypeof, setPrototypeOf, Object.create() // isPrototypeOf determines whether the prototype object of the constructor is the prototype object of the instance function Person() {} let person1 = new Person() console.log(Person.prototype.isPrototypeOf(person1)); // true // Get the prototype object of the object function Person() {} let person1 = new Person() console.log(Object.getPrototypeOf(person1) === Person.prototype); // Set an object as the prototype object of another object let person1 = {name: "cc"} let person2 = {age: 32} Object.setPrototypeOf(person1,person2) console.log(person1.name, person1.age); // cc 32 // Create a new object with an object as the prototype object let person1 = {name: "cc"} let person2 = Object.create(person1) person2.age = 30 console.log(person2.name, person2.age); When accessing the name attribute of an object person, follow these steps: To determine whether a property is on an instance or on a prototype, you can use hasOwnProperty function Person() {} Person.prototype.name = "cc" let person1 = new Person() console.log(person1.name) // 'cc' console.log(person1.hasOwnProperty("name")); // false To determine whether an object has a certain attribute, use the in operator // Return true if found in the object itself or prototype function Person() {} Person.prototype.name = "cc" let person1 = new Person() console.log("name" in person1) // true console.log(person1.hasOwnProperty("name")); // false Methods for accessing object properties: Object.keys() for ... in // Inherited properties are also traversed Object.getOwnPropertyNames(obj) // Lists both enumerable and non-enumerable properties, and the rest are the same as Object.keys() Object.getOwnPropertySymbols(obj) // Similar to getOwnPropertyNames, but only for symbols Reflect.ownKeys(obj) // Same result as Object.keys() Other ways to access object properties and property values: function Person() {} Person.prototype.name = "cc" let person = new Person() person.age = 21 let sy = Symbol('sy') person[sy] = 'smile' console.log(Object.values(person)) // [ 21 ] console.log(Object.entries(person)) // [ [ 'age', 21 ] ] This concludes this article on several ways and methods of creating objects in js. For more relevant content on creating objects in js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of Docker data management (data volumes & data volume containers)
>>: MySQL uses inet_aton and inet_ntoa to process IP address data
Preface What is a slow query and how to optimize ...
Table of contents 1. Maven Dependency 2. Menu rel...
This article uses an example to illustrate the pa...
Table of contents Preface Do not use strings to s...
This article shares the installation and configur...
There are three ways to create an image: creating...
When we use TypeScript, we want to use the type s...
background Now the company's projects are dev...
Enable remote access rights for mysql By default,...
Table of contents 1. v-for: traverse array conten...
You need to add "gt_" in front of the f...
Table of contents Controller type of k8s Relation...
Public free STUN servers When the SIP terminal us...
Recently, I have been learning to use nginx to pl...
question Adding the type of uploaded file in acce...