漫话JS继承

最新推荐文章于 2021-10-25 10:50:38 发布

guxin_duyin

最新推荐文章于 2021-10-25 10:50:38 发布

阅读量106

点赞数

分类专栏：原生JS

本文链接：https://blog.csdn.net/guxin_duyin/article/details/103505958

版权

原生JS 专栏收录该内容

30 篇文章 3 订阅

订阅专栏

今天我们讲一下JS的继承。

那么什么是继承呢？

继承在本质上是特殊和一般的关系，即常说的is-a的关系。子类继承父类，表明子类是一种特殊的父类，具有父类的属性和方法，并且常常具有自己的一些特殊的属性和方法。在js中则表现为子类的实例可以直接使用父类的所有属性和方法，可以减少代码冗余，增强代码可维护性，提高开发效率，是js面向对象编程的一大特性。

设计思想

JS的继承是靠一种原型链的一级一级的指向来实现继承。那么当时的创造JavaScript这种的语言的人为什么要这样实现js独有的继承，大家可以阅读阮一峰老师的Javascript继承机制的设计思想，就像讲故事一样，从古代至现代说明了js继承这种设计模式的缘由。

prototype对象

讲js的继承就不得不讲prototype对象。每个函数都有一个prototype属性，每个函数都有，当然也包括构造函数，这个属性是一个指针，指向一个对象，指向的是原型对象的内存堆，即prototype是原型对象。

从阮一峰老师的文章中，我们可以知道prototype是为了解决构造函数的属性和方法不能共享的问题而提出的，下面我们先实现一个简单的继承：

function constructorFn (state, data) {
    this.data = data;
    this.state = state;
    this.isPlay = function () {
        return this.state + ' is ' + this.data;
    }
}
var instance1 = new constructorFn ('1', 'doing');
var instance2 = new constructorFn ('0', 'done');
console.log(instance1.isPlay()); // 1 is doing
console.log(instance2.isPlay()); // 0 is done

此时，实例1 和实例2 都有自己的data属性、state属性、isPlay方法，造成了资源的浪费，既然两个实例都需要调用isPlay方法，便可以将isPlay方法挂载到构造函数的prototype对象上，实例便有了本地属性方法和引用属性方法，如下：

function constructorFn (state, data) {
    this.data = data;
    this.state = state;
}
constructorFn.prototype.isPlay = function () {
    return this.state + ' is ' + this.data;
}
constructorFn.prototype.isDoing = 'nonono!';
var instance1 = new constructorFn ('1', 'doing');
var instance2 = new constructorFn ('0', 'done');
console.log(instance1.isPlay()); // 1 is doing
console.log(instance2.isPlay()); // 0 is done
console.log(instance1.isDoing); // nonono!
console.log(instance2.isDoing); // nonono!

我们将isPlay方法挂载到prototype对象上，同时增加isDoing属性，既然是共享的属性和方法，那么修改prototype对象的属性和方法，实例的值都会被修改，如下：

constructorFn.prototype.isDoing = 'yesyesyes!';
console.log(instance1.isDoing); // yesyesyes!
console.log(instance2.isDoing); // yesyesyes!

问题来了，为什么实例会取到prototype对象上的属性和方法，别急，没多久就会结合其他问题综合解答。

同时，你可能会问，如果修改实例1的isDoing属性的原型，实例2的isDoing会不会受到影响？

instance2.isDoing = 'hello!';
console.log(instance1.isDoing); // yesyesyes!  之前已经修改成了yesyesyes
console.log(instance2.isDoing); // hello!

问题又来了，可以看到修改实例2的isDoing属性，实例1的实例并未受到影响。这是为什么呢？

那如果修改实例2的isDoing属性的原型属性，实例1的isDoing会不会受到影响？如下：

instance1.__proto__.isDoing = 'hello!';
console.log(instance1.isDoing); // hello！
console.log(instance2.isDoing); // hello！

问题又又来了，为什么修改实例1的__proto__属性上的isDoing的值就会影响到构造函数的原型对象的属性值？

我们先整理一下，未解决的三个问题：

为什么实例会取到prototype对象上的属性和方法？
为什么修改实例2的isDoing属性，实例1的实例没有受到影响？
为什么修改实例2的__proto__属性上的isDoing的值就会影响到构造函数的原型对象的属性值？

这时候不得不背后真正的操作者搬出来了，就是new操作符，同样是面试最火爆的问题之一，new操作符干了什么？相信有人也是跟我一样，已经背的滚瓜烂熟了，以 Var instance1 = new constructorFn();为例，就是下面三行代码：

var obj = {};
obj.__proto__ =  constructorFn.prototype;
constructorFn.call(obj);

第一行声明一个空对象，因为实例本身就是一个对象。
第二行将实例本身的__proto__属性指向构造函数的原型，obj新增了构造函数prototype对象上挂载的属性和方法。
第三行将构造函数的this指向替换成obj，再执行构造函数，obj新增了构造函数本地的属性和方法。

理解了上面三行代码的含义，那么三个问题也就迎刃而解了。

问题1：实例在新建的时候，本身的__ptoto__指向了构造函数的原型。

问题2：实例1和实例2 在新建后，有了各自的this，修改实例1的isDoing属性，只是修改了当前对象的isDoing的属性值，并没有影响到构造函数。

问题3：修改实例1的__proto__，即修改了构造函数的原型对象的共享属性

到此处，涉及到的内容大家可以再回头捋一遍，理解了就会觉得醍醐灌顶。

proto

同时，你可能又会问，__proto__是什么？

简单来说，__proto__是对象的一个隐性属性，同时也是一个指针，可以设置实例的原型。
实例的__proto__指向构造函数的原型对象。

需要注意的是，

每个对象都有内置的__proto__属性，函数对象才会有prototype属性。

用chrome和FF都可以访问到对象的__proto__属性，IE不可以。

我们继续用上面的例子来说明：

function constructorFn (state, data) {
    this.data = data;
    this.state = state;
}
constructorFn.prototype.isPlay = function () {
    return this.state + ' is ' + this.data;
}
constructorFn.prototype.isDoing = 'nonono!';
var instance1 = new constructorFn ('1', 'doing');
console.log(instance1.__proto__ === constructorFn.prototype); // true

构造函数的原型对象也是对象，那么constructor.prototype.__proto__指向谁呢？

定义中说对象的__proto__指向的是构造函数的原型对象，下面我们验证一下constructor.prototype.__proto__的指向：

console.log(instance1.__proto__ === constructorFn.prototype); // true
console.log(constructorFn.prototype.__proto__ === Object.prototype) // true

用图形表示的话，如下：

可以看出，constructor.prototype.__proto__的指向是Object的原型对象。

那么，Object.prototype.__proto__的指向呢？


console.log(instance1.__proto__ === constructorFn.prototype); // true
console.log(constructorFn.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__); // null

用图形表示的话，如下：

可以发现，Object.prototype.__proto__ === null;
这样也就形成了原型链。通过将实例的原型指向构造函数的原型对象的方式，连通了实例-构造函数-构造函数的原型，原型链的特点就是逐层查找，从实例开始查找一层一层，找到就返回，没有就继续往上找，直到所有对象的原型Object.prototype。

继承的方式

想要继承，就必须要提供个父类（继承谁，提供继承的属性）

//父类
function Parent(name){//给构造函数添加了参数
    this.name = name;
}
//给父类设置原型对象
Parent.prototype = {
    age:22,
    run:function(){
        alert(this.name)
    }
}

　一、原型链继承

//原型链继承
function Per(){
    this.name = 'per'
}
Per.prototype = new Parent();//将父类的实例对象设置为子类的原型对象，实现原型链继承的关键
var per1 = new Per()
console.log(per1.age);//22
//instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
console.log(per1 instanceof Person)//true

重点：让新实例的原型等于父类的实例。

特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）

缺点：1、新实例无法向父类构造函数传参。

　　　2、继承单一。

　　　3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）

二、借用构造函数继承

//借用构造函数继承
function Con(name){
    Parent.call(this,name);//关键
    this.age = 12;
}
var con1 = new Con('wang');
console.log(con1.name);//wang
console.log(con1.age);//12
console.log(con1 instanceof Parent);//false

重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））

特点：1、只继承了父类构造函数的属性，没有继承父类原型的属性。

　　　2、解决了原型链继承缺点1、2、3。

　　　3、可以继承多个构造函数属性（call多个）。

　　　4、在子实例中可向父实例传参。

缺点：1、只能继承父类构造函数的属性。

　　　2、无法实现构造函数的复用。（每次用每次都要重新调用）

　　　3、每个新实例都有父类构造函数的副本，臃肿。

　三、组合继承（组合原型链继承和借用构造函数继承）（常用）

//组合原型链和构造函数继承
function SubType(name){
    Parent.call(this,name)//借用构造函数模式
}
SubType.prototype = new Parent();//原型链继承
var sub = new SubType('sub');
console.log(sub.name);//sub,继承了构造函数属性
console.log(sub.age);//22,继承了父类原型的属性

重点：结合了两种模式的优点，传参和复用

特点：1、可以继承父类原型上的属性，可以传参，可复用。

　　　2、每个新实例引入的构造函数属性是私有的。

缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

四、原型式继承

//先封装一个函数容器，用来输出对象和承载继承的原型
function content(obj){
    function F(){};
    F.prototype = obj;//继承了传入的参数
    return new F();//返回函数对象
}
var sup = new Parent();//拿到父类的示例
var sup1 = content(sup);
console.log(sup1.age);//22

重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。

特点：类似于复制一个对象，用函数来包装。

缺点：1、所有实例都会继承原型上的属性。

　　　2、无法实现复用。（新实例属性都是后面添加的）

五、寄生式继承


function content(obj){
    function F(){};
    F.prototype = obj;//继承了传入的参数
    return new F();//返回函数对象
}
var sup = new Parent();//拿到父类的示例
//以上是原型式继承，给原型式继承再套个壳子传递参数
function subObject(obj){
    var sub = content(obj);
    sub.name = 'gar';
    return sub;
}
var sub2 = subObject(sup);
//这个函数经过声明之后就成了可增添属性的对象
console.log(sub2.name);//gar

重点：就是给原型式继承外面套了个壳子。

优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。

缺点：没用到原型，无法复用。

六、寄生组合式继承（常用）

寄生：在函数内返回对象然后调用

组合：1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数，可传参

function F(){}
F.prototype = Parent.prototype;
function Sub(){
    Parent.call(this)
}
Sub.prototype = new F();
var sub2 = new Sub();
console.log(sub2.age);//22

重点：修复了组合继承的问题

七、ES6关键字extends继承

// es6继承
  class Animal {
    //构造函数，里面写上对象的属性
    constructor(props) {
      this.name = props.name || 'Unknown';
    }
    //方法写在后面
    eat() {//父类共有的方法
      console.log(this.name + " will eat pests.");
    }
  }

  //class继承
  class Bird extends Animal {
    //构造函数
    constructor(props,myAttribute) {//props是继承过来的属性，myAttribute是自己的属性
      //调用实现父类的构造函数
      super(props)//相当于获得父类的this指向，必须调用super()，否则没有this指向会报错
      this.type = props.type || "Unknown";//父类的属性，也可写在父类中
      this.attr = myAttribute;//自己的私有属性
    }

    fly() {//自己私有的方法
      console.log(this.name + " are friendly to people.");
    }
    myattr() {//自己私有的方法
      console.log(this.type+'---'+this.attr);
    }
  }

//通过new实例化
  var myBird = new Bird({
    name: '小燕子',
    type: 'Egg animal'//卵生动物
  },'Bird class')
  myBird.eat()
  myBird.fly()
  myBird.myattr()

1、class 可以理解为function,由于class本质还是一个function,因此它也会拥有一个的prototype属性，当new一个class时，会把class的porototype属性赋值给这个新对象的 __proto属性。
2、constructor 方法是默认添加的方法，在new一个对象时，自动调用该方法，constructor里面定义自己的属性。
3、继承extends和super，class 子类名 extends 父类名实现继承，当然还得在constructor里面写上super(父类的参数)，意思就是在子类中获得父类的this指针，相当于Animal.call(this)

guxin_duyin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
漫话JS继承

今天我们讲一下JS的继承。那么什么是继承呢？继承在本质上是特殊和一般的关系，即常说的is-a的关系。子类继承父类，表明子类是一种特殊的父类，具有父类的属性和方法，并且常常具有自己的一些特殊的属性和方法。在js中则表现为子类的实例可以直接使用父类的所有属性和方法，可以减少代码冗余，增强代码可维护性，提高开发效率，是js面向对象编程的一大特性。设计思想JS的继承是靠一种原型链的一级一级...
复制链接

扫一扫