详解js中的继承(一)

22

前言

最近在学vue,到周末终于有空写一些东西了(想想又能骗赞,就有点小激动!)。在javascript基础中,除了闭包之外,继承也是一个难点。因为考虑到篇幅较长,所以打算分成两个部分来写。同样基于《javascript高级程序设计》,做一个详细的讲解,如果有不对的地方欢迎指正。

准备知识

为了更好的讲解继承,先把一些准备知识放在前面。

1.构造函数,实例

构造函数,是用来创建对象的函数,本质上也是函数。与其他函数的区别在于调用方式不同:

  • 如果通过new操作符来调用的,就是构造函数

  • 如果没有通过new操作符来调用的,就是普通函数
    例子:

    function Person(name, age) {
       this.name = name;
       this.age = age;
     }
     //当做构造函数调用
     var person1 = new Person('Mike',10);
     
     //当做普通函数调用,这里相当于给window对象添加了name和age属性,这个不是重点,只要注意调用方式
     Person('Bob',12);
     
     console.log(person1)//Person {name: "Mike", age: 10}
     console.log(name)//Bob
     console.log(age)//12

var person1 = new Person('Mike',10);中,通过new操作符调用了函数Person,并且生成了person1,
这里的Person就称为构造函数person1称为Person函数对象的一个实例。实可以通过实例的constructor访问对应的构造函数(但是其实上这个constructor不是实例的属性,后面会解释为什么),看下面的例子:

 function Person(name, age) {
    this.name = name;
    this.age = age;
  }
 var person1 = new Person('Mike',10);
 var person2 = new Person('Alice',20);
 console.log(person1.constructor)//function Person(){省略内容...}
 console.log(person2.constructor)//function Person(){省略内容...}

2.原型对象

当我们每次创建一个函数的时候,函数对象都会有一个prototype属性,这个属性是一个指针,指向它的原型对象原型对象的本质也是一个对象。初次看这句话可能有点难以理解,举个例子,还是刚刚那个函数:

     function Person(name, age) {
        this.name = name;
        this.age = age;
     }
     console.log(Person.prototype)//object{constructor:Person}

可以看到Person.prototype指向了一个对象,即Person的原型对象,并且这个对象有一个constructor属性,又指向了Person函数对象。是不是有点晕?没关系,接下来我们就上比举例子更好的手段--画图。

3.构造函数,原型对象和实例的关系

在前面,我们刚刚介绍过了构造函数,实例和原型对象,接下来我们用一张图来表示这三者之间的关系(用ps画这种图真是麻烦的要死,大家有好的工具推荐一下):
关系图
从图上我们可以看到:

  • 函数对象的prototype指向原型对象,原型对象的constructor指向函数对象

  • 实例对象的[Protoptype]属性指向原型对象,这里的[Protoptype]内部属性,可以先理解为它是存在的,但是不允许我们访问(虽然在有些浏览器是允许访问这个属性的,但是我们先这样理解),这个属性的作用是:允许实例通过该属性访问原型对象中的属性和方法。比如说:

    function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      //在原型对象中添加属性或者方法
     Person.prototype.sex = '男'; 
     var person1 = new Person('Mike',10);
     var person2 = new Person('Alice',20);
     //只给person2设置性别
     person2.sex = '女';
     console.log(person1.sex)//'男'
     console.log(person2.sex)//'女'

这里我们没有给person1实例设置sex属性,但是因为[Protoptype]的存在,会访问原型对象中对应的属性;
同时我们给person2设置sex属性后输出的是'女',说明只有当实例本身不存在对应的属性或方法时,才会去找原型对象上的对应属性或方法

  • 补充一下:ECMA-262第五版的时候这个内部属性叫[Prototype],而_proto_Firefox,Chrome和Safari浏览器提供的一个属性,在其他的实现里面,这个内部属性是没法访问的。所以我们能从控制台看到的是_proto_属性,但是我在文中用的还是[Prototype],个人认为这样较符合它的本质。

  • tips:这里刚好解释一下console.log(person1.constructor)时,说到的,可以通过实例的constructor访问构造函数,但是constructor本质上是原型对象的属性。

继承

原型链

在js中,继承的主要思路就是利用原型链,因此如果理解了原型链,继承问题就理解了一半。在这里可以稍微休息一下,如果对前面的准备知识已经理解差不多了,就开始讲原型链了。

原型链的原理是:让一个引用类型继承另一个引用类型的属性和方法。
先回顾一下刚刚讲过的知识:

  • 原型对象通过constructor属性指向构造函数

  • 实例通过[Prototype]属性指向原型对象

那现在我们来思考一个问题:如果让原型对象等于另一个构造函数的实例会怎么样?
例如:

    function A() {
     
    }
    //在A的原型上绑定sayA()方法
    A.prototype.sayA = function(){
            console.log("from A")
    }
    function B(){

    }
    
     //让B的原型对象指向A的一个实例
     B.prototype = new A();
     
     //在B的原型上绑定sayB()方法
     B.prototype.sayB = function(){
            console.log("from B")
     }
     //生成一个B的实例
     var a1 = new A();
     var b1 = new B();
     
     //b1可以调用sayB和sayA
     b1.sayB();//'from B'
     b1.sayA();//'from A'

为了方便理解刚刚发生了什么,我们再上一张图:
原型链
现在结合图片来看代码:

  • 首先,我们创建了A和B两个函数对象,同时也就生成了它们的原型对象

  • 接着,我们给A的原型对象添加了sayA()方法
    * 然后是关键性的一步B.prototype = new A();,我们让函数对象B的protytype指针指向了一个A的实例,请注意我的描述:是让函数对象B的protytype指针指向了一个A的实例,这也是为什么最后,B的原型对象里面不再有constructor属性,其实B本来有一个真正的原型对象,原本可以通过B.prototype访问,但是我们现在改写了这个指针,使它指向了另一个对象,所以B真正的原型对象现在没法被访问了,取而代之的这个新的原型对象是A的一个实例,自然就没有constructor属性了

  • 接下来我们给这个B.prototype指向的对象,增加一个sayB方法

  • 然后,我们生成了一个实例b1

  • 最后我们调用了b1的sayB方法,可以执行,为什么?
    因为b1有[Prototype]属性可以访问B prototype里面的方法;

  • 我们调用了b1的sayA方法,可以执行,为什么?
    因为b1沿着[Prototype]属性可以访问B prototype,B prototype继续沿着[Prototype]属性访问A prototype,最终在A.prototype上找到了sayA()方法,所以可以执行

所以,现在的结果就相当于,b1继承了A的属性和方法,这种[Prototype]不断把实例和原型对象联系起来的结构就是原型链。也是js中,继承主要的实现方式。

小结

因为这部分知识理解起来比较难,所以第一部分先写到这里(当然不是因为我想多写一篇来骗赞和关注啦),大家读到这里也可以歇口气了,如果这一块理解深刻,下一部分就会很轻松。
为了测试一下大家对于本文的理解程度,问一下几个问题:

  1. 在最后一个例子里,console.log(b1.constructor),结果是什么?

  2. B.prototype = new A(); B.prototype.sayB = function(){ console.log("from B") }这两句的执行顺序能不能交换

  3. 最后再思考一下. 在最后一个例子里,A看似已经是原型链的最顶层,那A还能再往上吗?

以上答案在下篇中解答,读者可以自己先试试,思考一下,有疑问也可以在评论中提出。最后,如果这篇文章对你有帮助,请大方的点收藏和推荐吧(每次都是收藏比推荐多!,组织语言,画图和排版都很辛苦的),你们的支持会给我更大的动力~以上内容属于个人见解,如果有不同意见,欢迎指出和探讨。请尊重作者的版权,转载请注明出处,如作商用,请与作者联系,感谢!


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

21 条评论
maoxiaoke · 2017年03月20日

实例的属性应该是__proto__吧。http://xiaokedada.com/2017/03...基于类-vs-基于原型

回复

0

ECMA-262第五版的时候这个内部属性叫[Prototype],而_proto_是Firefox,Chrome和Safari浏览器提供的一个属性,在其他的实现里面,这个内部属性是没法访问的,所以你能从控制台看到的是_proto_,但是我觉得这个属性应该用[Prototype]比较符合它的本质。

安歌 作者 · 2017年03月20日
0

在文中补充了这个的相关说明,谢谢反馈!

安歌 作者 · 2017年03月20日
杨战美 · 2017年04月11日

写的好棒,但是我还有一点疑问

function A() {


}
A.prototype.sayA = function(){
        console.log("from A")
}
function B(){

}
 B.prototype = new A();
 B.prototype.sayB = function(){
        console.log("from B")
 }
 var a1 = new A();
 var b1 = new B();

 console.log(B.prototype);//A

这个输出了A,但是它和A本身并不一样,有点懵,求解答

回复

0

看最后一张图,B.prototype指向访问的是B的原型对象,因为B的原型对象是A的一个实例,所以你用console.log打印的结果是A ,你可以尝试打印下console.log(a1)console.log(b1)就会发现 分别输出A,B。也是因为a1是A的实例,b1是B的实例

安歌 作者 · 2017年04月11日
0

@马萧萧 懂了,非常感谢

杨战美 · 2017年04月12日
钉子 · 2017年06月20日

感谢作者大大

回复

guanjp · 2017年09月12日

有两处prototype写成了protytype,差点懵掉,以为有什么新的属性

回复

고아lyj · 2017年11月08日

有2个问题啊
1.函数对象的prototype指向原型对象,原型对象的constructor指向函数对象。这里的话,我们虽然从书中知道这个关系,但是如何用函数或者说等式 去确定 (是 函数对象的prototype 指向原型对象)。
类似于书中使用Object.getprototypeof(person1) == Person.prototype,表示我原问题中的指向2.
当然我们也可以使用person1.__proto__ === Person.prototype 去解释,但是这个首先全等的,没有方向性,我们又如何知道是person1实例的[prototype] 指向Person构造函数的原型对象的。

2.然后是关键性的一步B.prototype = new A();,我们让函数对象B的protytype指针指向了一个A的实例,请注意我的描述:是让函数对象B的protytype指针指向了一个A的实例,这也是为什么最后,B的原型对象里面不再有constructor属性。
这里 我输出

 //让B的原型对象指向A的一个实例
 B.prototype = new A();
 
 console.log(B.prototype.constructor); //[Function: A]

。。。。还是可以输出结果的,,,为啥B的原型对象里就没有contructor了呢?

回复

0

补充一下第一个,不知道如何去看 (构造函数的prototype指向原型对象的prototype)
// console.log('不相等',Person.prototype === Person.prototype.constructor); //false
////不知道这个指向如何去判断
当然 console.log(Person === Person.prototype.constructor); //true 指向1
这个可以看出来 从Person 原型对象的constructor指向构造函数,方向性呢。。

고아lyj · 2017年11月08日
0

关于你的第一个问题:如果一定要证明是引用关系,而不是相等关系,可以这样

 function A()
  {
    this.name = "a"
  }
  A.prototype.age = 1
  console.log(A.prototype.age)
  var B = A.prototype//给原型对象命名
  B.age = 2//修改原型对象的值
  console.log(A.prototype.age)//此时通过prototype访问的值已经是2 了 说明这是引用 而不是相等关系
安歌 作者 · 2017年11月08日
0

关于你的第二个问题,由于此时的B.prototype指向A的一个实例对象,实例对象上是没有constructor这个属性的,这一点可以直接通过 console.log(B.prototype)打印出来看,至于B.prototype.constructor为什么可以访问到,那是因为 此时B的这个原型对象 也就是A的一个实例对象,是有_proto_这个属性的,也是就说这个对象还有他的原型(其实就是A.prototype了),这个已经就是原型链了

安歌 作者 · 2017年11月08日
一路向东 · 2018年06月23日

作者,我不明白,在var person1 = new Person('Mike',10);中,通过new操作符调用了函数Person,并且生成了person1,
这里的Person就称为构造函数,不是person1是构造函数吗?

回复

0

构造函数本身应该是函数,所以Person构造函数,person1是调用的结果,叫做实例;如果你之前有看过其他语言(c或者java)的类式继承,那这里Person可以理解为一个Class,如果没看过也没关系,可以把Person当做一个生产物品的工厂,通过这个工厂可以生成具体的产品

安歌 作者 · 2018年06月23日
0

就是person1是实例,Person是构造函数

一路向东 · 2018年06月23日
0
安歌 作者 · 2018年06月23日
白愁离殇 · 6月8日
    var Quo = function (string) {
        this.status = string;
    };
    Quo.prototype['get_status'] = function () {
        return this.status;
    };
    var myQuo = new Quo('按理来说是全局变量');
    myQuo.get_status();

您好,在这样的一个例子中,当实例执行get_status()时,this绑定的是哪个对象呀?我觉得绑定的是实例,但是实例并没有“status”这样一个属性,执行return this.status;的这个过程我不太理解。麻烦您指点一下。

回复

0

使用new实例化的时候,实际的内部代码是这样

 var Quo = function (string) {
        var this = null // 如果没有手动声明 会默认声明一个this空对象 
        this.status = string;
        return this; // 如果函数内部没有其他返回 那么默认返回这个this对象
    };

所以你这边的var myQuo = new Quo('按理来说是全局变量');得到的这个实例对象,就是一个对象,它有一个staus属性,因此调用get_status就可以正常返回。

安歌 作者 · 6月8日
载入中...