Object-oriented design in JavaScript

According to the definition of W3C School, Javascript is an object-oriented language. Although there is no class, there are objects everywhere. It can be understood that there is only a definition but no declaration, just use it directly. Each object in it can be understood as a set of Keys -A combination of Value.

Attached is a description from W3C School:
Requirements for object-oriented languages ​​
An object-oriented language needs to provide developers with four basic capabilities:
Encapsulation - Store related information (whether data or methods) Ability in objects
Aggregation - the ability to store one object within another object
Inheritance - the ability to derive the properties and methods of a class from another class (or classes)
Polymorphism - the ability to write programs that can be used in multiple ways Method The ability to run a function or method
ECMAScript supports these requirements and can therefore be considered object-oriented.

The following is a relatively regular object definition (the following examples refer to >):
var person = new Object();
person.name = "Horky";
person.age = 40;
person.job = "Software Engineer";

person.sayName = function(){
document.write(this.name);
}

Calling method:
person.sayName();

document.write("

Age: ");
document.write(person.age);

document.write("

Job: ");
document.write (person["job"]);

Well, yes, all properties are public, and there are two different ways to access properties. (The restriction on accessibility can be determined by the attributes of the property) to set.)

Another way is more casual and to the point of defining Key-Value, but older versions of browsers may not support it:
var person = (
name: "Horky",
age: 40,
job: "Software Engineer",

sayName: function(){
document.write(this.name);
}
};

Because the nature of Javascript variables is loose type, to put it bluntly, it is anarchic type. So It is not necessary not to give a complete definition at the beginning, but it is also allowed as follows (required for display, never recommended):
var person = new Object();

person.name = "Horky";
person. sayName = function()
{
document.write(this.name);
}

person.sayName();
person.age = 40;
document.write("

Age: ") ;
document.write(person.age);
person.job = "Software Engineer";
document.write("

Job: ");
document.write(person["job"]) ;

It’s not without limitations. If the first sentence is changed to the following, it won’t work:
var person; or var person = "Undefined";
The reason is that basic data types and reference types are still clearly defined in Javascript.

Recall that JavaScript has object-oriented features mentioned earlier. Needless to say, the first two points are obvious, and the reference type is more obvious. I will talk about the third point later. Regarding polymorphism, it is actually a bit far-fetched. Personally, I think it is more like C /Variable parameter function in C++. Because polymorphism here is for functions. That is to say, the parameters of a function can be very arbitrary, and JavaScript is too lazy to limit it, leaving everything to the developer. As a result, a polymorphism is created Let’s give an example by combining constructors:
function Person(name, age, job)
{
this.name = "Mr Nobody!";
this.age = 0;
this.job = "Hard to say! ";

switch(arguments.length)
{
case 3:
this.job = job;
case 2:
this.age = age;
case 1:
this.name = name;
break;
}
this.introduceSelf = function()

{

document.write("

My name is: "+this.name);

document.write("

"+ this.age+" years old!");

document.write("

And, my job is : "+this.job);
}
}

var horky = new Person("Horky ",40,"Software Engineer");
var arthas = new Person("Arthas",22);
var nobody = new Person();

This function Person() is a constructor function, creating a Person object And return. Different initializations are performed based on the different parameters passed in, which is a manifestation of polymorphism.

Expand, if an object is passed in, how to implement copying? This is the pattern of prototypal inheritance ( Refer to > 6.3.4).
Add a global function:
function object(o)
{
function F() {};
F.prototype = o;
return new F();
}

Then try the following two new objects:
var horky_alias = object(horky);
var arthas_alias = object(horky, {name:{value:"Arthas"}});
The second object when copying horky , by the way, the name has also been changed.

The core of how it works is on F.prototype. Because of the existence of this special pointer, all this is possible. Each function has a prototype, which is a pointer to a certain A pointer to an object, and this object contains properties and methods that can be shared by all instances, much like the concept of flyweight. Let’s talk about inheritance. Inheritance in JavaScript, to put it bluntly, is to make sub-objects Access the parent object. So there are two important points: the child object needs to have an instance of the parent object, which is prototype. So a typical child object is defined:

function Boy(name, age, job)

{
this. sex = "Male";
this.prototype = new Person(name,age,job);
this.introduceSelf = function()

{

this.prototype.introduceSelf();

document.write("< ;p /> I am BOY!");
}
}

var boy = new Boy("A",3);

If you feel that using prototype is too low-level and a bit hacky, you can also Use "borrowing constructors" to achieve simpler inheritance.