溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript原型數(shù)據(jù)共享的示例分析

發(fā)布時間：2021-05-07 14:13:36 來源：億速云 閱讀：155 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹了JavaScript原型數(shù)據(jù)共享的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

JavaScript的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

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

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

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

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

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

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

  • 需要共享的數(shù)據(jù)寫在原型中

下面我們看一個案例

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

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

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

    Student.prototype.height="188";
    Student.prototype.weight="55kg";
    Student.prototype.study=function () {
      console.log("學(xué)習(xí),寫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>

打印出來是這樣的

JavaScript原型數(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;
    }
    //簡單的原型寫法
    Student.prototype = {
      //手動修改構(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>

JavaScript原型數(shù)據(jù)共享的示例分析

原型方法共享

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

JavaScript原型數(shù)據(jù)共享的示例分析

<!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();

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


  </script>
</head>
<body>


</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript原型數(shù)據(jù)共享的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手