Learn Javascript object-oriented from Interview Questions (create object)

Question:
Copy codeThe Code is as follows:
Try {
Var me = Man ({fullname: "Xiaohong "});
Var she = new Man ({fullname: "Xiaohong "});
Console. group ();
Console.info ("My name is:" + me. attr ("fullname") + "\ n my gender is:" + me. attr ("gender "));
Console. groupEnd ();
/* ------ [Execution result] ------
My name is: Xiaohong
My gender is: <not entered by the user>
------------------*/
Me. attr ("fullname", "James ");
Me. attr ("gender", "male ");
Me. fullname = "wuchai ";
Me. gender = "demon ";
She. attr ("gender", "female ");
Console. group ();
Console.info ("My name is:" + me. attr ("fullname") + "\ n my gender is:" + me. attr ("gender "));
Console. groupEnd ();
/* ------ [Execution result] ------
My name is: James
My gender is: Male
------------------*/
Console. group ();
Console.info ("My name is:" + she. attr ("fullname") + "\ n my gender is:" + she. attr ("gender "));
Console. groupEnd ();
/* ------ [Execution result] ------
My name is: Xiaohong
My gender is: Female
------------------*/
Me. attr ({
"Words-limit": 3,
"Words-emote": "smile"
});
Me. words ("I like watching videos. ");
Me. words ("our office is so beautiful. ");
Me. words ("There are so many beautiful women in the video! ");
Me. words ("I usually watch Youku! ");
Console. group ();
Console. log (me. say ());
/* ------ [Execution result] ------
James smiled: "I like watching videos. Our office is so beautiful. There are so many beautiful women in the video! "
------------------*/
Me. attr ({
"Words-limit": 2,
"Words-emote": "Shout"
});
Console. log (me. say ());
Console. groupEnd ();
/* ------ [Execution result] ------
James shouted, "I like watching videos. Our office is so beautiful. "
------------------*/
} Catch (e ){
Console. error ("execution error, error message:" + e );
}

Knowledge point:
(1) JS object-oriented basics: ECMA-262 defines the object as: "unordered set of attributes, its attributes can contain basic values, objects or functions ".
(2) how to create an object in JS:
(A) Factory mode: use functions to encapsulate the details of creating objects with specific interfaces.
Function createPerson (name, age, job ){
Var o = new Object ();
O. name = name;
O. age = age;
O. job = job;
O. sayName = function (){
Alert (this. name );
};
Return o;
}
Var person1 = createPerson ("Nicholas", 29, "Software Engineer ");
Var person2 = createPerson ("Greg", 27, "Doctor ");
Disadvantage: although the factory mode solves the problem of creating multiple acquaintance objects, it does not solve the problem of Object Recognition (that is, how to know the type of an object ).
(B) constructor mode: constructor in ECMAScript can be used to create objects of specific types. You can create custom constructor to define attributes and methods of the custom object type.
Function Person (name, age, job ){
This. name = name;
This. age = age;
This. job = job;
This. sayName = function (){
Alert (this. name );
};
}
Var person1 = new Person ("Nicholas", 29, "Software Engineer ");
Var person2 = new Person ("Greg", 27, "Doctor ");
Disadvantage: the main problem with using constructor is that each method must be re-created on each instance. Don't forget -- functions in ECMAScript are objects, so every function defined,
It is to instantiate an object.
(C) prototype mode: each function we create has a prototype attribute, which is a pointer pointing to an object, the purpose of this object is to include
Attributes and Methods shared by all instances. The advantage of using a prototype object is that all objects can share its attributes and methods.
Function Person (){
}
Person. prototype. name = "Nicholas ";
Person. prototype. age = 29;
Person. prototype. job = "Software Engineer ";
Person. prototype. sayName = function (){
Alert (this. name );
};
Var person1 = new Person ();
Person1.sayName (); // "Nicolas"
Var person2 = new Person ();
Person2.sayName (); // "Nicolas"
Alert (person1.sayName = person2.sayName); // true
Disadvantage: All attributes in the prototype are shared by many instances, which is suitable for functions. However, for the attribute of the reference type value, the problem is more prominent.
(D) combined use of the constructor mode and prototype mode: the most common way to create a custom type is to use the constructor mode and prototype mode in combination. The constructor mode is used to define instance attributes,
The prototype mode is used to define methods and shared attributes.
Function Person (name, age, job ){
This. name = name;
This. age = age;
This. job = job;
This. friends = ["Shelby", "Court"];
}
Person. prototype = {
Constructor: Person,
SayName: function (){
Alert (this. name );
}
};
Var person1 = new Person ("Nicholas", 29, "Software Engineer ");
Var person2 = new Person ("Greg", 27, "Doctor ");
Person1.friends. push ("Van ");
Alert (person1.friends); // "Shelby, Court, Van"
Alert (person2.friends); // "Shelby, Court"
Alert (person1.friends === person2.friends); // false
Alert (person1.sayName === person2.sayName); // true
Answer:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Style type = "text/css" rel = "stylesheet">
</Style>
<Title> </title>
</Head>
<Body>
</Body>
<Script type = "text/javascript">
Window. onload = function ()
{
Var Man;
// ++ Answer area ++
Man = function (obj ){
If (! (This instanceof Man ))
{
Return new Man (obj );
}
This. attrObj = obj || {};
This. wordsObj = [];
}
Man. prototype = {
Constructor: Man,
Words: function (word ){
Word! = Undefined & this. wordsObj. push (word );
},
Attr: function (attribute, attributeValue)
{
Var defaultVaule = "<user not input> ";
If (arguments. length = 2 ){
This. attrObj [attribute] = attributeValue;
}
Else if (! (Attribute instanceof Object ))
{
If (this. attrObj [attribute] === undefined ))
{
Return defaultVaule;
}
Else
{
Return this. attrObj [attribute];
}
}
Else {
For (property in attribute)
{
This. attrObj [property] = attribute [property];
}
}
},
Say: function ()
{
Var limit = this. attrObj ['words-limit'],
OutputString,
WordsLen = this. wordsObj. length;
OutputString = this. attr ("fullname") + this. attr ("words-emote") + ":";
For (var I = 0; I <limit; I ++)
{
OutputString + = this. wordsObj [I];
}
Return outputString;
}
};
// ++
Try {
Var me = Man ({fullname: "Xiaohong "});
Var she = new Man ({fullname: "Xiaohong "});
Console. group ();
Console.info ("My name is:" + me. attr ("fullname") + "\ n my gender is:" + me. attr ("gender "));
Console. groupEnd ();
/* ------ [Execution result] ------
My name is: Xiaohong
My gender is: <not entered by the user>
------------------*/
Me. attr ("fullname", "James ");
Me. attr ("gender", "male ");
Me. fullname = "wuchai ";
Me. gender = "demon ";
She. attr ("gender", "female ");
Console. group ();
Console.info ("My name is:" + me. attr ("fullname") + "\ n my gender is:" + me. attr ("gender "));
Console. groupEnd ();
/* ------ [Execution result] ------
My name is: James
My gender is: Male
------------------*/
Console. group ();
Console.info ("My name is:" + she. attr ("fullname") + "\ n my gender is:" + she. attr ("gender "));
Console. groupEnd ();
/* ------ [Execution result] ------
My name is: Xiaohong
My gender is: Female
------------------*/
Me. attr ({
"Words-limit": 3,
"Words-emote": "smile"
});
Me. words ("I like watching videos. ");
Me. words ("our office is so beautiful. ");
Me. words ("There are so many beautiful women in the video! ");
Me. words ("I usually watch Youku! ");
Console. group ();
Console. log (me. say ());
/* ------ [Execution result] ------
James smiled: "I like watching videos. Our office is so beautiful. There are so many beautiful women in the video! "
------------------*/
Me. attr ({
"Words-limit": 2,
"Words-emote": "Shout"
});
Console. log (me. say ());
Console. groupEnd ();
/* ------ [Execution result] ------
James shouted, "I like watching videos. Our office is so beautiful. "
------------------*/
} Catch (e ){
Console. error ("execution error, error message:" + e );
}
}
</Script>
</Html>