快捷導(dǎo)航

探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn)

更新時(shí)間：2021年05月07日 11:00:48 作者：流楚丶格念

這篇文章主要介紹了探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

數(shù)據(jù)共享

什么樣子的數(shù)據(jù)是需要寫在原型中?

需要共享的數(shù)據(jù)就可以寫原型中

原型的作用之一：數(shù)據(jù)共享

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

不需要共享的數(shù)據(jù)寫在構(gòu)造函數(shù)中
需要共享的數(shù)據(jù)寫在原型中

下面我們看一個(gè)案例

數(shù)據(jù)共享案例

每個(gè)學(xué)生的名字，年齡，性別都是獨(dú)特的，我們要設(shè)置

所有學(xué)生的身高都是188,所有人的體重都是55
所有學(xué)生都要每天寫500行代碼
所有學(xué)生每天都要吃一個(gè)10斤的西瓜

就可以把共有數(shù)據(jù)寫到原型中

<!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;
    }
    // 所有學(xué)生的身高都是188,所有人的體重都是55
    // 所有學(xué)生都要每天寫500行代碼
    // 所有學(xué)生每天都要吃一個(gè)10斤的西瓜
    //原型對(duì)象

    Student.prototype.height="188";
    Student.prototype.weight="55kg";
    Student.prototype.study=function () {
      console.log("學(xué)習(xí),寫500行代碼,小菜一碟");
    };
    Student.prototype.eat=function () {
      console.log("吃一個(gè)10斤的西瓜");
    };
    //實(shí)例化對(duì)象,并初始化
    var stu=new Student("晨光",57,"女");
    console.dir(Student);
    console.dir(stu);

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

  </script>
</head>
<body>


</body>
</html>

打印出來是這樣的

在這里插入圖片描述

原型簡單寫法

原型還有一種更簡單的方法，下面是對(duì)上面案例的修改

<!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 = {
      //手動(dòng)修改構(gòu)造器的指向
      constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("學(xué)習(xí)好開心啊");
      },
      eat: function () {
        console.log("我要吃好吃的");
      }
    };

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

  </script>
</head>
<body>


</body>
</html>

在這里插入圖片描述

原型方法共享

例如設(shè)定方法，吃完了玩，玩完了睡

在這里插入圖片描述

<!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("動(dòng)物吃東西");
      this.play();
    };
    // 玩完了就睡
    Animal.prototype.play=function () {
      console.log("玩球");
      this.sleep();
    };
    Animal.prototype.sleep=function () {
      console.log("睡覺了");
    };

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

    //原型對(duì)象中的方法,可以相互調(diào)用


  </script>
</head>
<body>


</body>
</html>

到此這篇關(guān)于探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)探究JavaScript原型數(shù)據(jù)共享與方法共享內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: