JavaScript原型数据共享与方法共享探究

2021/6/10 20:24:31

编程Tag： javascript function 原型 console name 数据共享 age Student 探究

本文主要是介绍JavaScript原型数据共享与方法共享探究，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

- 数据共享
- - 什么样子的数据是需要写在原型中?
- 数据共享案例
- 原型简单写法
- 原型方法共享

数据共享

什么样子的数据是需要写在原型中?

需要共享的数据就可以写原型中

原型的作用之一：数据共享

属性需要共享,方法也需要共享：

不需要共享的数据写在构造函数中
需要共享的数据写在原型中

下面我们看一个案例

数据共享案例

每个学生的名字，年龄，性别都是独特的，我们要设置

所有学生的身高都是188,所有人的体重都是55
所有学生都要每天写500行代码
所有学生每天都要吃一个10斤的西瓜

就可以把共有数据写到原型中

<!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;
    }
    // 所有学生的身高都是188,所有人的体重都是55
    // 所有学生都要每天写500行代码
    // 所有学生每天都要吃一个10斤的西瓜
    //原型对象

    Student.prototype.height="188";
    Student.prototype.weight="55kg";
    Student.prototype.study=function () {
      console.log("学习,写500行代码,小菜一碟");
    };
    Student.prototype.eat=function () {
      console.log("吃一个10斤的西瓜");
    };
    //实例化对象,并初始化
    var stu=new Student("晨光",57,"女");
    console.dir(Student);
    console.dir(stu);

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

  </script>
</head>
<body>


</body>
</html>

打印出来是这样的
在这里插入图片描述

原型简单写法

原型还有一种更简单的方法，下面是对上面案例的修改

<!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;
    }
    //简单的原型写法
    Student.prototype = {
      //手动修改构造器的指向
      constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("学习好开心啊");
      },
      eat: function () {
        console.log("我要吃好吃的");
      }
    };

    var stu=new Student("鼎鼎大名",20,"男");
    stu.eat();
    stu.study();
    console.dir(Student);
    console.dir(stu);

  </script>
</head>
<body>


</body>
</html>

在这里插入图片描述

原型方法共享

例如设定方法，吃完了玩，玩完了睡