Explore JavaScript prototype data sharing and method sharing implementation

Data Sharing

What kind of data needs to be written in the prototype?

The data that needs to be shared can be written in the prototype

One of the functions of prototype: data sharing

Attributes need to be shared, and methods also need to be shared:

Data that does not need to be shared should be written in the constructor
The data that needs to be shared is written in the prototype

Let’s look at a case

Data Sharing Cases

Each student's name, age, and gender are unique. We need to set

All students are 188cm tall and weigh 55kg.
All students must write 500 lines of code every day. All students must eat a 10-pound watermelon every day.

You can write the common data into the prototype

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    function Student(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    // All students' height is 188, and all students' weight is 55
    // All students must write 500 lines of code every day // All students must eat a 10-pound watermelon every day // Prototype object Student.prototype.height="188";
    Student.prototype.weight="55kg";
    Student.prototype.study = function () {
      console.log("Learning, writing 500 lines of code, a piece of cake");
    };
    Student.prototype.eat = function () {
      console.log("Eat a 10-pound watermelon");
    };
    //Instantiate the object and initialize it var stu = new Student ("晨光", 57,"女");
    console.dir(Student);
    console.dir(stu);

// stu.eat();
// stu.study();

  </script>
</head>
<body>


</body>
</html>

This is what it prints out:

insert image description here

Simple prototype writing

There is also a simpler method for prototypes. The following is a modification of the above example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    //Simple prototype writing Student.prototype = {
      //Manually modify the constructor to point to constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("It's so fun to study");
      },
      eat: function () {
        console.log("I want to eat delicious food");
      }
    };

    var stu=new Student("Ding Ding Da Ming",20,"Male");
    stu.eat();
    stu.study();
    console.dir(Student);
    console.dir(stu);

  </script>
</head>
<body>


</body>
</html>

insert image description here

Prototype method sharing

For example, set the method to play after eating and sleep after playing.

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //Methods in the prototype can access each other function Animal(name,age) {
      this.name=name;
      this.age=age;
    }
    //Add method in prototype// Play after eating Animal.prototype.eat=function () {
      console.log("animals eat");
      this.play();
    };
    // Sleep after playing Animal.prototype.play=function () {
      console.log("playing ball");
      this.sleep();
    };
    Animal.prototype.sleep = function () {
      console.log("sleep");
    };

    var dog = new Animal ("Xiao Su", 20);
    dog.eat();

    //Methods in the prototype object can call each other</script>
</head>
<body>


</body>
</html>

This is the end of this article about exploring the implementation of JavaScript prototype data sharing and method sharing. For more relevant content about exploring JavaScript prototype data sharing and method sharing, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

In-depth analysis of data sharing and data transmission in JavaScript
JavaScript iframe data sharing interface implementation method
js creates a data sharing interface to simplify the transfer of values between frameworks
Javascript and vbscript data sharing

<<: Detailed explanation of redis5 cluster construction and usage under Linux (Centos7)

>>: mysql zip file installation tutorial