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

更新时间：2021年05月07日 11:00:48 作者：流楚丶格念

这篇文章主要介绍了探究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>

在这里插入图片描述

原型方法共享

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //原型中的方法,是可以相互访问的

    function Animal(name,age) {
      this.name=name;
      this.age=age;
    }
    //原型中添加方法
    // 吃完了就玩
    Animal.prototype.eat=function () {
      console.log("动物吃东西");
      this.play();
    };
    // 玩完了就睡
    Animal.prototype.play=function () {
      console.log("玩球");
      this.sleep();
    };
    Animal.prototype.sleep=function () {
      console.log("睡觉了");
    };

    var dog=new Animal("小苏",20);
    dog.eat();

    //原型对象中的方法,可以相互调用


  </script>
</head>
<body>


</body>
</html>

到此这篇关于探究JavaScript原型数据共享与方法共享实现的文章就介绍到这了,更多相关探究JavaScript原型数据共享与方法共享内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于bootstrap写的一点localStorage本地储存
这篇文章主要介绍了基于bootstrap写的一点localStorage本地储存,需要的朋友可以参考下
2017-11-11
JavaScript设计模式策略模式案例分享
这篇文章主要介绍了JavaScript设计模式策略模式案例分享，策略设计模式就是指一个问题匹配多个解决方法，不一定要用到哪一个，而且有可能随时增加多个方案
2022-06-06
window.name代替cookie的实现代码
window.name代替cookie的实现代码，需要的朋友可以参考下。
2010-11-11
创建echart多个联动的示例代码
这篇文章主要介绍了创建echart多个联动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
JavaScript通过join函数连接数组里所有元素的方法
这篇文章主要介绍了JavaScript通过join函数连接数组里所有元素的方法,实例分析了javascript中join函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
JS实现向表格中动态添加行的方法
这篇文章主要介绍了JS实现向表格中动态添加行的方法,涉及javascript针对表格行的动态添加技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
原生js实现计算购物车总金额的示例
本文主要介绍了原生js实现计算购物车总金额的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
基于javascript处理二进制图片流过程详解
这篇文章主要介绍了基于javascript处理二进制图片流过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
JS实现搜索关键词的智能提示功能
最近在百度搜索的时候，当你输入一个字或者词的时候，他会给你们弹出一个下拉框出来，里面是和你相关的搜索提示，效果非常人性化，基于js怎么实现搜索关键词智能提示功能，下面小编通过实例代码给大家介绍下，需要的的朋友参考下吧
2017-07-07
JavaScript 组件之旅（一）分析和设计
毫无疑问，JavaScript 是一种非常灵活的脚本语言，有时候它像一只难以驯服的野马——你受益于它的灵活性的同时，也要时刻提防它变得失去控制
2009-10-10