The prototype in JavaScript

Source: Internet
Author: User


1, prototype

There is no concept of class in JavaScript, but it is true that JavaScript can be overloaded, polymorphic, and inherited. These implementations can all be explained by reference and variable scopes in JavaScript, combined with prototype.

2, Simple Example
var Blog = function (name, URL) {    this.name = name;    This.url = URL;}; Blog.prototype.jumpurl = "; Blog.prototype.jump = function () {    window.location = this.jumpurl;};/ * * equivalent to Blog.prototype = {    jumpurl: ',    jump:function () {        window.location = This.jumpurl;    }}; */var Rainman = new Blog (' Rainman ', ' http://rainman.cnblogs.com '); var test = new Blog (' Test ', ' http://test.cnblogs.com ') ;

This is a very simple example, but it can be a good explanation for some of the things inside prototype, first look at the memory allocation:

You can see these things by looking at the following:

    • Prototype is just a property of the function, and the type of the property is an object.
    • Memory allocation Status:
      The function blog has a prototype property, and the prototype property has a variable and a function;
      The two variables of test and Rainman have name and URL two variables respectively;
      The test and Rainman two variables have a jumpurl variable and a jump function, but do not allocate memory, they are references in Blog.protype

3. Extended 1:website.prototype = Blog.prototype
var Blog = function (name, URL) {    this.name = name;    This.url = Blogurl;}; Blog.prototype.jumpurl = "; Blog.prototype.jump = function () {    window.location = This.jumpurl;}; var Rainman = new Blog (' Rainman ', ' http://rainman.cnblogs.com '); var test = new Blog (' Test ', ' http://test.cnblogs.com '); var Website = function () {}; Website.prototype = Blog.prototype;var MySite = new Website ();

You can see these things by looking at the following:

    • "Website.prototype = Blog.prototype;" : website's prototype does not allocate memory, just refers to the prototype property of the blog.
    • The two properties of MySite also do not allocate memory, only Blog.prototype.jumpurl and Blog.prototype.jump are referenced separately

4. Extended 2:website.prototype = new Blog ()
var Blog = function () {}; Blog.prototype.jumpurl = "; Blog.prototype.jump = function () {    window.location = This.jumpurl;}; var Website = function () {}; Website.prototype = new Blog (); var mysite = new Website ();

You can see these things by looking at the following:

    • The prototype attribute of website is just an instance of the blog (with Rainman=new blog (); ), so the prototype attribute of website has the Jumpurl variable and jump method.
    • MySite is an example of website, its Jumpurl and jump method is inherited from website prototype, and Web.prototype inherit from Blog.prototype (here is not so much an inheritance as a reference)
    • During the whole program, only one jumpurl variable and one jump method are allocated in memory.
5. New operator

The new operator in JavaScript is the creation of an object. How to use:

new constructor[(arguments)]
where constructor is a required option. The constructor for the object. If the constructor has no arguments, you can omit the parentheses.
arguments is an optional option. Any arguments passed to the new object constructor.

The new operator in JavaScript explains
The new operator performs the following tasks:
creates an object that has no members.
call the constructor for that object, passing a pointer to the newly created object as the this pointer.
The constructor then initializes the object based on the parameters passed to it.
Example
The following are examples of usages of the valid new operator.
My_object = new Object;
My_array = new Array ();
My_date = new Date ("Jan 5 1996");

6. Other
    • In most JavaScript versions, the JS engine will give each function an empty prototype object, the prototype property.

Prototype in JavaScript

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.