JS原型链与继承-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32849999/article/details/80458049

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</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>title</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>

原型最终指向了哪里

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    function Person() {

    }
    Person.prototype.eat=function () {
      console.log("吃东西");
    };

    var per=new Person();
    console.dir(per);
    console.dir(Person);

    //实例对象中有__proto__原型
    //构造函数中有prototype原型
    //prototype是对象：
    // *********************只要是对象，就有__proto__原型
    //所以,prototype这个对象中也有__proto__,那么指向了哪里
    //实例对象中的__proto__指向的是构造函数的prototype
    //所以,prototype这个对象中__proto__指向的应该是某个构造函数的原型prototype

    //Person的prototype中的__proto__的指向
    //console.log(Person.prototype.__proto__);

    //per实例对象的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null

    console.log(per.__proto__==Person.prototype);
    console.log(per.__proto__.__proto__==Person.prototype.__proto__);
    console.log(Person.prototype.__proto__==Object.prototype);
    console.log(Object.prototype.__proto__);
  </script>
</head>
<body>


</body>
</html>

js原型链