JS -- var X, this. X, X .... Inheritance

Source: Internet
Author: User

In JavaScript area, as far as I know, the JavaScript Execution context is a concept that explains much ofBehaviorOf JavaScript functions. The execution context represents the environment inWhich a piece of JavaScript code executes. Javascript knows of three execution contexts:

TheGlobal execution ContextIs the implicit environment (context) in which the JavaScript code that isNot partAny function executes.

TheFunction execution ContextIs the context in whichThe code of a functionExecutes. A function context is created automatically whenA function is executed, And removed from the contexts stack afterwards.

TheEval () Execution ContextIs the context in which JavaScript code executed usingEval () functionRuns.

The scope of the global execution context containsLocally defned VariablesAndUnctions, AndBrowser's windowObject. In that context, this is equivalentWindow, So you can access, for example,LocationProperty of that object using either this. Location or window. location.

The scope of a function execution context contains the function's parameters, the locally defned variables and functions, and the variables and functions in the scope
Of the calling code. This explains why the getcellcount () function has access to the _ rows and _ columns variables that are defned in the outer function (table ):

// Table class
Function table (rows, columns)
{
// Save parameter values to local variables
VaR _ rows = rows;
VaR _ columns = columns;
// Return the number of table cells
This. getcellcount = function ()
{
Return _ rows * _ columns;
};
}

The scope ofEval ()Execution context is identical to the scope of the calling code context. The getcellcount () function from the abve code snippet cocould be written like this, without losing its functionality:
// Return the number of table cells
This. getcellcount = function ()
{
Return eval (_ rows * _ columns );
};

VaR X, this. X, and X:

Actually, I think object of JavaScript is similar with association array. We can declare a object as this:

Code

// Create table obj ect
VaR T =
{Rows: 3,
Columns: 5,
Getcellcount: function () {return this. Rows * This. columns ;}
};
// Display OBJ ect Field Values
Document. writeln ("your table has" + T. Rows + "rows" +
"And" + T. Columns + "columns <br/> ");
// Call OBJ ect Function
Document. writeln ("the table has" + T. getcellcount () +
"Cells <br/> ");

 

An execution context containsCollection of (Key, value) associations representing (Key, value)Associations representing the local variables and functions,PrototypeWhose members can be accessedprototype whose members can be accessed throughThisKeyword, a collection of function parameters (if the context was created for a function call), and information about the context of the calling code. members accessed through this, and those declared using VAR, are stored in separate places, should T in the case ofGlobal execution context where VariablesAnd properties are the same thing. in objects, variables declared through VaR are not accessible through function instances, which makes them perfect for implementing private "class" members. on the other hand, members accessed through this are accessible through function instances, so we can use them to implement public members.

When a member is read using its literal name, its value is frst searched for in the list of local variables. if it's not found there, it'll be searched for in the prototype.
To understand the implications, see the following function, which defnes a local variable X, and a property named X. If you execute the function, you'll see that
Value of X is read from the local variable, even though you also have a property with the same name:

Function bigtest ()
{
VaR x = 1;
This. x = 2;

Document. Write (x); // displays "1"
Document. Write (this. X); // displays "2"
}

 

Calling this function, either directly or by creating an instance of it, will display 1 and 2-demonstrating that variables and properties are stored separately. shocould you
Execute the same code in the Global Context (without a function), for which variables and properties are the same, you 'd get the same value displayed twice.
When reading a member using its name literally (without this), if there's no local variable with that name, the value from the prototype (property) will be read instead, as this example demonstrates:

 

Function bigtest ()
{
This. x = 2;
Document. Write (x); // displays "2"
}

 

 

Thus, we shocould use the right execute context so that it avoid Memory leak or any other situation. Keep in mind with following points:

1. When an object is created from a function, this refers to that object.

2. In the case of a simple function call, no matterIf the function is defned directly in the global context or in another function or object, this refers to the global context.

The second point is maid important. Using this in a function that is meant to be called directly, rather than instantiated as an object, is a bad programming
Practice, Because you end up altering the global object. Take this example that demonstrates how you can overwrite a global variable from within a function:

X = 0;
Function bigtest ()
{
This. x = 1; // modify a variable of the global context
}
Bigtest ();
Document. Write (x); // displays "1"

 

Modifying the global object can be used to implement varous coding ubuntures or features, but abusing of this technique can be dangerous. On the other hand,
If bigtest is instantiated using the new keyword, The this keyword will refer to the new object, rather than the global object. modifying the previous example as highlighted below, we can see the X variable of the global context remains untouched:

X = 0;
Function bigtest ()
{
This. x = 1; // create an internal OBJ ect Property
}
VaR OBJ = new bigtest ();
Document. Write (x); // displays "0"

 

But I think the above solutino is not legant and ideal. See the following:

X = 0;
Function bigtest ()
{
If (! (This instanceof bigtest) return New bigtest ();
This. x = 1;
}
Bigtest ();
Document. Write (x); // displays "0"

 

 

Javascript: inheritanceClosureAndPrototype.

Code

Function drive (){
Alert ('Drive in cart ');
}
Function car (name ){
This. Name = Name;
This. Drive = drive;
}
Function bencar (name ){
This. inheritancecar = car;
This. inheritancecar (name );
This. Fly = fly;
}
Function fly (){
Alert ('fly in bencar ')
}

VaR OBJ = new bencar ("Demo ");
OBJ. Drive ();
OBJ. Fly ();

 

However, if we do as above shows. I think it will generate functions in global execute context. And it will result inNaming collision. Thus we can use the prototype feature of JavaScript to instead.

 

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.