Explore JavaScript prototype data sharing and method sharing implementation

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

Recommend

Linux nohup command principle and example analysis

nohup Command When using Unix/Linux, we usually w...

SQL optimization often makes mistakes, that's because you don't understand the usage of MySQL explain plan

Table of contents 1. Preparation 2. Introduction ...

Examples of using && and || operators in javascript

Table of contents Preface && Operator || ...

HTML table markup tutorial (29): cell light border color attribute BORDERCOLORLIGHT

In cells, light border colors can be defined indi...

Pitfall notes of vuex and pinia in vue3

Table of contents introduce Installation and Usag...

Example code for developing h5 form page based on react hooks and zarm component library configuration

Recently, I have used React Hooks in combination ...

How to implement html input drop-down menu

Copy code The code is as follows: <html> &l...

How to modify the default storage location of Docker images (solution)

Due to the initial partitioning of the system, th...

Details on macrotasks and microtasks in JavaScript

Table of contents 1. What are microtasks? 2. What...

WeChat Mini Programs are shared globally via uni-app

In actual use, it is often necessary to share the...

How to export mysql table structure to excel

The requirements are as follows Export the table ...

How to install phabricator using Docker

I am using the Ubuntu 16.04 system here. Installa...

Install Mininet from source code on Ubuntu 16.04

Mininet Mininet is a lightweight software defined...

Web Design Experience: Efficiently Writing Web Code

Originally, this seventh chapter should be a deep ...

Nginx reverse proxy and load balancing practice

Reverse Proxy Reverse proxy refers to receiving t...