This and prototype in JavaScript, prototype understanding

JavaScript function calls

There are 4 ways to call JavaScript functions.

The different way of doing this is in the initialization of this.

This Key Words

In general, in JavaScript, this points to the current object when the function executes .

Note This is a reserved keyword and you cannot modify the value of this.

Global objects

When a function is not called by its own object , the value of this becomes a global object.

In a Web browser, the global object is a browser window (the Window object).

The value returned by this instance is the Window object:

1 as a function call

Instance

function MyFunction (A, b) {
return a * b;
}
MyFunction (10,2); MyFunction (10, 2) returns 20

2 functions as method calls

Instance

var myObject = {
FirstName: "John",
LastName: "Doe",
Fullname:function () {
Returnthis.firstname + "" + this.lastname;
}
}
Myobject.fullname (); Return to "John Doe"

Attention

function as an object method call, which causes the value of this to be the object itself.

3 Calling a function using the constructor function

If the new keyword is used before a function call, the constructor is called.

Instance

constructor function:
function MyFunction (arg1, arg2) {
This.firstname = arg1;
This.lastname = arg2;
}

This creates a new object
var x = newmyfunction ("John", "Doe");
X.firstname; Return to "John"

The call to the constructor creates a new object. The new object inherits the properties and methods of the constructor.

The This keyword does not have any value in the constructor. The value of this is created when the object is instantiated (new object) when the function is called.

4 calling functions as function methods

In JavaScript, a function is an object. The JavaScript function has its properties and methods.

Call () and apply () are predefined function methods. Two methods can be used to call a function, and the first parameter of two methods must be the object itself.

Instance

Function MyObject () {}

function MyFunction (A, b) {
return a * b;
}
Myfunction.call (MyObject, 10, 2);//Return 20

function MyFunction (A, b) {return a * b;}

MyArray = [10,3];

Myfunction.apply (MyObject, MyArray);//Return 30

All two methods use the object itself as the first parameter. The difference between the two is the second argument: Apply passes in an array of parameters, which is the combination of multiple parameters into an array, and call is passed in as a call parameter (starting with the second argument).

Closure Depth: http://www.cnblogs.com/onepixel/p/5062456.html

1 prototype design pattern

Clone () can be used in. NET to implement the prototype method

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.

The 2 JavaScript methods can be divided into three categories:

Class A methods

B Object method

C Prototyping Method

Example:

function people (name) {  this.name=name;  Object method This  . Introduce=function () {    alert ("My name is" +this.name);}  } Class Method People.run=function () {  alert ("I can Run");} Prototype Method People.prototype.introducechinese=function () {  

　　

What does prototype mean?

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.

A.prototype = new B ();

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.

Let's 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 (); Show Baseclass::showmsg

　　

We first defined the BaseClass class, and then we want to define extentclass, but we are going to use an instance of BaseClass as a prototype, to clone the Extendclass also contains showmsg this object method.

Extendclass.prototype = new BaseClass () can be read as: Extendclass was created as an instance of BaseClass as a prototype clone.

Then there is a question, what if the Extendclass itself contains a method with the same name as the BaseClass method?

Here is the 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

　

Experimental results show that the function will go to the function of the main body to find, if found to run, can not find the prototype to find the function. Or it can be understood that prototype does not clone a function with the same name.

Then there will be a new problem:

What if I want to use an instance of Extendclass instance call BaseClass object method ShowMsg?

3 Obj1.func.call (obj) method

It means to treat obj as Obj1, calling the Func method

The answer is that you can use call:

Extendclass.prototype = new BaseClass (), var instance = new Extendclass (), var baseinstance = new BaseClass (); baseinstance. Showmsg.call (instance);//Display baseclass::showmsg

　　

Here's Baseinstance.showMsg.call (instance); read as "invoke instance as Baseinstance, invoke its object method ShowMsg"

Well, someone here might ask, why not BaseClass.showMsg.call (instance);

This is the difference between the object method and the class method, and we want to invoke the BaseClass object method.

Finally, the following code, if understood clearly, is understood in this article:

<script type= "Text/javascript" >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</script>

　　

Reproduced in http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html

This and prototype in JavaScript, prototype understanding