深入理解javascript原型链和继承


Posted in Javascript onSeptember 23, 2014

在上一篇文章中,介绍了原型的概念,了解到在javascript中构造函数、原型对象、实例三个好基友之间的关系:每一个构造函数都有一个“守护神”——原型对象,原型对象心里面也存着一个构造函数的“位置”,两情相悦,而实例呢却又“暗恋”着原型对象,她也在心里留存了一个原型对象的位置。

javascript本身不是面向对象的语言,而是基于对象的语言,对于习惯了其他OO语言的人来说,起初有些不适应,因为在这里没有“类”的概念,或者说“类”和“实例”不区分,更不要指望有“父类”、“子类”之分了。那么,javascript中这一堆对象这么联系起来呢?
幸运的是,javascript在设计之初就提供了“继承”的实现方式,在认识“继承”之前,我们现在先来了解下原型链的概念。

原型链

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

深入理解javascript原型链和继承

具体代码如下:

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等对象内置方法的原因。

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

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

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

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()函数,我们看下示例:

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引用,我们的目的其实是想共用这个方法,而且我们在超类型原型中定义的方法,在子类型实例中是无法调用到的:

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

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

组合式继承

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

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

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

寄生组合式继承

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

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

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

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

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

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

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

//参数为两个构造函数
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的特性,管他呢,至少又深入了解了些!

Javascript 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
深入理解javascript构造函数和原型对象
Sep 23 #Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 #Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 #Javascript
IE6 hack for js 集锦
Sep 23 #Javascript
深入理解javascript作用域和闭包
Sep 23 #Javascript
js变量、作用域及内存详解
Sep 23 #Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 #Javascript
You might like
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python格式化css文件的方法
2015/03/10 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
总经理助理的职责
2014/03/14 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
感谢信格式范文
2015/01/22 职场文书
军训决心书范文
2015/09/22 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python