实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例

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

实例对象的属性和原型对象中的属性重名问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      function Person(age,sex){
          this.age = age;
          this.sex = sex;
      }

      Person.prototype.sex = "女";
      var per = new Person(10,"男");
      console.log(per.sex);
      // 因为JS是一门动态类型的语言,对象没有什么,只要点了,那么这个对象就有了
      // 这个东西,没有这个属性,只要对象.属性名字,对象就有这个属性了,但是,该属性
      // 没有赋值,所以,结果是undefined
      console.log(per.gdagd);


      // 实例对象访问这个属性,应该先从实例对象中找,找到了就直接用
      // 找不到就去原型对象中找,找到了就使用,找不到呢?
      // 通过实例对象能否改变原型对象中的属性值?不能
      // 就想改变原型对象中属性的值,怎么办?直接通过原型对象.属性=值;可以改变
      Person.prototype.sex = "oh my";
      per.sex = "人";
      // console.log(per.sex);
      // console.dir(per);
  </script>
</head>
<body>
  
</body>
</html>

神奇的原型链

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      // 原型链:实例对象和原型对象之间的关系,通过__proto__来联系
  </script>
</head>
<body>
<div id="dv"></div>
<script>
    var divObj = document.getElementById("dv");  
    console.dir(divObj);

    // divObj.__proto__---->HTMLDivElement.prototype的__proto__---->HTMLElement
    // .prototype的__proto__---->Element.prototype的__proto__-->
    // Node.prototype的__proto__---->EventTarget.prototype的
    // __proto__---->Object.prototype没有__proto__,所以,Object.prototype中的
    // __proto__是null
</script>
  
</body>
</html>

继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      /**
       * 面向对象的编程思想:根据需求,分析对象,找到对象有什么特征和行为,通过
       * 代码的方式来实现需求,要想实现这个需求,就要创建对象,就应该先有构造函数
       * 然后通过构造函数来创建对象,通过对象调用属性和方法来实现相应的功能及
       * 需求即可
       *
       * 首先JS不是一门面向对象的语言,JS是一门基于对象的语言,那么为什么学习js还
       * 要学习面向对象,因为面向对象的思想适合于人的想法,编程起来会更加的方便,及
       * 后期的维护....
       *
       * 面向对象的编程语言中有类(class)的概念(也是一种特殊的数据类型),
       * 但是JS不是面向对象的语言,所以,JS中没有类(class),但是JS可以模拟面向对象
       * 的思想编程,JS中会通过构造函数来模拟类的概念(class)
       *
       * 
       *
       * 小明,小红 都是人
       * 共同的特征和行为
       * 特征---->属性
       * 行为---->方法
       *
       * 面向对象的特性:封装,继承,多态
       *
       * 封装:就是包装
       * 一个值存储在一个变量中--封装
       * 一坨重复的代码放在一个函数中--封装
       * 一系列的属性放在一个对象中--封装
       * 一些功能类似的函数(方法)放在一个对象中--封装
       * 好多相类似的对象放在一个js文件中----封装
       *
       * 继承:首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过
       * 构造函数模拟类,然后通过原型来实现继承
       * 继承也是为了数据共享,js中的继承也是为了实现数据共享
       *
       * 原型作用之一:数据共享,节省内存空间
       * 原型作用之二:为了实现继承
       *
       * 继承是一种关系:
       *
       * 父类级别和子类级别的关系
       *
       * 例子:
       * 
       *
       * 多态:一个对象有不同的行为,或者是同一个行为针对不同的对象,产生不同的结果
       *      要想有多态,就要先有继承,js中可以模拟多态,但是不会去使用,也不会模拟
       *      
       */
      
      // js中通过原型来实现继承

      function Person(name,age,sex){
          this.name = name;
          this.age = age;
          this.sex = sex;
      }
      Person.prototype.eat = function(){
          console.log("人可以吃东西");
      };
      Person.prototype.sleep = function(){
          console.log("人在睡觉");
      };
      Person.prototype.play = function(){
          console.log("生活就是不一样的玩法而已");
      };
      var per = new Person("小明",10,"男");

      function Student(score){
          this.score = score;
      }
      // 改变学生的原型的指向即可====>学生和人已经发生关系了
      Student.prototype = new Person("小明",10,"男");
      Student.prototype.study = function(){
          console.log("学习是很累的");
      };

      // 相同的代码太多,造成了代码的冗余(重复的代码)
      var stu = new Student(100);
      console.log(stu.name);
      console.log(stu.age);
      console.log(stu.sex);
      stu.eat();
      stu.play();
      stu.sleep();

      console.log("下面的是学生对象中自己有的");
      console.log(stu.score);
      stu.study();

  </script>
</head>
<body>
  
</body>
</html>

继承案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      // 动物有名字,有体重,有吃东西的行为
      // 小狗有名字,有体重,有毛色,有吃东西的行为,还有咬人的行为
      // 哈士奇名字,有体重,有毛色,性别,有吃东西的行为,还有咬人的行为,逗主人开心
      // 的行为

      // 动物的构造函数
      function Animal(name,weight){
          this.name = name;
          this.weight = weight;
      }
      // 动物的原型的方法
      Animal.prototype.eat = function(){
          console.log("天天吃东西");
      };
      // 狗的构造函数
      function Dog(color){
          this.color = color;
      }
      Dog.prototype = new Animal("哮天犬","50kg");
      Dog.prototype.bitePerson = function(){
          console.log("咬死你");
      };

      // 哈士奇
      function ErHa(sex){
          this.sex = sex;
      }
      ErHa.prototype = new Dog("黑白色");
      ErHa.prototype.playHost = function(){
          console.log("拆家");
      };

      var erHa = new ErHa("雄性");
      console.log(erHa.name,erHa.weight,erHa.color);
      erHa.eat();
      erHa.bitePerson();
      erHa.playHost();

  </script>
</head>
<body>
  
</body>
</html>