3-11 面向对象

2019-04-26 本文已影响0人一杯浊酒

3-11 面向对象（一）.mp4_20171120_192744.579_看图王.jpg

类的声明类的声明有两种方式:一种是用传统的构造函数来模拟一个类的方式,第二种是ES6中对class的声明
```
function Animail() {
 this.name = "name"
}
/*ES6 class声明类*/
class Animail2 {
 constructor() {
     this.name = name;
 }
}
```

如何通过类来实例化一个对象

/*实例化*/
console.log(new Animail(),new Animail2())

如何实现继承

在一个对象上找不到这个属性,会通过原型链一级一级网上找,这完全可以理解为继承关系
实现继承的原理就是通过原型链,继承的本质就是原型链

JS有哪几种继承方式,每种形式有什么缺点,又有什么优点

借助构造函数实现

/*借助构造函数实现*/
      function Parent1() {
          this.name = "parent1"
      }
      Parent1.prototype.say = function() {console.log("HELLO")};
      function Child() {
          Parent1.call(this); //把父级构造函数在子类元素中执行,修改了父级函数this的指向
          this.type = "child1"
      }
      console.log(new Child1()) //name:'parent1';type:'child1'
//原理:将父级构造函数的this指向子构造函数的实例上去,这样子类元素就拥有了父级的属性
//缺点:不会继承父类原型对象上的方法,只能继承构造函数里面的属性和方法

借助原型链实现

/*借助原型链实现*/
      function Parent2() {
          this.name = "parent2";
          this.play = [1,2,3]
      }
      function Child2() {
          this.type = "child2"
      }
      Child2.prototype = new Parent2(); //让构造函数的实例能访问到它原型对象上的属性方法
      //prototype 直接拿的是父类的实例,它没有自己的constructor,它的constructor 指向父类
      console.log(new Child2()); //new Child2().__proto__.name<"Parent2";new Child2().name<"Parent2"
      //缺点
      var s1 = new Child2();
      var s2 = new Child2();
      console.log(s1.play,s2.play);// 都是[1,2,3]
      s1.play.push(4);
      console.log(s1.play,s2.play);// 结果都输出[1,2,3,4]
      //改第一个实例对象s1上的属性play,第二个实例对象s2上的属性也跟着改变了
      //造成的原因是:原型链中的原型对象是共用的 s1.__proto__ === s2.__proto__ <ture ;他俩引用的是同一个对象(父类的实例对象),push属性是在实例对象上

组合继承方式

/*组合方式*/
      function Parent3() {
          this.name = "parent3";
          this.play = [1,2,3]
      }
      function Child3() {
          Parent3.call(this);
          this.type = "child3"
      }
      Child3.prototype = new Parent3(); 
      var s3 = new Child3();
      var s4 = new Child3();
      s3.play.push(4);
      console.log(s3.play,s4.play);
//缺点:父类构造函数执行了两次,call的时候执行了一次,new 一个实例的时候又执行了一次

组合继承优化方式一

/*组合方式优化方式一*/
      function Parent4() {
          this.name = "parent4";
          this.play = [1,2,3]
      }
      function Child4() {
          Parent4.call(this);
          this.type = "child4";
          //this.constructor = Child5;//不能这么写,因为父类和子类是共用一个原型对象的,将子类的constructor修改了,父类的不也跟着修改了嘛
      }
      Child4.prototype = Parent4.prototype; //将子类的原型对象和父类的原型对象引用同一个原型对象
      var s5 = new Child4();
      var s6 = new Child4();
      s5.play.push(4);
      console.log(s5.play,s6.play);
//缺点:无法区分实例是由父类创造的还是由子类创造的
console.log(s5.constructor); // parent4

组合继承优化方式二

function Parent5() {
          this.name = "parent5";
          this.play = [1,2,3]
      }
      function Child5() {
          Parent5.call(this);
          this.type = "child5"
      }
      Child5.prototype = Object.create(Parent5.prototype);// Object.create方法创建的对象它的原型就是里面的参数
      Child5.prototype.constructor = Child5;
      var s7 = new Child5();
      //console.log(s7.prototype); //不行的,只有构造函数才有prototype属性
      console.log(s7.__proto__); //Parent5

3-11 面向对象

猜你喜欢

热点阅读