JS高级学习:原型链/继承

原型链

是一种关系,实例对象和原型对象之间的关系,关系是通过原型(proto)来联系的

原型指向可以改变

• 实例对象的原型proto指向的是该对象所在的构造函数的原型对象
• 构造函数的原型对象(prototype)指向如果改变了,实例对象的原型(proto)指向也会发生改变
• 原型的指向是可以改变的
• 实例对象和原型对象之间的关系是通过proto原型来联系起来的,这个关系就是原型链

原型最终指向

• 实例对象中有proto原型
• 构造函数中有prototype原型
  prototype是对象，所以，prototype这个对象中也有proto，
• 实例对象中的proto指向的是是构造函数的prototype，所以，prototype这个对象中的proto指向的应该是某个构造函数的原型prototype

如果原型指向改变了，那么就应该在原型改变指向之后添加原型方法

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

实例对象访问这个属性，应该先从实例对象中找，找到了就直接使用，找不到就去指向的原型对象中去找，找到了就使用，找不到呢，

通过实例对象能否改变原型对象中的属性值？ 不能

想改变原型对象中的属性的值，应该直接通过原型对象，属性=值； 可以改变

原型链

实例对象和原型对象之间的关系，通过proto来联系

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

继承

继承是一种关系，类（class）与类之间的关系，js中没有类，但可以通过构造函数模拟类，然后通过原型链来实现继承

• 继承也是为了数据共享，js中的继承也是为了实现数据共享
• 原型的作用：数据共享，节省内存空间，为了实现继承
• 继承是一种关系：父类级别与类级别的关系

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

多态

一个对象有不同的行为，或者是同一个香味针对不同的对象，产生不同的结果，要想有多态，就要先有继承，js中可以模拟多态，但是不会去使用，也不会模拟。

借用构造函数

为了数据共享，改变原型指向，做到了继承，----通过改变原型指向实现的继承

• 缺陷：
  因为改变原型指向的同时实现继承，直接初始化了属性，继承过来的属性的值都是一样的了，所以这就是问题，只能重新调用对象的属性进行重新赋值。
• 解决方案：
  继承的时候，不用改变原型的指向，直接调用父级的构造函数的方式来为属性赋值就可以了----借用构造函数 把要继承的父级的构造函数拿过来，使用一下就可以了。
  借用构造函数：构造函数的名字.call(当前对象，属性，属性，属性。。。)
• 解决了属性继承，并且值不重复的问题
• 缺陷：父级类别中的方法不能继承

    function Person(name, age, sex, weight) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.weight = weight;
    }
    Person.prototype.sayHi = function () {
      console.log("您好");
    };
    function Student(name,age,sex,weight,score) {
      //借用构造函数
      Person.call(this,name,age,sex,weight);
      this.score = score;
    }
    var stu1 = new Student("小明",10,"男","10kg","100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);

    var stu2 = new Student("小红",20,"女","20kg","120");
    console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);

    var stu3 = new Student("小丽",30,"妖","30kg","130");
    console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);


  </script>

组合继承

组合继承：原型继承+借用构造函数继承

    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    Person.prototype.sayHi=function () {
      console.log("阿涅哈斯诶呦");
    };
    function Student(name,age,sex,score) {
      //借用构造函数:属性值重复的问题
      Person.call(this,name,age,sex);
      this.score=score;
    }
    //改变原型指向----继承
    Student.prototype=new Person();//不传值
    Student.prototype.eat=function () {
      console.log("吃东西");
    };
    var stu=new Student("小黑",20,"男","100分");
    console.log(stu.name,stu.age,stu.sex,stu.score);
    stu.sayHi();
    stu.eat();
    var stu2=new Student("小黑黑",200,"男人","1010分");
    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
    stu2.sayHi();
    stu2.eat();

    //属性和方法都被继承了



  </script>

拷贝继承

把一个对象中的属性或者方法直接复制到另一个对象中

//    var obj1={
//      name:"小糊涂",
//      age:20,
//      sleep:function () {
//       console.log("睡觉了");
//      }
//    };
//
//    //改变了地址的指向
//    var obj2=obj1;
//    console.log(obj2.name,obj2.age);
//    obj2.sleep();



//    var obj1={
//      name:"小糊涂",
//      age:20,
//      sleep:function () {
//        console.log("睡觉了");
//      }
//    };
//
//
//    var obj2={};
//    for(var key in obj1){
//      obj2[key]=obj1[key];
//    }
//    console.log(obj2.name);



    function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="男";
    Person.prototype.height=100;
    Person.prototype.play=function () {
      console.log("玩的好开心");
    };
    var obj2={};
    //Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法

    for(var key in Person.prototype){
      obj2[key]=Person.prototype[key];
    }
    console.dir(obj2);
    obj2.play();



  </script>

就是把对象中需要共享的属性或者方法，直接遍历的方式复制到另一个对象中。