js原型、原型链、继承的理解

一、原型、原型链

原型是Javascript中的继承的基础，JavaScript的继承主要依靠原型链来实现的。

原型

​ 在JavaScript中，我们创建一个函数A(就是声明一个函数), 就会为该函数创建一个prototype属性。而且也会在内存中创建一个对象B，A函数的属性 prototype 指向这个对象B( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor， constructor属性指向函数A ( 意思就是说：constructor属性的值是函数A )。

​看下面的代码：

<body>
    <script type="text/javascript">
        /*
            声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
            创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
            有一个属性叫constructor 执行了这个函数
            
            注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
        */
        function Person () {
            
        }       
    </script>
</body>

下面的图描述了声明一个函数之后发生的事情：


image.png

当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候，那么这个对象就会存在一个默认的不可见的属性，来指向了构造函数的原型对象。 这个不可见的属性我们一般用 [[prototype]] 来表示，只是这个属性没有办法直接访问到。

看下面的代码：

<body>
    <script type="text/javascript">
        function Person () {
            
        }   
        /*
            利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
            指向了构造函数的原型对象。
        */
        var p1 = new Person();
    </script>
</body>

观察下面的示意图：


image.png

原型链

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。假如让一个原型对象等于另一个类型的实例，那么此时的原型对象将包含一个指向另一个原型的指针，相应的，另一个原型中也包含一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条，这就是我们说的原型链。

实现原型链有一种基本模式，代码如下：

function SuperType() {
  this.prototype = true;
}
SuperType.prototype.getSuperValue = function () {
  return this.prototype
}

function SubType () {
  this.subprototype = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
  return this.subprototype 
}

var instance = new SubType();
alert(instance.getSuperValue()); // true

以上代码定义了两个类型：SuperType和SubType。每个类型分别有一个属性和方法。它们的主要区别是SubType继承了SuperType，而继承是通过创建SuperType实例。换句话说，原来存在于SuperType的实例中的所有属性和方法，现在也存在于SubType.prototype中了。在确立了继承关系之后，我们给SubType.prototype添加了一个方法，这样就在继承了SuperType的属性和方法的基础上又添加了一个新方法。这个例子中的实例及构造函数和原型之间的关系如图：


image.png
image.png

二、继承

继承的方法：1.原型链继承；2.构造函数继承；3.组合继承； 4.原型式继承； 5.寄生式继承 ；6.寄生组合式继承；

我们先定义一个父类

原型链继承

function SuperType() {
  this.property = true;
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  this.Subproperty = false;
}
SubType.prototype = new SuperType(); // 继承了SuperType
SubType.prototype.getSubValue = function() {
  return this.Subproperty ;
}
var instance = new SubType();
alert(instance.getSuperValue()) // true

继承原理：通过让子类的原型等于父类的实例，来实现继承。
优点：继承了超类型的构造函数的所有属性和方法。
缺点：1、在创建子类实例时，无法向超类型的构造函数传参，继承单一。
　　　2、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型引用类型的属性，另一个实例的原型属性也会被修改！）

function SuperType() {
  this.colors = ['red','blue','green'];
}
function SubType() {
}
SubType.prototype = new SuperType(); // 继承方法

var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red','blue','green','black']

var instance2 = new SubType();
console.log(instance2.colors); // ['red','blue','green','black']

构造函数继承

function SuperType() {
  this.colors = ['red', 'blue', 'green'];
}
function SubType() {
  SuperType.call(this); //  继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']

var instance2 = new SubType();
console.log(instance2.colors); // ['red', 'blue', 'green']

在子类的内部调用父类，通过call改变父类中this的指向。等于是复制父类的实例属性给子类。
优点：可以在子类构造函数中，向超类型构造函数传递参数。
缺点：只继承了父类构造函数的属性，没有继承父类原型的属性。所有的方法都在构造函数中定义，无法实现复用，影响性能。

组合继承 （原型链+构造函数）

function SuperType(name) {
  this.name = name;
  this.colors = ['red','blue','green'];
}
SuperType.prototype.sayNAme = function() {
  alert(this.name);
}
function SubType(name,age) {
  SuperType.call(this, name); // 继承属性
  this.age = age;
}
SubType.prototype = new SuperType(); // 继承方法
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  alert(this.age);
}

var instance1 = new SubType('xxx', 15);
instance1.colors.push('black');
console.log(instance1.colors); // ['red','blue','green','black']
instance1.sayNAme(); // xxx
instance1.sayAge(); // 15

var instance2 = new SubType('yyy', 12);
console.log(instance2.colors); // ['red','blue','green']
instance2.sayNAme(); // yyy
instance2.sayAge(); // 12

使用原型链实现对原型属性和方法的继承，通过构造函数来实现对实例属性的继承。这样既通过在原型上定义方法实现了函数的复用，又能够保证每个实例都有它自己的属性。
缺点：调用两次父类构造函数。

三、与原型有关的几个属性和方法

2.1 prototype属性

​ prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

​ 参考前面的示意图。

2.2 constructor属性

​ constructor属性存在于原型对象中，他指向了构造函数

看下面的代码：

<script type="text/javascript">
    function Person () {
    }
    alert(Person.prototype.constructor === Person); // true
    var p1 = new Person();
    //使用instanceof 操作符可以判断一个对象的类型。  
    //typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
    alert(p1 instanceof Person);    // true
</script>

我们根据需要，可以Person.prototype 属性指定新的对象，来作为Person的原型对象。

但是这个时候有个问题，新的对象的constructor属性则不再指向Person构造函数了。

看下面的代码：

<script type="text/javascript">
    function Person () {
        
    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        name:"志玲",
        age:20
    };
    var p1 = new Person();
    alert(p1.name);  // 志玲

    alert(p1 instanceof Person); // true
    alert(Person.prototype.constructor === Person); //false
    //如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
    /*
    Person.prototype.constructor = Person;  //让constructor重新指向Person函数

    */
</script>

2.3 _ _ proto _ _属性(注意：左右各是2个下划线)

​ 用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。

​ 但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.proto

​ 但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

<script type="text/javascript">
    function Person () {
        
    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        constructor : Person,
        name:"志玲",
        age:20
    };
    var p1 = new Person();

    alert(p1.__proto__ === Person.prototype);   //true
    
</script>

2.4 hasOwnProperty() 方法

​ 大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

​ 那么如何判断这个对象的来源呢？

​ hasOwnProperty方法，可以判断一个属性是否来自对象本身。

<script type="text/javascript">
    function Person () {
        
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    //sex属性是直接在p1属性中添加，所以是true
    alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
    // name属性是在原型中添加的，所以是false
    alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
    //  age 属性不存在，所以也是false
    alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));
    
</script>

所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。

也即是说，在原型中的属性和不存在的属性都会返回fasle。

如何判断一个属性是否存在于原型中呢？

2.5 in 操作符

​ in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

<script type="text/javascript">
    function Person () {
        
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    alert("sex" in p1);     // 对象本身添加的，所以true
    alert("name" in p1);    //原型中存在，所以true
    alert("age" in p1);     //对象和原型中都不存在，所以false
    
</script>

回到前面的问题，如果判断一个属性是否存在于原型中：

如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。

<script type="text/javascript">
    function Person () {
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    
    //定义一个函数去判断原型所在的位置
    function propertyLocation(obj, prop){
        if(!(prop in obj)){
            alert(prop + "属性不存在");
        }else if(obj.hasOwnProperty(prop)){
            alert(prop + "属性存在于对象中");
        }else {
            alert(prop + "对象存在于原型中");
        }
    }
    propertyLocation(p1, "age");
    propertyLocation(p1, "name");
    propertyLocation(p1, "sex");
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342