1. Object
ECMAScript has two development modes: 1. Functional ( procedural ) , 2. Object-oriented (OOP) . Object-oriented languages have a hallmark, that is the concept of classes, and through classes you can create any number of objects with the same properties and methods, while ECMAScript has no concept of classes, so its objects are also the same as objects in class-based languages. different. So how to implement object-oriented programming in JS? In fact, the JS language implements object-oriented programming through a method called prototype .
- create object
There are three ways to create objects in JS:
1. Subface
Syntax: var objectname={property, method};
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Student Object</title>
</head>
<body>
<script>
var student = {
name:"Zhang San",
sex:"男",
age:18,
sayHi:function () {
alert("Hello everyone, I am "+this.name+", gender: "+this.sex+", this year "+this.age+" years old");
}
}
student.sayHi();
</script>
</body>
</html>
Disadvantage : It omits the process of constructor parameter initialization, which brings the disadvantage that the initialized values are consistent, (each instance object does not have its own characteristics)
Solution: The initialized value has always been that each instance object does not have its own characteristics, pseudo classes can solve the problem, and
use combination (constructor + prototype mode) to solve the problem of passing parameters and sharing.
2. Call the constructor of the system to create an object
Syntax: var object name=new Object();
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Student Object</title>
</head>
<body>
<script>
var student = new Object();
student.name="Zhang San"; //Attribute
student.sex="男";
student.age=18;
student.sayHi=function () {
alert("Hello everyone, I am "+this.name+", gender: "+this.sex+", this year "+this.age+" years old");
}
student.sayHi();
</script>
</body>
</html>
Defect: An object is created above, and properties and methods are created. This in the sayHi() method represents the student object
itself. This is the most basic method of creating objects in JS, but there is a disadvantage. If you want to create a similar object, a lot of code will be generated.
Solution: Use the factory pattern method, this method is to solve the problem of a lot of repetition of instantiated objects.
Solution example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Factory method</title>
</head>
<body>
<script>
// method to create object
function createStudent(name,sex,age) {
var student = new Object();
student.name =name;
student.sex=sex;
student.age =age;
student.sayHi=function () {
alert("Hello everyone, I am "+this.name+", gender: "+this.sex+", this year "+this.age+" years old");
}
return student;
}
var person1 =createStudent("张三","男","18");
person1.sayHi();
var person2 = createStudent("李四","女","20");
person2.sayHi();
</script>
</body>
</html>
3. Create objects by custom constructor:
Syntax: function object name(attributes....);
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Constructor</title>
</head>
<body>
<script>
/*
The constructor is also a function, the first letter of the function name is capitalized, and it is mainly used to create an object.
Steps taken:
1. Create an object
2. Give the scope of the constructor to the new object
3. Execute the constructor code
4. Return the object
* */
function Student(name,sex,age) {
this.name=name;
this.sex=sex;
this.age=age;
this.sayHi=function () {
alert("Hello everyone, I am "+this.name+", gender: "+this.sex+", this year "+this.age+" years old");
}
}
var student1 = new Student("张三","男","18");
student1.sayHi();
//constructor constructor instanof
alert(student1.constructor==Student);
alert("instanceof Student:"+(student1 instanceof Student) );//Does the test point to Student
alert("instanceof Object:"+(student1 instanceof Object) );//Test whether it points to Object
</script>
</body>
</html>
Defect: Every time I create a Student, an instance of sayHi() is created for me. A method of the same function has multiple instances of the same
The solution: the prototype method
2. Prototype
Every function we create has a prototype property, which is an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. Logically, it can be understood as follows: prototype is the prototype object of the object created by calling the constructor. The benefit of using prototypes allows all object instances to share the properties and methods it contains. That is, instead of having to define object information in the constructor, this information can be added directly to the prototype.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Prototype </ title>
</head>
<body>
<script>
/*
* In javascript, each function has a prototype property, and prototype is a pointer to an object.
* */
function Student() {//Create constructor
}
Student.prototype.name = "Zhang San";//Add properties to the prototype
Student.prototype.sex="男";
Student.prototype.age="19";
Student.prototype.sayHi=function () {//Add a method to the prototype
alert("Hello everyone, I am "+this.name+", gender: "+this.sex+", this year "+this.age+" years old");
}
var student1 = new Student();//Instantiate the object
student1.sayHi();
var student2 = new Student ();
student2.sayHi();
</script>
</body>
</html>
2.1 The relationship between the constructor and the prototype pattern is shown in the figure:
2.2 Prototype-Inheritance
Implementing inheritance in JS uses the relationship of the prototype chain to implement inheritance. Every function has a prototype object, and every instance object has a pointer to the prototype.
Prototype Chain: A chain of instances and prototypes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prototype chain</title>
</head>
<body>
<script>
function Humans() {
this.foot=2;
}
Humans.prototype.getFoot=function () {
return this.foot;
}
function Man() {
}
Man.prototype = new Humans(); //Change the prototype point (inherit the Humans object)
var man1 = new Man ();
alert(man1.getFoot());
alert(man1 instanceof Humans);
</script>
</body>
</html>
The prototype chain problem is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prototype chain</title>
</head>
<body>
<script>
function Humans() {
this.name="张三";
this.fruit=["Banana","Apple","Pear"];
}
function Man() {
}
Man.prototype = new Humans(); //Inherit Humans
var man1 = new Man ();
man1.fruit.push("Dragon Fruit");
alert(man1.fruit);
var man2 = new Man ();
alert(man2.fruit);
/*
Question 1: For reference types, prototype properties are shared by all instance objects.
Question 2: When creating a subclass, you cannot pass parameters to the parent class.
* */
</script>
</body>
</html>
Solution: Use the borrowed constructor to inherit the following solution instance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Borrowed constructor</title>
</head>
<body>
<script>
//Question 1: For reference types, prototype properties are shared by all instance objects.
//solve problem 1
function Humans() {
this.name="张三";
this.fruit=["Banana","Apple","Pear"];
}
function Man() {
Humans.call(this); //Replace this with the Humans object. Let each Man object have a separate fruit space.
}
// Man.prototype = new Humans(); //Inherit Humans
var man1 = new Man ();
man1.fruit.push("Dragon Fruit");
alert(man1.fruit);
var man2 = new Man ();
alert(man2.fruit);
</script>
</body>
</html>
In the call method in the figure, you can replace this with the Humans object. If the Humans object has parameters , you can also pass the Humans object parameters.
Syntax: object.call(this,parameters...);
Advantages: Solve the problem of attribute inheritance, and the value is not repeated.
Defect: Methods in parent classes cannot be inherited.
Solution: Combined inheritance: Combined inheritance is prototypal inheritance + borrowing inheritance.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Composition inheritance</title>
</head>
<body>
<script>
function Humans(name) {
this.name=name;
this.fruit=["Banana","Apple","Pear"];
}
Humans.prototype.getName=function () {
return this.name;
}
function Man(name) {
//Inherit Humas and pass a name parameter at the same time
Humans.call(this,name); //Inherit properties
this.head=1;
}
Man.prototype = new Humans(); //Inheritance method
Man.prototype.getHead=function () {
return this.head;
}
var man1 = new Man("Li Si");
man1.fruit.push("Dragon Fruit");
alert(man1.fruit);
alert(man1.getName());
alert(man1.getHead());
var man2 = new Man("Wang Wu");
alert(man2.fruit);
alert(man2.getName());
alert(man2.getHead());
</script>
</body>
</html>