Three methods of inheritance in JavaScript

Three methods of inheritance in JavaScript

inherit

1. What is inheritance

Inheritance: First of all, inheritance is a relationship, the relationship between classes. There are no classes in JS, but classes can be simulated through constructors, and then inheritance can be achieved through prototypes.

  • Inheritance is also for data sharing, and inheritance in js is also for data sharing

We can think of the prototype, and its two functions are:

  • Prototype function 1: data sharing, saving memory space
  • The second role of prototype: to achieve inheritance

Inheritance is a relationship: the relationship between the parent class level and the class level

example:

Person categories: name, gender, age, eating, sleeping

Student categories: name, gender, age, eating, sleeping, and studying behaviors

Teacher category: name, gender, age, meals, sleep, salary, teaching behavior

Programmer: Name, Gender, Age, Eating, Sleeping, Salary, Writing Code

Driver category: name, gender, age, meals, sleep, salary, driving

Animal categories: weight, color, eating

Dog categories: weight, color, eating, biting

Erha category: weight, color, eating, biting to make the owner happy, woof woof, you are so handsome

Object-oriented features: encapsulation, inheritance, polymorphism

Encapsulation: It is to wrap a value and store it in a variable - to wrap a bunch of repeated code in a function - to wrap a series of attributes in an object - to wrap some functions (methods) with similar functions in an object - to wrap many similar objects in a js file - Encapsulation

Polymorphism: An object has different behaviors, or the same behavior produces different results for different objects. To have polymorphism, you must first have inheritance. Polymorphism can be simulated in JS, but it will not be used or simulated.

2. Three methods of JavaScript inheritance

Constructor property inheritance: borrowing constructors

When inheriting, you don't need to change the prototype's pointer, you can just call the parent's constructor to assign values ​​to the properties.

—— Borrowing constructor: Take the constructor of the parent to be inherited and use it.

Borrowing constructor:

Constructor name.call(current object, attribute, attribute, attribute...);

Advantages: Solve the problem of attribute inheritance and non-duplicate values

Defect: Methods in parent classes cannot be inherited

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

function Student (name, age) {
  // Borrow the constructor to inherit the attribute member Person.call(this, name, age)
}

var s1 = Student('张三', 18)
console.log(s1.type, s1.name, s1.age) // => human Zhang San 18

Examples: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    function Person(name, age, sex, weight) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.weight = weight;
    }
    Person.prototype.sayHi = function () {
      console.log("Hello");
    };
    function Student(name,age,sex,weight,score) {
      //Borrow the constructor Person.call(this,name,age,sex,weight);
      this.score = score;
    }
    var stu1 = new Student("Xiaoming",10,"male","10kg","100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);

    var stu2 = new Student("Xiaohong",20,"Female","20kg","120");
    console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);

    var stu3 = new Student("Xiao Li",30,"Yao","30kg","130");
    console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);


  </script>
</head>
<body>


</body>
</html>

Prototype method inheritance of constructors: copy inheritance (for-in)

Copy inheritance; copy the properties or methods of one object directly to another object

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}

// The prototype object copies and inherits the prototype object members for(var key in Person.prototype) {
  Student.prototype[key] = Person.prototype[key]
}

var s1 = Student('张三', 18)

s1.sayName() // => hello Zhang San

Examples: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    //Copy inheritance; copy the properties or methods of an object directly to another object function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="Male";
    Person.prototype.height=100;
    Person.prototype.play = function () {
      console.log("having fun");
    };
    var obj2={};
    //Person has a prototype in its construction. Prototype is an object. In it, age, sex, height, and play are all properties or methods of the object. for(var key in Person.prototype){
      obj2[key]=Person.prototype[key];
    }
    console.dir(obj2);
    obj2.play();



  </script>
</head>
<body>


</body>
</html>

Another way of inheritance: prototype inheritance

Prototype inheritance: changing the prototype's direction

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}

//Use the characteristics of prototype to achieve inheritance Student.prototype = new Person()

var s1 = Student('张三', 18)

console.log(s1.type) // => human

s1.sayName() // => hello Zhang San

Combination inheritance: prototype + borrowed constructor inheritance 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>


    //Prototype inheritance //Borrowing constructor to implement inheritance //Combined inheritance: prototype inheritance + borrowing constructor inheritance function Person(name, age, sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    Person.prototype.sayHi = function () {
      console.log("Sawadee Ka");
    };
    function Student(name,age,sex,score) {
      //Borrowing constructor: Problem of duplicate attribute values ​​Person.call(this,name,age,sex);
      this.score=score;
    }
    //Change the prototype pointing to ---- inheritance Student.prototype = new Person(); //Do not pass the value Student.prototype.eat = function () {
      console.log("eat");
    };
    var stu=new Student("小黑",20,"男","100分");
    console.log(stu.name,stu.age,stu.sex,stu.score);
    stu.sayHi();
    stu.eat();
    var stu2=new Student("小黑黑",200,"男人","1010分");
    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
    stu2.sayHi();
    stu2.eat();

    //Both properties and methods are inherited</script>
</head>
<body>


</body>
</html>

Inheritance Summary

Prototype inheritance: changing the prototype's direction

Borrowing constructor inheritance: mainly solves the problem of attributes

Combined inheritance: prototype inheritance + borrowed constructor inheritance

It can solve both attribute problems and method problems

Copy inheritance: It is to copy the attributes or methods that need to be shared in an object to another object by directly traversing them.

Summarize

This concludes this article about the three methods of JavaScript inheritance. For more information about JavaScript inheritance methods, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of native Javascript inheritance methods and their advantages and disadvantages
  • Diving into JS inheritance
  • Detailed explanation of 6 ways of js inheritance
  • Several ways to implement inheritance in JavaScript
  • Five ways to implement inheritance in js
  • Examples of several inheritance methods in JavaScript
  • Detailed explanation of JavaScript inheritance
  • JavaScript object-oriented class inheritance case explanation

<<:  MySQL database operation and maintenance data recovery method

>>:  Detailed explanation of the installation and use of Linux scheduled tasks crontabs

Recommend

Share 6 invitation codes for unlimited activation of Alibaba Cloud Disk. If you don't believe me, you can activate Alibaba Cloud Disk.

It has been a long time since the last update of ...

Installation and uninstallation of MySQL 5.7 decompressed version and summary of common problems

1. Installation 1. Download Go to the MySQL offic...

Calling Baidu Map to obtain longitude and latitude in Vue

In the project, it is necessary to obtain the lat...

W3C Tutorial (3): W3C HTML Activities

HTML is a hybrid language used for publishing on ...

Why does your height:100% not work?

Why doesn't your height:100% work? This knowl...

Detailed explanation of JS ES6 variable destructuring assignment

Table of contents 1. What is deconstruction? 2. A...

20 excellent foreign web page color matching cases sharing

This article collects 20 excellent web page color ...

How to design and create adaptive web pages

With the popularization of 3G, more and more peop...

Some findings and thoughts about iframe

This story starts with an unexpected discovery tod...

MySQL and MySQL Workbench Installation Tutorial under Ubuntu

Ubuntu install jdk: [link] Install Eclipse on Ubu...

Use of Docker UI, a Docker visualization management tool

1. Introduction to DockerUI DockerUI is based on ...

Detailed explanation of how to automatically add prefix plugin after CSS3 packaging: autoprefixer

The project scaffolding built with vue-cli has al...

Nginx forwarding based on URL parameters

Use scenarios: The jump path needs to be dynamica...

From CSS 3D to spatial coordinate axis with source code

One time we talked about the dice rolling game. A...

vue+element-ui implements the head navigation bar component

This article shares the specific code of vue+elem...