Js --- object-oriented OOP

Source: Internet
Author: User
Object-Oriented Programming ------- a simple understanding is to divide the scope of javascript into various objects, and divide the objects again below. The starting point of programming is mostly objects, or object-based. The object contains both variables, webpages, windows, etc. The object can be text, table... SyntaxHighlighter. all ();

Object-Oriented Programming ------- a simple understanding is to divide the scope of javascript into various objects, and divide the objects again below. The starting point of programming is mostly objects, or object-based. The object includes both variables, webpages, windows, etc.
 
Object meaning
Objects can be text, forms, and so on. The object contains
Attribute ------- some specific properties of an object
Method ------- what the object can do
Event ------- responds to events on objects
Note: The object is only a special type of data.

2. Basic Object

From the perspective of data type
Number
String
Array
Math
Data
Here I just briefly listed part, specific can refer to the http://www.w3school.com.cn/js/js_obj_intro.asp
 
However, I 'd like to talk about a Popular Front-end interview question, I also asked me when I first came to Baidu for an interview (the source of the question seems to be in the document of a web Front-end R & D Engineer's path to programming capability growth)
Nonsense ------ question:
"Output string-Today is the day of the week"
 
Answer 1:
 
Js Code
Var _ str = "";
Var _ today = new Date (). getDay ();
If (_ today = 0 ){
_ Str = "Today is Sunday ";
} Else if (_ today = 1 ){
_ Str = "Today is Monday ";
} Else if (_ today = 2 ){
_ Str = "Today is Tuesday ";
} Else if (_ today = 3 ){
_ Str = "Today is Wednesday ";
} Else if (_ today = 4 ){
_ Str = "Today is Thursday ";
} Else if (_ today = 5 ){
_ Str = "Today is Friday ";
} Else if (_ today = 6 ){
_ Str = "Today is Saturday ";
}
Answer 2:
 
Js Code
Var _ str = "Today is the week ";
Js Code
Var _ today = new Date (). getDay ();
Switch (_ today ){
Case 0:
_ Str + = "day ";
Break;
Case 1:
_ Str + = "1 ";
Break;
Case 2:
_ Str + = "2 ";
Break;
Case 3:
_ Str + = "3 ";
Break;
Case 4:
_ Str + = "4 ";
Break;
Case 5:
_ Str + = "5 ";
Break;
Case 6:
_ Str + = "6 ";
Break;
 
}
Answer 3:
 
Js Code
Var _ arr = new Array ("day", "one", "two", "three", "four", "five", "Six ");
Var _ today = new Date (). getDay ();
Var _ str = "today is a week" + _ arr [_ today];
 
Answer 4:
 
Js Code
Var _ str = "Today is the week" + "May 25, 1234". charAt (new Date (). getDay ());
3.
The following describes how to create classes and objects.
Simple Method

Js Code
Var people = {};
Js Code
People. name = "steven ";
People. age = 23;
People. getName = function (){
Return "People's name is" + this. name;
};
Console. log (people. getName (); // People's name is steven
Console. log (people. age); // 23
Js Code
The bad thing is: when multiple objects are created, a lot of redundant code is generated, and the coupling is not high.
 

Factory Mode
Js Code
Function makePeople (name, age, job ){
Var _ obj = {};
_ Obj. name = name;
_ Obj. age = age;
_ Obj. job = job;
_ Obj. getName = function (){
Return "People's name is" + this. name;
}
Return _ obj;
}
 
Var webdesigner = makePeople ("steven", 23, "wendesigner ");
Console. log (webdesigner. getName); // People's name is steven
Console. log (webdesigner. job) // wendesigner
 

Js Code
The bad thing is: frequent instantiation.

Prototype
Js Code
Function People (){};
People. prototype = {
Constructor: People,
Name: "steven ",
Age: 23,
Job: "webdesigner ",
GetName: function (){
Return "People's name is" + this. name;
}
}
 
Var webdesign = new People ();
Var carman = new People ();
Console. log (webdesign. getName (); // People's name is steven
Console. log (carman. getName (); // People's name is steven
 
Js Code
The bad thing is that initialization parameters cannot be passed, and all attributes and methods of the prototype will be shared by all instances.

Hybrid mode (prototype + constructor)
 
 
 
Js Code
Function People (name. age. job ){
Js Code
This. name = name;
Js Code
This. age = age;
This. job = job;
};
People. prototype = {
Constructor: People,
GetName: function (){
Return "People's name is" + this. name;
}
}
 
Var webdesigner = new People ("steven", 23, "webdesigner ");
Var carman = new People ("zyc", 24, "carman ");
Console. log (webdesigner. getName () // People's name is steven
Console. log (carman. getName () // People's name is zyc
 
Js Code
The bad thing is that the attributes and methods of objects are mostly public.
 
 
Private variable mode under closure
Java code
(Function (){
Var name = "";
People = function (val ){
Name = val;
};
People. prototype = {
Constructor: People,
GetName: function (){
Return "People's name is" + name;
}
};
})();
 
 
Var webdesigner = new People ("steven ");
Console. log (webdesigner. name); // undefined
Console. log (webdesigner. getName (); // People's name is steven
 
Var carman = new People ("zyc ");
Console. log (carman. name); // undefined
Console. log (carman. getName (); // People's name is zyc
 

Js Code
The bad thing is that the Code at the initial level is not very understandable.

Author "zhangyaochun"
 

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.