Simply record the JavaScript advanced app

Source: Internet
Author: User

I am a. NET programmer but because of the company's needs, the development of offline apps, but in the process of working I found that people around the writing of JavaScript is the process-oriented coding, For my. NET programmer, this situation is really restless, but the work of the progress, so I work during the day, at night in other people playing games, a good study of JavaScript object-oriented implementation.

Here's a brief explanation of the techniques I used in this project.

A

"Use strict"; Using strict mode, the benefits of this writing can eliminate some of the unreasonable syntax of JavaScript (for example:)

var temp = "7072547"= "7452707";

The Temp2 in this is a global variable that can explode an exception when using strict mode. Detailed content can be seen in strict mode detailed

"Two" anonymous function since the call, because JS inside no block concept, if the variable is defined in the public space, so that the variable belongs to a window variable, only when the window destroyed the space will be destroyed

(function(win) {     var _win = win;      var name = "Mr Wang";      var qq = "7072547";}) (window)

The advantage of the above code is that I treat the window as a local object, and the variables inside the function are local variables so that it does not take up too much global space, and the variable named in the method does not conflict with the name of the variable outside the method.

"Three" here is the focus of the use of object-oriented, JS object-oriented can not be other traditional languages such as Java C # as the class partition of the very clear, JS object-oriented can be said to be invisible, you can also understand that this time intangible wins tangible, why say that

C # class implementation All will have the class keyword, but js that! Only a function, I just started to write JS when I want to use object-oriented all do not know, but I was in someone else to play the game time, a good study of JavaScript, only to understand the original function

Can be considered a special object.

function Belle () {      this. Name;       function () {      alert (this. Name);  } Belle.display ();

The code above says that the function has a completely class-like character, but the above code Belle is the constructor, and display is his static method.

If the above code is written this way Be.display () will error is not a function, in fact, this method is not found. Why is that?

function Belle () {      this. Name;       function () {      alert (this. Name);  } var be =new  Belle (); Be.display ();

While others are playing the game, learning JavaScript is a good thing to discover that being is an object and that objects are objects that have no prototype properties (prototype) objects only __proto__ built-in properties and Construcor. In

var is =new Belle (); When instantiated, the prototype address of the Belle function is given to the __proto__ property if be is an empty object then the constructor below will point to object, but if new
The constructor below will point to Belle (); so you are at var be = new Belle (); Be.display () will not find this function, because the object will not find the property in the case of the prototype inside to find, but the above
The code function only hangs on the constructor, so the error that the report will not find, the above code can be rewritten like this.

function Belle () {      this. Name;       function () {      alert (this. Name);  } var New Belle (); Be.constructor.display ();

That's clear!

Then it is using prototype to implement the class public method. Here are the object-oriented implementations I wrote earlier

function Belle () {    varthis;     = "Mr Wang";       = "7072547";     function ()    {        alert ("name:" +self.name+ "QQ:" +self.qq);}    } var be =new  Belle (); Be.mymethod ();

This implements the object-oriented, I can use the Factory mode and other common design patterns to rewrite our foreground code, because now the Web front-end code more and more, so the natural benefits of writing, but

Take a closer look at the above code, did you find a problem?

What problem that, if the above code I use the Factory mode, I every new object, Belle inside the properties and methods to re-open up space, so the operation of large objects, is too beautiful to look at it!

So I solved the problem by the way I did it.

function Belle () {    varthis;     = "Mr Wang";       = "7072547"function() {    alert ("name:" +this. name+ "QQ:" + This  . QQ);} var be =new  Belle (); Be.mymethod ();

The advantage is that I put the public method into the prototype and share it, so that every new time will not re-open space, but want to query the prototype chain.

Because I am just the back-end of the C # programmer, just graduated last year, just work while working while learning, accumulate some small experience, please you Daniel to see, give me a little more advice, and to those side dishes, more give you some ideas, or that sentence, want to surpass others, in others do other things, to work, Go to beyond!

PS: note here that var is = new Belle (); You can understand that.

var be = {}
Belle.call (BE);
Be. __proto__ = Belle.prototype;

Because the boss is also urged to live, so wonderful continue, will come back ...

Simply record the JavaScript advanced app

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.