JS Object-Oriented Programming Learning

Source: Internet
Author: User
Objective: 1. To learn about classes (prototype objects) and objects in JavaScript. 2. What are member variables and member methods. 3. Master the use of the constructor. Supplement: about the double equal sign (): 1. If both sides of the equal sign are strings, the comparison content is equal. 2. If both sides of the equal sign are digits, the comparison is... syntaxHighlighter. all (); learning objectives:
1. Master the classes (prototype objects) and objects in JS. 2. What are member variables and member methods. 3. Master the use of the constructor.
Supplement: About the equal sign (= ):
1. If both sides of the equal sign are strings, check whether the content is equal.
2. If the equal sign is a number on both sides, compare whether the value is equal
3. If both sides of the equal sign are objects or functions of objects, compare the address (that is, determine whether the two reference the same object)
Function Person (){
}
Var p1 = new Person ();
Var p2 = new Person ();
Alert (p1 = p2); // The result here is false because the addresses are not equal.
Var p3 = p2;
Alert (p3 = p2); // here is true
 
 
Javascript is an object-based language. Almost everything you encounter is an object!
Var a = 123;
Window. alert (a. constructor); // The Number of the constructor a is displayed.
Var B = 'abc ';
// The constructor of B is String.
Function Person (){}
Window. alert (Person. constructor );
// Here, the constructor of Person is function Function (){}
 
From the above we can see that all the things in javascript are objects !!!
 
 
Both object-based and object-oriented programming are actually based on the object concept. Essentially, there is no difference. Javascript does not have a class, so some people call it a prototype object, because the two concepts play a role in programming.
 
// Define a class (prototype object)
Function Cat (){
 
}
// It looks like a function, mainly to see how to use it
Cat (); // This is a function.
Var cat1 = new Cat (); // here cat1 is an object (instance;
// Define the attributes of this object
Cat1.name = "";
Cat1.age = 3;
Cat1.color = "white ";
// You can see from the above:
// 1. Attributes of objects in JS can be dynamically added
// 2. No restriction on Attributes
 
Example:
Function test (){
Alert (this. v );
}
Var v = 90;
// By default, all functions belong to window objects, and window objects are default objects.
Window. test (); // The output here is 90, because the function is called only after var.
 
 
Examples of differences between using var to define variables and not using var to define variables:
// Use both var and none outside the Function
Var abc = 89;
Function test (){
// In the function, if var is not used, the global abc (that is, the outside) is used)
// If var is used, a new variable is defined in the test () function.
Abc= 900;
}
Alert (abc );
 
There are two methods to access object attributes:
1. Common Mode
Object Name. attribute name
2. Dynamic Access
Object Name ['Property name']
Example:
Function Person () {}// defines a class
Var p1 = new Person (); // create an object
P1.name = "qqzone"; // assign a value to the name attribute of the object
Alert (p1.name); // This is a common access method.
Alert (p1 ['name']); // dynamic access
Var val = 'qq' + 'zone ';
Alert (p1 [val]); // This shows the dynamic benefits. Attribute names can be concatenated by strings.
 
In JS, the object's passing value is the reference method var a = new Person ();
A. name = "test1 ";
Var B = a; // assign the value of a to B. In fact, B references a [transfer address]
B. name = "test2"; // here, B. name is changed, so a. name is also changed.
 
JS has an automatic garbage collection mechanism, and can also be actively deleted. 1. An object is automatically deleted if it has no reference to it.
Var a = new Person ();
Var B = a; // The object a is referenced twice.
B = null; // returns 1 here.
A = null; // There is no reference pointing to the original object.
 
2. delete is used to actively delete an attribute of an object.
Var a = new Person ();
A. name = 'test1 ';
Var B =;
Delete B. name; // delete the name attribute, which cannot be accessed through a. name.

 
 
1. How to define a prototype object
1. Use constructors to define
Basic syntax
Function class name () {// class name is the prototype Object Name

}
Create an object www.2cto.com
Var object name = new class name;
Window. alert (Object Name. constructor); // constructor
 
How can I determine whether an object belongs to a class?
1. Use instanceof
If (a instanceof Person ){
Alert ('yes ');
}
2. Use constructor
If (a. constructor = Person ){
Alert ('yes ');
}

2. Use the factory method to create an Object using new Object and add relevant attributes.
Function Person (){
}
Var p1 = new Person ();
P1.name = 'test ';
3. Use prototype (prototype)
 
 
4. constructor and prototype hybrid mode
 
5. Dynamic Prototype
 
2. this keyword
Function Person (){
// After an attribute is defined here, it is automatically assigned to the new object when an object is created.
This. name = 'test ';
// If this method is used, the property is private.
Var age = 90;
// Use this to indicate that this is a public method of the Person class. You can access the private method.
This. show = function (){
Window. alert (age + ''+ name );
}
// This indicates a private method of Person.
Function show2 (){
}
}
Var p1 = new Person;
Var p2 = new Person;
Alert (p1.name + ''+ p2.name); // both test and this are public attributes.
// P1.show2 (); here show2 (); is a private method, so if you use it here, an error is returned.
 
Iii. Object member methods (functions)
1. Method 1:
Function Person (name, age ){
This. name = name;
This. age = age;
// Output name. this. show is a public function (each object has one) and function name show
This. show = function (n) {// can contain parameters
Alert (this. name );
}
}
2. Method 2:
Function Person (name ){
This. name = name;
}
Function show (){
Alert (this. name );
}
P1 = new Person ();
// In this method, not every object has a function.
P1.abc = show; // The show constructor is passed to p1.abc without parentheses.
P1.abc ();
 
You can also use p1.abc to create a function.
P1.abc = function show (){
Alert (this. name );
}
3. Method 3
Function Person (name ){
This. name = name;
}
Var p1 = new Person ();
// The method created using prototype is shared by all objects.
Person. prototype. age = function (){
This. age = "12 ";
}
Var p2 = new Person ();
P1.age ();
Alert (p1.age); // OUTPUT 12
Alert (p2.age); // No output here, because p2 has not run age (), you can get the age attribute after running;

Iv. Object Class (base class)
Object is the base class of all classes in javascript.
 
Var p1 = new Object (); // directly create an Object through the Object. Here p1 is the Object
P1.name = 'test'; // assign a value to the property of p1
Classes created using objects have the following main attributes:
1. contructor object constructor
2. prototype: Obtain the prototype object and static attribute of the class.

Var a = 10;
// Add an add method to the Number class
Number. prototype. add = function (){
Return this + a; // use this method to add
}
Alert (a. add (10). add (10); // here, after a. add (10) is run, the result is 20. Then, after mongoadd( 10) is run, the result is 30.

Member function summary:
1. the parameter of the member function can be multiple
2. A member function can return no value. If any value is returned, only one value can be returned.
3. Function Overloading is not supported in JS. If multiple functions have the same name, the last one prevails.
4. directly defining a function or variable in js is actually a global function and a global variable. They belong to Windows.
Var a = 90;
Alert (this. a); // The output here is 90, because all belong to Windows.



From Bell's technical blog
Related Article

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.