JavaScript design Ideas!

Source: Internet
Author: User

# from ancient times,
To understand the design idea of JavaScript, we must start with its birth.

In 1994, Netscape (Netscape) released the Navigator browser version 0.9. This is the first more mature web browser in history, sensation. However, this version of the browser can only be used to browse, do not have the ability to interact with visitors. For example, if the page has a column "user name" required to fill in, the browser will not be able to determine whether the visitor is actually filled out, only to let the server side judge. If not filled out, the server side will return an error, requiring users to re-fill, which is a waste of time and server resources.

! [Netscape] (images/netscape.png)

As a result, Netscape is in dire need of a web scripting language that allows browsers to interact with Web pages. Engineer _brendan Eich_ is responsible for developing this new language. He felt that there was no need to design complex, this language as long as the ability to complete some simple operation is enough, such as to determine whether users fill out the form.

! [] (Images/brendan_eich.jpg)

1994 was the most prosperous time for object-oriented programming (object-oriented programming), when C + + was the most popular language of the time, and the Java language version 1.0 was about to launch in the second year, and Sun was making a big push.

Brendan Eich is undoubtedly affected by the fact that all data types in JavaScript are objects (object), which is very similar to Java. However, he immediately encountered a problem, in the end should not design "inheritance" mechanism?
# Brendan Eich's Choice
If it is really a simple scripting language, there is no need for an "inheritance" mechanism. However, JavaScript is all objects, and there must be a mechanism to link all objects together. As a result, Brendan Eich finally designed the "inheritance".

However, he does not intend to introduce the concept of "class", because once the "class", JavaScript is a complete object-oriented programming language, which seems to be a bit too formal, and increase the beginner's entry difficulty.
He considers that both the C + + and Java languages use the new command to generate an instance.
The C + + notation is:

ClassName *object = new ClassName (param);

The Java notation is:

Foo foo = new Foo ();


Therefore, he introduces the new command to JavaScript, which is used to generate an instance object from the prototype object. However, JavaScript does not have a "class", how to represent a prototype object?
At this point, he thought that C + + and Java would invoke the constructor of the class (constructor) when using the new command. He made a simplified design, in the JavaScript language, the new command was followed by a constructor instead of a class.

For example, there is now a constructor called Dog that represents the prototype of a canine object.

function DOG (name) {
THIS.name = name;
}


Using new with this constructor will generate an instance of a dog object.


var DogA = new DOG (' Mao ');
alert (doga.name); Da Mao

Note the This keyword in the constructor, which represents the newly created instance object.
# Disadvantages of the new operator
One disadvantage of generating instance objects with constructors is that you cannot share properties and methods.
For example, in the constructor of the dog object, set the common attribute species for an instance object.

function DOG (name) {
THIS.name = name;
this.species = ' Canine branch ';
}

Then, build two instance objects:

var DogA = new DOG (' Mao ');
var dogb = new DOG (' Er Mao ');

The species property of the two objects is independent, modifying one and not affecting the other.

doga.species = ' Cat Department ';
alert (dogb.species); Show "canine", not affected by Doga

Each instance object has its own copy of the properties and methods. This not only can not do data sharing, but also a huge waste of resources.
# Introduction of prototype attributes
With this in mind, Brendan Eich decided to set a prototype property for the constructor.
This property contains an object (hereinafter referred to as the "prototype object"), where all instance objects need to share properties and methods that are placed inside the object, and those that do not need to be shared are placed inside the constructor.
Once the instance object is created, the properties and methods of the prototype object are automatically referenced. In other words, the properties and methods of an instance object are divided into two types, one local and the other referenced.
In the case of the dog constructor, it is now rewritten with the prototype property:

function DOG (name) {
THIS.name = name;
}
dog.prototype = {species: ' Canine branch '};

var DogA = new DOG (' Mao ');
var dogb = new DOG (' Er Mao ');

alert (doga.species); Canine Department
alert (dogb.species); Canine Department


Now, the species attribute is placed in the prototype object, which is shared by two instance objects. As long as the prototype object is modified, it affects two instance objects at the same time.


DOG.prototype.species = ' Cat Department ';
alert (doga.species); Cat Department
alert (dogb.species); Cat Department

JavaScript design Ideas!

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.