JavaScript basics literal and Constructor (008)

Source: Internet
Author: User

JavaScript supports a literal notation (Literal) to fame objects and arrays, as opposed to constructors (constructor), where Literal's reputation is more concise, easier to read, and less prone to bugs. In fact, JSON is the JavaScript data format defined in the literal way.

1. Create an object in a literal way
The object in JavaScript is probably like a hash table with a bunch of "key-value pairs". Here we give the syntax of the famous object in the literal way:

    • Wrap the inside of the object with curly braces (i.e. {});
    • Each key-value pair in the object should be separated by commas;
    • The key is separated from the value by a colon;
    • When you assign this object to a variable, don't forget to mark the end of the assignment statement with a semicolon ";" in the following curly braces.


For value, it can be a simple data type, another object, or a method. Objects that are created by means of literal can be modified at any time. Like what:

Start with an empty objectvar dog = {};//add one propertydog.name = "Benji";//Now add a methoddog.getname = function () {    return dog.name;};

The above code first creates an empty object, and then adds properties and methods to it. You can also modify the value of the property, or redefine the method:

Dog.getname = function () {    //redefine the method to return    //a hardcoded value    return "Fido";};

Even delete properties:

Delete Dog.name;

Then add the new properties and methods:

Dog.say = function () {    return "woof!";}; Dog.fleas = true;

This example begins by defining an empty object and, in practice, defining something for the object initially:

var dog = {    name: "Benji",    getname:function () {        return this.name;    }};

To add, the "empty object" mentioned above is not "empty" in JavaScript. Because when you have a reputation for a {} object, it immediately inherits properties and methods from Object.prototype, saying it is an "empty object", meaning that we have not yet defined its own properties and methods.

2. Creating object objects with JavaScript built-in constructors
Again, there is no concept of "class" in JavaScript. There is no need to "blueprint" when creating JavaScript objects. In JavaScript, the object's constructor is a bit like the definition of "class", especially when it comes to using constructors. Here's a look at the specifics of the two methods of using literal and built-in constructors:

One--using a literalvar car = {goes: "Far"};//another the--using a built-in constructor//warning:this is an Antipatternvar car = new Object (); car.goes = "far";

It is clear that a line of literal fame can complete two lines of Contructor fame. In addition, the literal of the object in JavaScript can reflect the actual situation: is actually a bunch of key-value pairs, rather than by a blueprint "class" instantiation. So we should always use the literal way to fame object objects, rather than using JavaScript built-in new object (). The new Object () also has a problem. When you pass parameters to this constructor, it may be helpful to generate a special type of object, which may cause some problems that are not meant to be:

Warning:antipatterns ahead//an empty objectvar o = new Object (); Console.log (O.constructor = = = object); true//a number Objectvar o = new Object (1); Console.log (O.constructor = = number); Trueconsole.log (o.tofixed (2)); "1.00"//a string Objectvar o = new Object ("I am A String"); Console.log (O.constructor = = = string); true//normal objects don ' t have a substring ()//method but string objects Doconsole.log (typeof o.substring); "Function"//a Boolean objectvar o = new Object (true); Console.log (O.constructor = = = Boolean); True

3. Custom constructors to create specific objects
In addition to the new object (), we can also write our own constructors to create specific objects, such as:

var adam = new Person ("Adam"); Adam.say (); "I am Adam"

This code looks much like a person object created in Java. Although the syntax is similar, there is no "class" in JavaScript, and the person is actually just a function. Here is how the person is defined for the function that constructs the object:

var person = function (name) {    this.name = name;    This.say = function () {        return "I am" + this.name;    };};

When you execute the above function with the New keyword, a few things happen:

    • An empty object was created;
    • Make this object inherit Object.proptotype (the object prototype in JavaScript) and assign the object's reference to this;
    • The This reference is returned implicitly at the end of the function.

Other words:

var person = function (name) {    //Create a new object    //Using the object literal    //var this = {};    Add properties and methods    this.name = name;    This.say = function () {        return "I am" + this.name;    };    return this;};

The above code shows that the new person () does not create an instance of a class for JavaScript, but instead creates a new function and gives the reference to this function. Let's talk about the relationship between functions and objects in JavaScript, as well as object prototypes and inheritance, and look at the Say () method first. To simplify this example, we have added the Say () method to the person object, but this approach is not efficient: Because the Say method in each new object is the same. In this case, you should actually add the say () method to the person's prototype, rather than adding the same say method to each object at the time of creation:

Person.prototype.say = function () {    return "I am" + this.name;};

To be more clear, the object created by the constructor is not "empty", that is to say:

var this = {};

A copy of the object prototype should be created:

var this = object.create (Person.prototype);

Of course, if the implicit return is explicitly added, you can return any object that you want to return, and the return is not a reference to this. Like what:

var objectmaker = function () {    //This ' name ' property would be ignored    //Because the constructor    //Decides To return another object instead    THIS.name = "This Is it";    Creating and returning a new object    var that = {};    That.name = "and that's that";    Return that;};/ /TestVar o = new Objectmaker (); Console.log (O.name); "And that's that"

JavaScript Foundation literal and Constructor (008)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.