原型共享数据原型简单语法原型中方法是可以相互访问实例对象属性方法层层搜索

最新推荐文章于 2020-11-09 16:38:12 发布

Leon_Jinhai_Sun

最新推荐文章于 2020-11-09 16:38:12 发布

阅读量413

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/86620476

版权

利用原型共享数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</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("晨光",29,"女");
      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>Document</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);

      // 原型对象
      // 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("晨光",29,"女");
      // 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>Document</title>
  <script>
      // function Person(age){
      //     this.age = age;
      //     this.sayHi = function(){
      //         console.log("hello");
      //         // 打招呼的同时,直接调用吃的方法
      //         // this.eat();
      //     };
      //     this.eat = function(){
      //         console.log("吃东西啦");
      //         this.sayHi();
      //     };
      // }
      // // 实例对象的方法,是可以相互调用的

      // // 实例化对象,并初始化
      // var per = new Person(20);
      // // 调用方法
      // // per.sayHi();
      // per.eat();
  </script>
  <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>

实例对象使用属性和方法层层搜索

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      function Person(age,sex){
          // 年龄
          this.age = age;
          // 性别
          this.sex = sex;
          this.eat = function(){
              console.log("构造函数中的吃");
          };
      }
      Person.prototype.sex = "女";
      Person.prototype.eat = function(){
          console.log("原型对象中的吃");
      };

      var per = new Person(20,"男");
      // 男
      console.log(per.sex);
      per.eat();
      console.dir(per);

      /**
       * 实例对象使用的属性或者方法,先在实例中查找,找到了则直接使用
       * 找不到则去实例对象的__proto__指向的原型对象prototype中找,找到了则使用
       * 找不到则报错
       */
  </script>
</head>
<body>
  
</body>
</html>