图解原型原型链

图解原型原型链

原型 ?在“类”中(也就是函数中)的prototype就指向一个原型对象,在实例中,__proto__就指向的是一个构造它的那个“类”(函数)的原型,通过protoype与__proto__就会形成一个原型链,对于一个实例来说,就是谁构造的我,我的__proto__就指向谁的原型,直到最顶层的Object,对于“类”(函数)来说,我的prototype指向的是我自己的原型,我里面也有__proto__这个属性,谁构造的我,我指向谁的原型,直到最顶层的Object

说了是图解,那就用图来说,下面的是我的JavaScript代码,我所要展示的图是基于它的,所以也需要认真看一看,补充一点吧,我想我喜欢firefox的原因就是它的控制台的变量视图这个东西,如果你想实际的验证一下的话,推荐在firefox下查看,这会让你更加清楚原型和原型链

function superClass() {
  this.name = 'alias';
  this.age = 18;
}

superClass.prototype.getAge = function() {
  return this.age;
}

function sub() {
  this.subAge = 8;
}

sub.prototype = new superClass();

sub.prototype.getSubAge = function() {
  return this.subAge;
}

console.log(sub);
console.log(new superClass());
console.log(superClass);
console.log(new sub());

对上面的代码,简单做一个分析,不要认为很难,其实没那么难。首先我写了一个superClass的函数,这个函数内部中我写了两个属性,然后再给它的原型上添加了一个原型(superClass.prototype就指向的是原型对象)方法,又写了一个sub这个函数,sub.prototype = new superClass();,可能你没看懂这句话,这句话意思是说,我通过new superClass()得到了一个superClass的实例对象,我让sub.prototype指向了这个实例对象,这里记住,prototype是指针,那么这个实例是怎样的呢?这个跟new关键字就有关系了,这个实例执行了superClass的构造方法,也会通过__proto__这个内置指针指向superClass的原型

图解部分:

这是用变量视图打开的sub

这里写图片描述

这是用变量视图打开的superClass的实例

这里写图片描述

这是用变量视图打开的superClass

这里写图片描述

这是用变量视图打开的sub的实例

这里写图片描述

所以你在分析原型的时候,心里要可以自己画出相应的图,许多问题就没有那么难了,比如 “继承”

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页