Funny JavaScript Object-oriented introductory course one

Source: Internet
Author: User

In our program, the ape world has been circulating this one joke, no women tickets we can new one, no house no tickets no car we are the same new one! Of course, this sounds more like a self-deprecating, after all, we program ape all love self-deprecating, haha, nonsense not to say, today I take you into JavaScript object-oriented this pit! Don't abandon the pit!

First, understand the object:

Two ways to create objects: direct declaration, instantiation of object

Direct statement:

1Var Zhangsan = {2 3 Name: "Zhangsan",4 5Age:29,6 7 //Create a introduce function that returns the name of the Zhang San8 9Introduce.function(){Ten  One returnZhangsan.name; A  - } -  the}

Object instantiation of:

1 New Object (); 2 3 zhangsan.name = "Zhangsan"; 4 5 zhangsan.age =; 6 7 function () {  8  9return  zhangsan.name; Ten  One };  A  -  

Call Method:

1 document.write (zhangsan.name+zhangsan.age); or 23 Alert (Zhangsan.introduce () );

Second, the realization of the class:

Factory production objects: for problems when large-scale output objects are required

1 Function Createcar (engine,tire) {  2  3new  Object (); 4 5 car.engine=engine; 6 7 Car.tire   = tire; 8 9 return car; Ten  One}

Call Factory production objects:

Var Audi = Createcar ("Four-engine", "Four-tire");


To produce an Audi, a new object.

To put it bluntly, the factory pattern is to encapsulate the method of creating objects in the function.

In fact, when you use the instanceof operator to detect an instance of Audi:

Alert (Audi instanceof car);

The result is a popup dialog that displays False.

That is, Audi is not an object that is instantiated by car!

Third, the constructor function

In order to solve the above problems, we introduce the big guy with constructors

Rewrite the above code slightly:

1 Function Createcar (engine,tire) {2 3  This. engine=engine;4 5  This. tire=Tire;6 7  This. Drive =function(){8 9Document.wirte ( This. engine+ This. Tire);Ten  One }; A  -}

In fact, the constructor is a common function with this, it is not the big guy, haha! The This in it refers to generating a new object through this constructor.

Although we have opened the veil of its big man, but the big guy is still the big guy, it is still useful.

1 New car ("Four-engine", "four-Tire");23  45  instanceof car);

The result is amazing pop-up display: true

The big guy is the big guy!

But the problem comes again, the big guy is not without shortcomings, although its model is easy to use, but there is a suspicion of wasting memory, which let the big guy's reputation has been seriously affected:

Every time a person object is generated, it must be rebuilt again sayname function, really trouble!

Clang, clang, clang! Shocked "global function" appearance unexpectedly.

1 Function Sayname () {23    document.write (this. Name); 4 5 }

Then the person class will point Sayname () to the external sayname ()

This.sayname = Sayname;

Wold, brother!

Again, the function defined in the global variable can only be called by an object, making the function a bit of a misnomer, and when the object needs a lot of methods, it needs to define as many global variables as possible. The encapsulation of such objects is meaningless. We can all solve these problems through prototype mode (PROTOTYPE).

Originally a mountain more than a mountain high ah, this world man first see.

    function () {        document.write (this. name);};

With the previous:

Function Sayname () {   document.write (this. name);}

Compared to a second good low!

So what's the use of the outer man?

Don't say much nonsense about the code:

function () {    document.write ("PersonA:" +this. name+ "<br/>");} // persona a method in a parent object, which is a new object instantiated by the person function

Wow! Qaq

This is the end of the fun JavaScript object-oriented course, thanks for browsing and correcting! We'll see you next time!

Funny JavaScript Object-oriented introductory course one

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.