Shulou(Shulou.com)06/03 Report--

What are the three ways to create objects in JavaScript? for this question, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Almost everything in Javascript is an object, whether it's an array or a function. This article will teach you three ways to create objects using JavaScript.

Object literal quantity

The literal quantity of a JavaScript object is a comma-separated list of names-- value pairs-- enclosed in curly braces. Object literals are used to encapsulate code and wrap it in an ordered package.

Let Person = {name: "Foziya", age: 20, action: ["walk", "run"], greeting: function () {console.log ("Hello");}}

The attribute values of object literals can be of any data type, including array literals, function numeric literals, and nested object literals.

Let shape = {name: "rectangle", color: "red", size: {length:10, breadth: 20}}; console.log (shape); / / {name:'rectangle', / / color: 'red', / / size: {length:10, breadth: 20}} console.log (shape.size.length) / / 10

Abbreviated attribute name

Suppose you have to put different variables in an object, one way is:

Let one = 1; let two = 2; let three = 3; let numbers = {one: one, two: two, three: three}; console.log (numbers); / / {one: 1, two: 2, three: 3}

With ECMAScript 2015, the same goal can be achieved with a shorter representation:

Let one = 1; let two = 2; let three = 3; let numbers = {one, two, three}; console.log (numbers); / / {one: 1, two: 2, three: 3} console.log (numbers.one) / / 1 console.log (numbers.one = = {one} .one); / / true

User-defined constructor

You can also use functions to create objects in JavaScript. If you think about it, they are already objects themselves, so objects are used to create more objects.

In general, this method is superior to the object constructor. Imagine that you have to create hundreds of objects with the same properties. Using the object constructor method, you must manually add all properties to all objects, but use constructors to predefine these properties.

Functionmovies (name, releaseYear, genre, ratings) {this.name = name; this.releaseYear = releaseYear; this.genre = genre; this.ratings = ratings; this.watch = () = > {console.log ("WatchOnline");};} let DPS = new movies ("Dead Poets Society", 1989, ["Drama", "Teen"], {IMDb: "8.1 / 10", Metacritic: "79"}); console.log (DPS) Movies {/ / name: 'Dead Poets Society', / / releaseYear: 1989, / / genre: [' Drama','Teen'], / / ratings: {IMDb:'8.1 / 10, Metacritic:'79%'}, / / watch: [Function] / /} let rocky = new movies ("Rocky", 1976, ["Drama", "Sports"] {IMDb: "8.1 / 10", Metacritic: "70%"}) Console.log (rocky); / / movies {/ / name: 'Rocky', / / releaseYear: 1976, / / genre: [' Drama','Sports'], / / ratings: {IMDb:'8.1 / 10, Metacritic:'70%'}, / / watch: [Function] / /}

Using the same constructor, you can create any number of objects.

Duplicate attribute name

If two attributes use the same name, the second attribute overrides the first attribute.

Let Person = {name: "NeyVatsa", name: "Shashank"}; console.log (Person.name); / / Shashank

New keyword

The object constructor creates an object wrapper for a given value. If the value does not exist or is not defined, it is created and returned to an empty object. Otherwise, it returns to an object of the same type as the given value.

You can also create objects using the new keyword. Create a new empty object using the built-in object constructor in Javascript; alternatively, this keyword can be used with a user-defined constructor. First of all, let's look at an example:

Let movies = newObject (); console.log (movies) / / {}

The next step is to add properties and methods to this empty object, which can be achieved through a simple dot tag:

Let movies = newObject (); console.log (movies) / / {} movies.name = "Dead Poets Society"; movies.releaseYear = 1989; movies.genre = ["Drama", "Teen"]; movies.ratings = {IMDb: "8.1 / 10", Metacritic: "79"}; movies.watch = () = > {console.log ("WatchOnline");}; console.log (movies) / / {name: 'Dead Poets Society', / / releaseYear: 1989, / / genre: [' Drama', 'Teen'], / / ratings: {IMDb:' 8.1 / 10 metacritic:'79%'}, / / watch: [Function]} movies.watch (); / / Watch Online

But I don't recommend this, because there is scope resolution in the background, and you can check whether the constructor is built-in or user-defined.

Create objects using the ES6 class

This method is very similar to using the new keyword through a user-defined constructor. Classes are the main components of object-oriented programming (OOP), and you can create many class instances that are actually objects. With the support of the ES6 specification, constructors can now be replaced with classes.

ClassMovies {constructor (name,releaseYear, genre, ratings) {this.name = name; this.releaseYear = releaseYear; this.genre = genre; this.ratings = ratings;} watch () {console.log ("WatchOnline");}} let rocky = new Movies ("Rocky", 1976, [Drama "," Sports "], {IMDb:" 8.1 / 10 ", Metacritic:" 70% "}); console.log (rocky) / / Movies {/ / name: 'Rocky', / / releaseYear: 1976, / / genre: [' Drama','Sports'], / / ratings: {IMDb:'8.1 / 10, Metacritic:'70%'} / /} rocky.watch (); / / Watch Online

In the above example, I have defined all the parameters in the constructor. The method can be part of the class, and the declaration can be later added to the created instance of the class to become an "object":

/ * above example * / rocky.buy = function () {console.log ("Buy theMovie");}; rocky.buy (); / / Buy theMovie

Here the method is part of the object and does not affect the original class.

Image source: unsplash

In JavaScript, a prototype-based inheritance language, both classes and constructors mimic the object-oriented inheritance model. Familiarity with classes is very helpful, and class syntax is often used by popular JavaScript libraries like React.

This is the answer to the question about what are the three ways to create objects in JavaScript. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.