Introduction to JavaScript's basic knowledge of object-oriented programming

Source: Internet
Author: User

Before we get into the face of JavaScript, let's start by introducing some of the concepts of JavaScript.

1. JavaScript's basic object-oriented concept

functionAA () {}/** Here's a AA, as we used to think he was a function, indeed, but from a current point of view * AA is more than just a function, he is an object. In JavaScript, everything is an object, and the function is no exception * We can assign values to the object's properties, such as AA.B = 5, and can also get the value of the object, for example, the assignment can be directly assigned, no declaration, direct aa. Attribute =xxx, you can assign a value directly to a property of AA * Alert (aa.5). */aa.b= 5; alert (aa.b);//You can do the same.functionBB () {Alert ("BB");} AA.D=BB;AA.D ();//display BB on a webpage/** We can see from the above example that a property of a AA object (function) can be not only a normal variable * but also an object property. BB is also an object, BB can also be a property of AA objects * Similar to Java properties, properties can be either normal or reference type*///You can also create a JSON-formatted object that puts the JSON-formatted object into the object AAvarJSON ={//Create a JSON-formatted object"Name": "Zhangsan"};aa.objectjson= JSON;//assigning the Objectjson attribute in AA to JSONalert (aa.objectJson.name);//you can see the Zhangsan on the Web page/** in AA objects (functions), the properties in AA can be ordinary variables, functions (object types), objects in JSON format, etc.*/

2. The return value of JavaScript

/** The return value of the JS function * The JS we saw before is returned by a variable*/functionFun () {return5;} Alert (fun ());/** However, since we have defined the concept of the object, the return value can of course be an object * Define functions inside a function (object)*/functioncc () {varI=0; functionDD () {i++; returni; }        returndd//The return value becomes an object}//calling FunctionsvarCfun =cc (); alert (Cfun ());//showing 1/** Let's do an exercise to help us understand JS's return value * Requirements: Call a person function and return an object with the Setpid,getpid,setpname,getpname method * * Analysis: You can understand that. Returns a JSON-formatted object that uses a key-value pair in a JSON-formatted object, except that the key is a function (object)*/functionPerson () {return{setpid:function(PID) { This. PID =pid; }, Getpid:function(){            return  This. PID; }, Setpname:function(pname) { This. pname =pname; }, Getpname:function(){            return  This. PName; }     };}varp =Person ();//using property methods for objectsP.setpid ("2");p. Setpname ("Zhangsan"alert (P.getpid ()); alert (P.getpname ()) ;

3. JavaScript prototype concept

functionPerson () {}functionstudent () {}/** This attribute A is only private to the person object, but the student object does not have this property, * What if you want student to have a person's attribute? * * This time, you need to introduce the concept of prototype (prototype) * prototype is what: prototype is a Object that can be used by other objects to implement property inheritance. * Does any object have a prototype?: Yes * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * More about the prototype chain will be introduced later)*/Person.a= 5;/** If student want the properties of the person object * As we said above, a function, he is the object, * Here a function is also a constructor function, as can be seen in the following example, student is also a constructor function * var s = new student (); *  */Student.prototype= person;//gave the prototype attribute of person to student's prototype .vars =Newstudent (); alert (S.A.);//When you create a student object, you can use the properties in the prototype.functionMan () {}/** We can print out the constructor of man, the constructor for man, * function function () {[native code]}*/alert (man.constructor);//The result in the above comment/** We can also make such assignments for prototypes * that is, the man prototype can be a JSON-type Object*/Man.prototype={aa:function() {}, BB:function(){                    }};/** * Summary of the prototype: * 1, any object has a constructor * 2, all objects have a prototype * 3, through the constructor function. prototype. Properties can add properties to a prototype*/

4. The concept of JavaScript closures

//let's just give an example.functionPerson () {}person.a=5;/** We know that A is a property of the person object, but the object's property A * is accessible to the user, and can also modify the property value of a * but if I define an object, there are some attributes that are important, I don't want to let the outside to modify him, what to do? * This will require the use of closures. * * Understanding and description of closures * 1. Functions or variables defined inside the function cannot be accessed outside * 2, the process of accessing function internal functions or variables externally is called closures * 3, closures consume memory, because variables are not destroyed by function destruction * 4, using closures to make functions and variables private There are properties * 5, closures with closures of the paradigm * * Closure of the paradigm: first of all two curly braces () () before a curly brace put an anonymous function, the next brace inside a parameter * parameter and argument corresponding, in the anonymous function, you can use the formal parameter * (functi On (formal parameter) {}) (argument), in other words, the function contains one or more functions * * * See specific examples **/(function(a) {varI=0; functionAA () {alert ("AA"); }})(5);//alert (AA ());//cannot access AA/** But there will be a problem, if the object inside I want to provide some methods, to the outside world, what can I do? * For example, I want to give BB and Cc method to the outside world, how to do? * You can turn a function into a property of an argument, call it through the property of the argument * plainly, the property that adds the private attribute to the parameter in the formal argument * Gets the property (private method) in the outside world through the argument, and makes the call **/(function(a) {functionAA () {alert ("AA"); }        functionBB () {Alert ("BB"); }            functioncc () {alert ("CC"); }        /** in a (window) object, there is a OpenMethod attribute, * Two functions (objects) are returned in the property **/A.openmethod=function(){        return{bb:bb, cc:cc};    }; }) (window);varJsonmethods =Window.openmethod (); jsonmethods.bb ();//BBJsonmethods.cc ();//cc/** Problems solved by closures: * 1, solved the problem of private and private objects in JS object-oriented process * 2, functions defined inside the function can be used outside the function*/

If you open jquery's code, you'll find that he's using closures.

A few of the concepts described above I have simply said, if not detailed enough, you can go to the Internet to see video or reference books or search information

Some of the above concepts are important for JavaScript object-oriented programming, and I hope that you can take a little thought to understand

Introduction to JavaScript's basic knowledge of object-oriented programming

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.