Prototype_javascript tips-js tutorial

This series of blog posts focuses on some advanced applications that are often obfuscated in javascript usage, including prototype, closure, scope, and this keywords. for a programmer who needs to improve their javascript level, these must be mastered. This section mainly introduces prototype. prototype in JS is a more difficult part of JS.

This article is based on the following knowledge points:

1 original method design mode
In. Net, you can use clone () to implement the original method.

The main idea of the original method is that there is A Class A now. I want to create A Class B, which is based on class A and can be expanded. We call B A as A prototype.

2 javascript methods can be divided into three types:
A-> Class Method

B-> Object Method

C-> Prototype Method

Example:

Function People (name) {// object property this. name = name; // object method this. introduce = function () {alert ("My name is" + this. name) ;}// class static method People. run = function () {alert ("I can run");} // Prototype Method People. prototype. introduceChinese = function () {alert ("My name is" + this. name) ;}// test var p1 = new People ("Windking"); p1.Introduce (); // call the object method People. run (); // call the static method p1.IntroduceChinese (); // call the Prototype Method

3. obj1.func. call (obj) Method
It means to regard obj as obj1 and call the func method. Originally, the func method of obj1 is called. However, after passing in obj, the context object is changed, you can use the obj object to call the ojb1 method.

Okay, here is a solution:

What does prototype mean?

Each object in javascript has the prototype attribute. The prototype attribute of the object in Javascript is interpreted as returning reference to the object type prototype.

A. prototype = new B ();

Understanding prototype should not confuse it with inheritance. Prototype of A is an instance of B. It can be understood that A clones all the methods and attributes of B. A can use the methods and attributes of B. Here we emphasize cloning rather than inheritance. This can happen: prototype of A is an instance of B, and prototype of B is also an instance of.

Let's take a look at an example of an experiment:

Function baseClass () {this. showMsg = function () {alert ("baseClass: showMsg") ;}} function extendClass () {} extendClass. prototype = new baseClass (); var instance = new extendClass (); instance. showMsg (); // display baseClass: showMsg

We first define the baseClass class, and then we want to define the extentClass. However, we intend to use an instance of baseClass as the prototype. The cloned extendClass also contains the showMsg object method.

ExtendClass. prototype = new baseClass () can be read as follows: extendClass is created by cloning an instance of baseClass as a prototype.

Then there will be a problem. What if extendClass itself contains a method with the same name as the baseClass method?

Below is extended Experiment 2:

Function baseClass () {this. showMsg = function () {alert ("baseClass: showMsg") ;}} function extendClass () {this. showMsg = function () {alert ("extendClass: showMsg") ;}} extendClass. prototype = new baseClass (); var instance = new extendClass (); instance. showMsg (); // display extendClass: showMsg

Lab proof:When the function is running, it will first go to the function of the ontology. If it is found, it will run. If it cannot be found, it will go to prototype to find the function. Alternatively, prototype does not clone functions with the same name.

There will be another new problem:

What if I want to use an instance of extendClass to call the object method showMsg of baseClass?

The answer is yes.Call:

ExtendClass. prototype = new baseClass (); var instance = new extendClass (); var baseinstance = new baseClass (); baseinstance. showMsg. call (instance); // display baseClass: showMsg

Here baseinstance. showMsg. call (instance); read as "call an instance as a baseinstance and call its object method showMsg"

Well, someone may ask why baseClass. showMsg. call (instance) is not needed );

This is the difference between object methods and class methods. We want to call the object methods of baseClass.

Finally,If the following code is clear, this article will already understand:

Function baseClass () {this. showMsg = function () {alert ("baseClass: showMsg");} this. baseShowMsg = function () {alert ("baseClass: baseShowMsg") ;}} baseClass. showMsg = function () {alert ("baseClass: showMsg static");} function extendClass () {this. showMsg = function () {alert ("extendClass: showMsg") ;}} extendClass. showMsg = function () {alert ("extendClass: showMsg static")} extendClass. prototype = new baseClass (); var instance = new extendClass (); instance. showMsg (); // display extendClass: showMsginstance. baseShowMsg (); // display baseClass: baseShowMsginstance. showMsg (); // display extendClass: showMsgbaseClass. showMsg. call (instance); // display baseClass: showMsg staticvar baseinstance = new baseClass (); baseinstance. showMsg. call (instance); // display baseClass: showMsg

The above is the content of prototype_javascript In the javascript learning summary. For more information, see the PHP Chinese website (www.php1.cn )!