Javascript:prototype How to use properties

Source: Internet
Author: User

Original: https://www.cnblogs.com/lidabo/archive/2012/01/05/2313481.html

Https://www.cnblogs.com/wdlhao/p/5743770.html

Prototype is "a method of adding methods to objects of a class," and using the prototype property, you can dynamically add methods to the class to achieve the effect of "inheritance" in JavaScript.

Specifically, prototype is a method for a class of objects introduced in IE 4 and later, and when you write a class with prototype, the browser automatically appends the contents of the prototype to the object if new object is added. In this way, the definition of member functions, even the "inheritance" effect, can be implemented in JavaScript by using prototype.

When a new object is created with a constructor, the new object gets all the properties and methods of the prototype object that the constructor's prototype property points to, so that any action by the constructor corresponding to the prototype object is reflected on the object it produces. All of these objects will share the properties and methods of the prototype object corresponding to the constructor.

In short, if we use the prototype object of a function to add a method to a function, then when we create a new object, we do not copy all the methods of the function, but instead point to all the methods of the function.

 function MyClass (name,age) { this .    Name = name;  this . Age = age; MyClass.prototype.toString  = function () {   }var cls1  = new  MyClass ("Liming", 10 // var cls2  = new  MyClass ("Zhang", 10 
function MyClass (name,age) {    this. Name = name;      this. Age == {    tostring:function () {        //    },    Sayhellow: function () {        //    }};

Each object in JavaScript has the prototype property, and the prototype property of the object in JavaScript is interpreted as a reference to the object type prototype. (Reference to Parent class)

Each constructor has a property called a prototype. This property is useful: Declare a common variable or function for a particular class.

You do not need to explicitly declare a prototype property because it exists in every constructor. You can look at the following example:

// output "Object"

Prototype design pattern: (equivalent to a class in Java, B is an object)

The main idea of the prototype method is that there are now 1 class A, and I want to create a class B, which is a prototype and can be extended. We call the prototype of B A.

JavaScript is divided into three ways:

1. Class method (static method in Java) 2. Object method (normal method, need to first new object) 3. Prototype method (class plus normal method, dynamic)

function People (name) { This. name=name; //Object Methods   This. Introduce=function () {alert ("My name is" + This. Name); }}//class Methodpeople.run=function () {alert ("I can Run");}//Prototyping MethodsPeople.prototype.introducechinese=function () {alert ("My name is" + This. name);} //Testvar p1=NewPeople ("windking");p 1. Introduce (); People.run ();p 1. Introducechinese ();

To add an attribute to prototype:

 function Fish (name, color) { this .   Name=name;  this . Color=color;} Fish.prototype.livesIn  = "Water" ; Fish.prototype.price  =20;var fish1  =new  Fish ("Mackarel", "Gray"  =new  Fish ("Goldfish", "Orange"  =new  Fish ("Salmon", "white"  for  (int  i=1 i<=3; i++ + " , "+fish.color+", "+fish.livesin+", "+fish.price);}  

You see all the fish have attributes livesin and price, we don't even specifically declare these attributes for each different fish. this is because when an object is created, the constructor assigns its property prototype to the internal property __proto__ of the new object. This __proto__ is used by this object to find its properties .

To add a function to an object with prototype:

function Employee (name, salary) { This. name=name;  This. salary=salary;} Employee.prototype.getSalary=function Getsalaryfunction () {return  This. Salary;} Employee.prototype.addSalary=function Addsalaryfunction (addition) { This. salary= This. salary+addition;} var boss1=NewEmployee ("Joan", 200000); var boss2=NewEmployee ("Kim", 100000); var boss3=NewEmployee ("Sam", 150000); alert (Boss1.getsalary ()); //Output 200000Alert (Boss2.getsalary ());//Output 100000Alert (Boss3.getsalary ());//Output 150000

Understanding prototype should not confuse it with inheritance. A's prototype is an example of B, and it's understandable that a will clone the methods and properties in B all over again. A can use the methods and properties of B. The emphasis here is on cloning, not inheritance. This can happen: the prototype of A is an instance of B, and the prototype of B is also an instance of a.

Javascript:prototype How to use properties

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.