JavaScript object-oriented Basics

Source: Internet
Author: User

1. Use [] to call object attributes and Methods

Function User ()
{
This. age = 21;
This. sex = "male? ";
}
Var user = new User ();
Alert (user ["age"]);
2. dynamically add, modify, and delete object attributes and Methods
// Define a class
Var user = new Object ();

// Add attributes and Methods
User. name = "cary ";
User. age = 21;
User. show = function (){
Alert (this. name + "year? Age? Is it? :? "+ This. age );
}
// Execution Method
User. show ();
// Modify attributes and Methods
User. name = "James ";
User. show = function ()
{
Alert (this. name + "you? OK? ");
}
// Execution Method
User. show ();
// Delete attributes and Methods
User. name = "undefined ";
User. show = "undefined"
// Execution Method
User. show ();
3. Use the braces {} syntax to create a non-type object
Var obj = {};
Var user =
{
Name: "cary ",
Age: 21,
Show: function (){
Alert (this. name + "year? Age? Is it? :? "+ This. age );
}
}
User. show ();
Var obj = {}; equivalent
Var obj = new Object ();
4. Prototype

Each function is also an object, and the corresponding class type is "Function". Each function object has a sub-object prototype, indicating the Function prototype.
When a class object is used, members of the prototype object will be instantiated as members of the object. For example:

function class1()
{ }
class1.prototype.show = function() {
alert("prototye member");
}

var obj = new class1();
obj.show();
5. Detailed description of Function objects
5.1.Function and Date, Array, and String all belong to the internal objects of JavaScript. The constructors of these objects are defined by JavaScript itself. The above mentioned function
The corresponding type of the object is Function, which is the same as the Array object. Therefore, you can create a Function object like new Array (), while
Function objects can be created using the function keyword in addition to this method. We do not often use the new Function () method to create a Function because a Function is generally
There will be a lot of statements. If we upload these statements to the new Function () parameter, it will be quite readable.
Var functionName = new Function (p1, p2,..., pn, body) Where p1 to pn is the parameter, and body is the Function body.
. Famous and unknown functions
Famous function: function funcName (){}
Nameless function: var funcName = function (){}
The only difference between them is that a famous function can be defined after it is called. For an unknown function, it must be defined before it is called.
. We can use the Function prototype object to extend the Function object, such:
Function. prototype. show = function (){
Alert ("Extension Method ");
}
Function fun ()
{}
Fun. show ();
Fun. show (). show ();

Fun. show (). show (); this statement calls the show method of the function object fun. show. Is a recursive call, because fun. show () is also a function.

6. Implicit parameter arguments passed to the parameter

When using a function, in addition to passing the specified parameters, we also created an implicit parameter arguments, as shown below:

function fun(a, b) {
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
}
fun(1,2,3);

Arguments also has the attribute callee, indicating the reference to the function object itself.

7. Apply and call methods of functions

Their role is to bind the function to another object for running. The two are only different in defining parameters, as shown below:
Function. prototype. apply (thisArg, argArray );
Function. prototype. call (thisArg [, arg1 [, arg2. ..]);

The following is an example. After the show1 method of obj1 is bound to obj2, the execution environment of the entire function is transferred to obj2. Therefore, this Pointer Points to obj2, so fun2t is displayed:

function fun1() {
this.name = "fun1";
this.show1 = function(arg) {
alert(this.name + arg);
}
}
function fun2() {
this.name = "fun2";
this.show2 = function(arg) {
alert(this.name + arg);
}
}

var obj1 = new fun1();
var obj2 = new fun2();

obj1.show1.apply(obj2, ["t"]);
obj1.show1.call(obj2, "t");

8. Class implementation in Javascript
. Namespace: We can use the following method to implement namespace. namespace1 can be viewed as a namespace.

Var namespace1 = new Object ();
Namespace1.class1 = function (){
// Right? Like initialization code
}
Var obj1 = new namespace1.class1 ();
8. 2. Class Members
We have already added members and methods to the class. In addition to the above method, we can also use prototype to add members to the class. How can we do this is the most reasonable? First
Let's take a look at the previous method:
Function User (){
// Constructor
}
// Member Definition
User. prototype. name = "cary ";
User. prototype. show = function (){
Alert (this. name );
}
In the preceding method, each class member is defined to write User. prototype. We can refactor it to the following form:
Function User (){
// Constructor
}
// Member Definition
User. prototype =
{
Name: "cary ",
Show = function ()
{
Alert (this. name );
}
}

8. 3. Private member

The private member of the implementation class mainly uses the scope of the variable, which we implement in the constructor.

Function User (){
// Define private members in the constructor
Var name = "cary ";
Function show ()
{
Alert (name );
}
// A total of members
This. setname = function ()
{
Name = "james ";
}
}
8. 4. Static members
We can directly add members to a function object to implement static members, such:
Function class1 ()
{}
// Static attributes and Methods
Class1.staticpr = "staticpr ";
Class1.staticmet = function ()
{}
// Call
Class1.staticmet ();
We can add members to the class functions of Function objects to add static members to all Function objects by default, as shown below:
Function. prototype. staticmet = function ()
{}
Function class1 ()
{}
// Call
Class1.staticmet ();
9. reflection mechanism
Using the for (... in...) method, var p in for stores the attributes and methods of the User object. Let's determine whether it is an attribute or a method, as shown below:
Function User (){
// Constructor
}
// Member Definition
User. prototype =
{
Name: "cary ",
Show: function ()
{
Alert (this. name + "Hello ");
}
}
Var u = new User ();
For (var p in u ){
If (typeof (u [p]) = "function "){
U [p] ();
}
Else {
Alert (u [p]);
}
}

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.