JavaScript object-oriented-implementing inheritance based on function forgery

Because there are some shortcomings in the way of implementing inheritance based on the prototype chain, people have adopted another way to implement inheritance-implementing inheritance based on function forgery. The idea of ​​this technique is to call the parent class's constructor inside the child class's constructor.

Implementation of inheritance based on function forgery

Because in JavaScript, a function is an object that executes code in a specific environment, so we can use the call() or apply() method To execute the constructor of the parent class object on the child class object. Let’s look at the following example:

/* 创建父类 */
function Parent(){
  this.color = ["red","blue"];
}
 
/* 创建子类 */
function Child(){
  // 继承父类的属性
  Parent.call(this);
}

In the above code, we first create a parent class Parent, then create a subclass Child, and use Parent.call(this); inside the subclass Complete inheritance.

In the article Properties of Functions, we have introduced the call() and apply() methods. The function of these two methods is to call functions in a specific scope, which means that these two methods can Call a function by its name. Here we use Parent.call(this); inside Child to complete inheritance. This sentence means calling the constructor of the parent class in the child class. This at this time refers to the Child object (in Child this should be the object that executes Child), so it is equivalent to having this.color = ["red", "blue"]; in Child, which is equivalent to having this.color attribute in Child, which is also a disguised form. The inheritance is completed.

We can verify it through the following method:

var c1 = new Child();     //创建子类对象c1
c1.color.push("Green");   //为c1添加新的颜色
console.info(c1.color);   //控制台输出：red,blue,Green
 
var c2 = new Child();     //创建子类对象c2
console.info(c2.color);   //控制台输出：red,blue

In the above code, we created the subclass object c1 and added a new color "Green" to it, so it will Output in the console: "red, blue, Green". Then we created object c2. Because no new color was added to it, it will only output the color inherited from the parent class in the console: "red, blue".

Every time new Child is called, it is equivalent to performing an object attribute setting. At this time, each object has a color attribute in the space, but does not exist in the prototype, so color will not be shared. . This solves the problem of reference type variables in prototype chain inheritance.

Subclass constructor

Another disadvantage of prototype chain inheritance is that the constructor of the parent class cannot be called from the subclass, so there is no way to assign attributes in the subclass to the parent class. middle. This problem can be solved well through function forgery. Let’s look at the following example:

// 创建父类
function Parent(name){
  this.name = name;
}
 
//创建子类
function Student(name,age){
  //使用伪造的方式就可以把子类的构造函数参数传递到父类中
  Parent.call(this,name); //调用父类的属性
  this.age = age;
}
 
var s1 = new Student("Leon",22);
var s2 = new Student("Ada",25);
 
console.info(s1.name + "," + s1.age);  // 控制台输出：Leon,22
console.info(s2.name + "," + s2.age);  // 控制台输出：Ada,25

In the above code, the subclass Student calls the name attribute of the parent class through function forgery, which actually adds a name attribute to the subclass. Here, the call() method passes the parameter name of the Student class to the parent class, and the completed operation is equivalent to this.name = name;. And this name attribute is the name attribute of the subclass, not the name attribute of the parent class.

Problems in inheritance based on function forgery

In the above discussion, we only talked about the subclass inheriting the attributes of the parent class, so how does the subclass inherit the methods of the parent class? As we said before, we usually set the method in the prototype. For example, there is a say() method in the parent class. The code is as follows:

// 创建父类
function Parent(name){
  this.name = name;
}
 
// 父类的say()方法
Parent.prototype.say = function(){
  console.info(this.name);
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

Because the method of using function forgery will not complete the subclass Student The prototype points to the parent class Parent, so after the subclass inherits the parent class, the say() method does not exist. The way to solve this problem is to place the say() method in the Parent and use the this keyword to create it.

// 创建父类
function Parent(name){
  this.name = name;
  // 父类的say()方法
  this.say = function(){
    console.info(this.name);
  }
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

Although doing this allows the subclass to inherit the say() method of the parent class, it creates another problem: every time a subclass object is created, a say() method will be generated, which will take up a lot of memory space.

Since there are also flaws in implementing inheritance based on function forgery, we will not use this method alone to complete inheritance, but will use a combination-based method to implement inheritance. We will discuss this in the next article Introduce this inheritance method.

The above is the content of JavaScript object-oriented - inheritance based on function forgery. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!