JavaScript class analogy-version plain English

Source: Internet
Author: User

Reprint Please specify source: water tanker

If it's wrong, please point out, thank you.

-----------------Body Split Line----------------------

class : The class is too abstract, to understand it, we should use the real thing to analogy
In my opinion, a class is a machine that has a lot of (of course, one can) function (something that can be called an object here), like a radio.
To have a radio, we have to have a radio machine, and this machine is what we call the class

This is the machine that makes the radio; he can show time, shape and so on (that is, properties) function Radio () {    this.time = ';    This.form = ' Rectangle ';} And then give him a function of listening to the long wave signal; (i.e. method) Radio.prototype.fm = function () {};//give him a function to listen to the shortwave signal again; (i.e. method) radio.prototype.am = function () { };//plus one other function; (i.e. method) Radio.prototype.another = function () {};


Here you want to make the radio has the function, all can add changes at any time ( using the prototype method to add methods )
The machine has been put in the factory, and when does it start to work? It stands ready;
When I want a radio (Instantiation of class, also called object)

var me-radio = new Radio ();

  

Then I got a radio. I want to use this radio, listen to the shortwave channel, I will use

Me-radio.am ()

  

I use it when I want to hear the long wave

Me-radio.fm ()

  

I want to use some other function.

Me-radio.another ();

  

After a day, my sister also want a radio, that good to do ah, I have a factory in a special radio machine, I am afraid of what, give her a.

var New Radio ();


Well, my sister also has a radio, and the function of my radio is identical. It can also listen to long waves and listen to short wave.
Then my sister and sister also want one, give her also new one (New Radio ()), I seven Uncle eight aunt of all want, good, all give.

  

At this time my father came, said also give me a radio bar, but you now this radio function can not meet me, I want this radio must be able to call, you give me to build a bar, how to do?
The father's life is hard.

First Analysis 1: A machine to build a radio (and then create a Radio2 Class) All of the functions (properties and methods) are added to the line, but the previous machine-made radios, common functions have, re-feel repeated, And there are so many radio machines in the factory will not be a bit crowded AH (memory consumption), so this method is not the best


post-Analysis 2: I changed the original machine, so that the machine can be made out of the radio will be able to call, but there is a problem, is the previous radio every day to get back to maintain, you this amendment, sisters, uncles, Seven elder sister eight aunt of the radio again maintenance time has the function of the call, Haha, scary not? So this is not possible;

Re-analysis 3: In the Radio Machine made (new) on the radio directly modified to add a call function No, good, say dry, my father still waiting for the radio to call it;
(Inheritance of classes)
/** JavaScript Inheritance There are six or seven ways, I will not elaborate. Here is a relatively new method: Object.create (); Syntax: Object.create (prototype, descriptors), the first argument is the prototype to inherit, the second is an optional parameter, and a JavaScript object that contains one or more property descriptors **/

Object.create () He can give an empty box what you want him to put on, it's cheap, it's small, it can go straight in the pocket, and it's very good in scalability. His function is to copy a radio-making machine at a very small cost.

First of all, we create an empty box (function object), of course, you can also give the empty box you want to install things;

1 var function () {2// can be loaded or not,3this. Name = ' Radio that can be called '; 4 }      


Since the original is the same as the radio transformation, then the original methods and attributes are taken over;
Take attributes First:

1 var function () {2this. Name = ' Radio that can be called '; 3 radio.call (this// take property:4 }


How to get it again:

Photoradio.prototype = Object.create (Radio.prototype);



Here, we copy a machine that is identical to the original radio; this machine is called Photoradio;
Now let's add a call to the function.
Here will have not understand the classmate to ask, so trouble, as I write a class directly, yes, now it seems to write a class is fast, but, if radio there are thousands of methods, instead of three, then you will be re-write one?
Well, to solve the problem of that classmate, let's continue to add functionality to the new machine.

function (){}


Here we have a machine that can make telephone radios.
Let's make a radio for my dad:

var New Photoradio (); // Remember that the radio you made is open for use. Just on the phone is this father-radio.photo ();


Well, we all have radios in our family, can you build them?
Full code:

1 functionRadio () {//Create a first object radio2  This. Time = ' 12:00 ';//properties of the object3  This. Form = ' Rectangle ';//properties of the object4 }5Radio.prototype.fm =function(){//adding an FM method to an object6Console.log (' This is FM function ');7Console.log ( This. time);8 };9radio.prototype.am =function(){//add an AM method to an objectTenConsole.log (' This is AM function '); One }; A varMe_radio =NewRadio ();//Strength Words Radio Object -  - varPhotoradio =function() {Create a second object Photoradio the  This. Name = ' AAA '//Photoradio Properties of an object -Radio.call ( This);//inherit the properties of the Radio object . - }; -  +Photoradio.prototype = Object.create (Radio.prototype);//to inherit the methods of the Radio object . -  + varFather_radio =NewPhotoradio ();//Instantiate Photoradio A  atFather_radio.fm ();//use the instantiated object;

JavaScript class analogy-version plain English

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.