深入理解javascript原型链和继承

 javascript本身不是面向对象的语言，而是基于对象的语言，对于习惯了其他OO语言的人来说，起初有些不适应，因为在这里没有“类”的概念，或者说“类”和“实例”不区分，更不要指望有“父类”、“子类”之分了。那么，javascript中这一堆对象这么联系起来呢？

幸运的是，javascript在设计之初就提供了“继承”的实现方式，在认识“继承”之前，我们现在先来了解下原型链的概念。

原型链

我们知道原型都有一个指向构造函数的指针，假如我们让SubClass原型对象等于另一个类型的实例new SuperClass()会怎么样？此时，SubClass原型对象包含一个指向SuperClass原型的指针，SuperClass原型中也包含一个指向SuperClass构造函数的指针。。。这样层层递进下去，就形成了一个原型链。

具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function SuperClass(){
  this.name = "women"
}
SuperClass.prototype.sayWhat = function(){
  return this.name + ":i`m a girl!";
}
function SubClass(){
  this.subname = "your sister";
}
SubClass.prototype = new SuperClass();
SubClass.prototype.subSayWhat = function(){
  return this.subname + ":i`m a beautiful girl";
}
var sub = new SubClass();
console.log(sub.sayWhat());//women:i`m a girl!

使用原型链实现继承

通过上面的代码中可以看出SubClass继承了SuperClass的属性和方法，这个继承的实现是通过将SuperClass的实例赋值给SubClass的原型对象，这样SubClass的原型对象就被SuperClass的一个实例覆盖掉了，拥有了它的全部属性和方法，同时还拥有一个指向SuperClass原型对象的指针。

在使用原型链实现继承时有一些需要我们注意的地方：

注意继承后constructor的变化。此处sub的constructor指向的是SuperClass，因为SubClass的原型指向了SuperClass的原型。在了解原型链时，不要忽略掉在末端还有默认的Object对象，这也是我们能在所有对象中使用toString等对象内置方法的原因。

通过原型链实现继承时，不能使用字面量定义原型方法，因为这样会重写原型对象（在上一篇文章中也介绍过）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function SuperClass(){
  this.name = "women"
}
SuperClass.prototype.sayWhat = function(){
  return this.name + ":i`m a girl!";
}
function SubClass(){
  this.subname = "your sister";
}
SubClass.prototype = new SuperClass();
SubClass.prototype = {//此处原型对象被覆盖，因为无法继承SuperClass属性和方法
  subSayWhat:function(){
    return this.subname + ":i`m a beautiful girl";
  }
}
var sub = new SubClass();
console.log(sub.sayWhat());//TypeError: undefined is not a function

实例共享的问题。在前面讲解原型和构造函数时，我们曾经介绍过包含引用类型属性的原型会被所有的实例共享，同样，我们继承而来的原型中也会共享“父类”原型中引用类型的属性，当我们通过原型继承修改了“父类”的引用类型属性后，其他所有继承自该原型的实例都会受到影响，这不仅浪费了资源，也是我们不愿看到的现象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function SuperClass(){
  this.name = "women";
  this.bra = ["a","b"];
}
function SubClass(){
  this.subname = "your sister";
}
SubClass.prototype = new SuperClass();
var sub1 = new SubClass();
sub1.name = "man";
sub1.bra.push("c");
console.log(sub1.name);//man
console.log(sub1.bra);//["a","b","c"]
var sub2 = new SubClass();
console.log(sub1.name);//woman
console.log(sub2.bra);//["a","b","c"]

注意：此处在数组中添加一个元素，所有继承自SuperClass的实例都会受到影响，但是如果修改name属性则不会影响到其他的实例，这是因为数组为引用类型，而name为基本类型。
如何解决实例共享的问题呢？我们接着往下看...

经典继承（constructor stealing）

正如我们介绍过很少单独使用原型定义对象一样，在实际开发中我们也很少单独使用原型链，为了解决引用类型的共享问题，javascript开发者们引入了经典继承的模式（也有人称为借用构造函数继承），它的实现很简单就是在子类型构造函数中调用超类型的构造函数。我们需要借助javascript提供的call()或者apply()函数，我们看下示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function SuperClass() {
  this.name = "women";
  this.bra = ["a", "b"];
}
function SubClass() {
  this.subname = "your sister";
  //将SuperClass的作用域赋予当前构造函数，实现继承
  SuperClass.call(this);
}
  
var sub1 = new SubClass();
sub1.bra.push("c");
console.log(sub1.bra);//["a","b","c"]
var sub2 = new SubClass();
console.log(sub2.bra);//["a","b"]

SuperClass.call(this);这一句话的意思是在SubClass的实例（上下文）环境中调用了SuperClass构造函数的初始化工作，这样每一个实例就会有自己的一份bra属性的副本了，互不产生影响了。
但是，这样的实现方式仍不是完美的，既然引入了构造函数，那么同样我们也面临着上篇中讲到的构造函数存在的问题：如果在构造函数中有方法的定义，那么对于没一个实例都存在一份单独的Function引用，我们的目的其实是想共用这个方法，而且我们在超类型原型中定义的方法，在子类型实例中是无法调用到的：

1
2
3
4
5
6
7
8
9
10
11
12
13

function SuperClass() {
  this.name = "women";
  this.bra = ["a", "b"];
}
SuperClass.prototype.sayWhat = function(){
  console.log("hello");
}
function SubClass() {
  this.subname = "your sister";
  SuperClass.call(this);
}  
var sub1 = new SubClass();
console.log(sub1.sayWhat());//TypeError: undefined is not a function

如果你看过上篇文章关于原型对象和构造函数的，想必你已经知道解决这个问题的答案了，那就是沿用上篇的套路，使用“组合拳”！

组合式继承

组合式继承就是结合原型链和构造函数的优势，发出各自特长，组合起来实现继承的一种方式，简单来说就是使用原型链继承属性和方法，使用借用构造函数来实现实例属性的继承，这样既解决了实例属性共享的问题，也让超类型的属性和方法得到继承：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function SuperClass() {
  this.name = "women";
  this.bra = ["a", "b"];
}
SuperClass.prototype.sayWhat = function(){
  console.log("hello");
}
function SubClass() {
  this.subname = "your sister";
  SuperClass.call(this);       //第二次调用SuperClass
}
SubClass.prototype = new SuperClass(); //第一次调用SuperClass
var sub1 = new SubClass();
console.log(sub1.sayWhat());//hello

组合继承的方式也是实际开发中我们最常用的实现继承的方式，到此已经可以满足你实际开发的需求了，但是人对完美的追求是无止境的，那么，必然会有人对这个模式“吹毛求疵”了：你这个模式调用了两次超类型的构造函数耶！两次耶。。。你造吗，这放大一百倍是多大的性能损失吗？
最有力的反驳莫过于拿出解决方案，好在开发者找到了解决这个问题的最优方案：

寄生组合式继承

在介绍这个继承方式前，我们先了解下寄生构造函数的概念，寄生构造函数类似于前面提到的工厂模式，它的思想是定义一个公共函数，这个函数专门用来处理对象的创建，创建完成后返回这个对象，这个函数很像构造函数，但构造函数是没有返回值的：

1
2
3
4
5
6
7
8
9
10
11
12

function Gf(name,bra){
  var obj = new Object();
  obj.name = name;
  obj.bra = bra;
  obj.sayWhat = function(){
    console.log(this.name);
  }
  return obj;
}
  
var gf1 = new Gf("bingbing","c++");
console.log(gf1.sayWhat());//bingbing

寄生式继承的实现和寄生式构造函数类似，创建一个不依赖于具体类型的“工厂”函数，专门来处理对象的继承过程，然后返回继承后的对象实例，幸运的是这个不需要我们自己实现，道哥（道格拉斯）早已为我们提供了一种实现方式：

1
2
3
4
5
6
7
8
9
10
11

function object(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}
var superClass = {
  name:"bingbing",
  bra:"c++"
}
var subClass = object(superClass);
console.log(subClass.name);//bingbing

在公共函数中提供了一个简单的构造函数，然后将传进来对象的实例赋予构造函数的原型对象，最后返回该构造函数的实例，很简单，但疗效很好，不是吗？这个方式被后人称为“原型式继承”，而寄生式继承正是在原型式基础上，通过增强对象的自定义属性实现的：

1
2
3
4
5
6
7
8
9
10
11
12
13

function buildObj(obj){
  var o = object(obj);
  o.sayWhat = function(){
    console.log("hello");
  }
  return o;
}
var superClass = {
  name:"bingbing",
  bra:"c++"
}
var gf = buildObj(superClass);
gf.sayWhat();//hello

寄生式继承方式同样面临着原型中函数复用的问题，于是，人们又开始拼起了积木，诞生了——寄生组合式继承，目的是解决在指定子类型原型时调用父类型构造函数的问题，同时，达到函数的最大化复用。基于以上基础实现方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//参数为两个构造函数
function inheritObj(sub,sup){
  //实现实例继承，获取超类型的一个副本
  var proto = object(sup.prototype);
  //重新指定proto实例的constructor属性
  proto.constructor = sub;
  //将创建的对象赋值给子类型的原型
  sub.prototype = proto;
}
function SuperClass() {
  this.name = "women";
  this.bra = ["a", "b"];
}
SuperClass.prototype.sayWhat = function() {
  console.log("hello");
}
  
function SubClass() {
  this.subname = "your sister";
  SuperClass.call(this);
}
inheritObj(SubClass,SuperClass);
var sub1 = new SubClass();
console.log(sub1.sayWhat()); //hello

这个实现方式避免了超类型的两次调用，而且也省掉了SubClass.prototype上不必要的属性，同时还保持了原型链，到此真正的结束了继承之旅，这个实现方式也成为了最理想的继承实现方式！人们对于javascript的继承的争议还在继续，有人提倡OO，有人反对在javascript做多余的努力去实现OO的特性，管他呢，至少又深入了解了些！

时间： 2024-12-21 12:00:18

深入理解javascript原型链和继承的相关文章

深入理解javascript原型链和继承_javascript技巧

在上一篇文章中,介绍了原型的概念,了解到在javascript中构造函数.原型对象.实例三个好基友之间的关系:每一个构造函数都有一个"守护神"--原型对象,原型对象心里面也存着一个构造函数的"位置",两情相悦,而实例呢却又"暗恋"着原型对象,她也在心里留存了一个原型对象的位置. javascript本身不是面向对象的语言,而是基于对象的语言,对于习惯了其他OO语言的人来说,起初有些不适应,因为在这里没有"类"的概念,或者说&q

理解JavaScript原型链_javascript技巧

每一个JavaScript对象都和另一个对象相关联,相关联的这个对象就是我们所说的"原型".每一个对象都会从原型继承属性和方法.有一个特殊的对象没有原型,就是Object.在之后的图示中会进行说明. 举个栗子,我们首先声明一个函数Student(): function Student(name){ this.name = name; this.hello = function(){ alert(`Hello,${this.name}`); } } 这个函数包含一个属性name和一个方法

深入浅出理解javaScript原型链_javascript技巧

本文实例讲述了javaScript的原型链.分享给大家供大家参考.具体分析如下: 对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了. 看了这张图后突然对javascript有了质的理解. javascript的原型链有显式和隐式两种: 显式原型链:即我们常见的prototype: 隐式原型链:在一般环境下无法访问,即不可见,在FireFox下可以通过__proto__方式访问:隐式原型链用于jav

深入浅出理解javaScript原型链

  这篇文章主要介绍了对javaScript原型链的理解,以实例形式对javaScript原型链的概念及相关使用技巧做了较为浅显易懂的分析,需要的朋友可以参考下 本文实例讲述了javaScript的原型链.分享给大家供大家参考.具体分析如下: 对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了. 看了这张图后突然对javascript有了质的理解. javascript的原型链有显式和隐式两种: 显

简单粗暴地理解 JavaScript 原型链

原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗称造人. 3)人他妈会记录啪啪啪的信息,所以可

浅谈javascript原型链与继承_javascript技巧

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解.       首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的

JavaScript基于原型链的继承_javascript技巧

Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型链是JavaScript中继承的主要方法. 原型链的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 如果让原型对象等于另一个对象的实例,这样原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中

javascript基于原型链的继承及call和apply函数用法分析_javascript技巧

本文实例讲述了javascript基于原型链的继承及call和apply函数用法.分享给大家供大家参考,具体如下: 1. 继承是面向对象编程语言的一个重要特性,比如Java中,通过extend可以实现多继承,但是JavaScript中的继承方式跟JAVA中有很大的区别,JS中通过原型链的方式实现继承. (1)对象的原型:因为JS中,函数也是对象,因此我们先从对象出发.什么是对象的原型,原型的定义为: 所有通过对象直接量创建的对象都具有同一个函数原型,并且可以通过Object.prototype获

关于JavaScript 原型链的一点个人理解_基础知识

JavaScript借鉴了许多语言的特点:例如语法类Java.函数借鉴Scheme.原型继承借鉴自Self.正则表达式借鉴于Perl.(DC Javascript:语言精粹).      首先,每个JS是一门基于原型继承的面向对象的语言.里面数组是对象.函数是对象."对象"当然还是对象.而且每个对象都有一个internal slot[[prototype]],这才是原型链连接起来的关键.诚然,我们可以为一个对象设置prototype property,但这又怎么样呢,这只是表象:后面暗