What is object orientation
Disassemble the functions needed to be completed into several classes and create instances by classes. Specific interaction processes can be added in instances with corresponding attributes and methods.
Js is based on object oriented construction. Windows objects, for example, have many properties and methods.
Create an object
The factory pattern
Multiple similar objects can be created, but there is no way to recognize objects because all objects created are prototyped as Objects.
function people(name,age){
let obj = new Object(a); obj.name = name; obj.age = age; obj.sayName =function(){
return this.name;
}
return obj;
}
let tom = people('Tom'.12);
let lili = people('Lili'.12);
console.log(tom.constructor);//Object
console.log(lili.constructor);//Object
Copy the codeConstructor pattern
Fixed the problem of not recognizing objects, but creating new methods without generating an instance.
function People(name,age){
this.name = name;
this.age = age;
this.sayName = function(){retrun this.name;}
}
let tom = new People('TOM'.12);
console.log(tom.constructor);//People
Copy the codeThe prototype pattern
By adding properties and methods to the stereotype, all instance objects can be shared.
function People(name,age){
this.name = name;
this.age = age;
}
People.prototype.sayName = function(){return this.name}
let tom = new People('TOM'.12);
console.log(tom.sayName());//TOM
Copy the codeencapsulation
Low coupling and high cohesion
polymorphism
There’s overloading and overwriting.
Overloading is a method with the same name that performs different logic depending on the type and number of arguments passed in.
Overrides are methods with the same name, but otherwise, subclasses can override methods of their parent class.
inheritance
Inheritance means that a subclass inherits the attributes and methods of its parent class, while a subclass can also have its own attributes and methods.
Prototype inheritance
Points the prototype of a subclass to an instance object of the parent class.
Disadvantages: Subclass instance objects all have the same parent instance object. The attributes and methods of the parent class are shared.
// Constructor of the parent class
function Parent(){
this.name = 'Tom';
this.age = 12;
this.arr = [1.2.4];
}
Parent.prototype.sayName = function(){
console.log(this.name);
}
// Subclass constructor
function Child(grade){
this.grade = grade;
}
// The prototype of the subclass constructor points to an instance object of the parent class
Child.prototype = new Parent();
let child1 = new Child(1);
let child2 = new Child(2);
console.log(child1.grade);/ / 1
child1.sayName();//Tom
console.log(child2.grade);/ / 2
child2.sayName();//Tom
child1.arr.push(11);
console.log(child1.arr, child2.arr);/ /,2,4,11 [1] [1,2,4,11]
Copy the codeCombination of inheritance
The use of constructors and stereotypes.
The instance objects of a subclass are different from the parent instance objects, so the attributes of the parent class are separated, and arguments can be passed to the constructor of the parent class.
But this method causes the parent class’s constructor to execute twice
Parent.call() is called when a new Child is executed. This returns a Parent object, so the Child object has name,age, and arr.
// Constructor of the parent class
function Parent(name,age){
this.name = name;
this.age = age;
this.arr = [1.2.4];
}
Parent.prototype.sayName = function(){
console.log(this.name);
}
// Subclass constructor
function Child(grade,name,age){
Parent.call(this,name,age);
this.grade = grade;
}
// The prototype of the subclass constructor points to an instance object of the parent class
Child.prototype = new Parent();
let child1 = new Child(1.'TOM'.12);
let child2 = new Child(2.'LILI'.13);
console.log(child1.grade);/ / 1
child1.sayName();//TOM
console.log(child2.grade);/ / 2
child2.sayName();//LILI
child1.arr.push(11);
console.log(child1.arr, child2.arr);/ /,2,4,11 [1] [1, 4-trichlorobenzene]
Copy the codeParasitic combinatorial inheritance
Solves the problem of composite inheritance of duplicate attributes.
Makes the prototype of the subclass constructor point to the prototype of the parent class. This prevents the same parent class attributes from being generated repeatedly.
Note modifying the constructor direction.
// Constructor of the parent class
function Parent(name,age){
this.name = name;
this.age = age;
this.arr = [1.2.4];
}
Parent.prototype.sayName = function(){
console.log(this.name);
}
// Subclass constructor
function Child(grade,name,age){
Parent.call(this,name,age);// Get all attributes of the parent instance
this.grade = grade;
}
// The prototype of the subclass constructor points to the prototype of the superclass constructor
Child.prototype = Parent.prototype;
Child.prototype.constructor = Child;
let child1 = new Child(1.'TOM'.12);
let child2 = new Child(2.'LILI'.13);
console.log(child1.grade);/ / 1
child1.sayName();//TOM
console.log(child2.grade);/ / 2
child2.sayName();//LILI
child1.arr.push(11);
console.log(child1.arr, child2.arr);/ /,2,4,11 [1] [1, 4-trichlorobenzene]
Copy the codeES6 extends
ES6 extend is actually a syntactic sugar inherited from parasitic combinations.
class Parents{
constructor(name){
this.name = name;
this.arr = [1.2.3];
}
say(){
console.log(this.name); }}class Child extends Parents{
constructor(name,age){
super(name);// Call the parent constructor
this.age = age; }}let child1 = new Child('Tom'.12);
child1.arr.push(11);/ /,2,3,11 [1]
child1.say();//Tom
Copy the code