JavaScript原型继承和原型链原理详解


Posted in Javascript onFebruary 04, 2020

这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性。

这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间。同时还可以向构造函数传递参数,十分的方便。

这里还要再讲一下两种特色的构造函数模式:

1.寄生构造函数

从形式上来看,这种模式和工厂模式并无区别:

function Person(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function() {
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

都是在内部创建一个Object对象实例,再赋予属性和方法,最后返回,这种构造模式的好处是,对于原生的引用类型创建的实例,例如Array,想为实例创建新的方法或者属性时,因为不建议直接修改原生的Array引用类型的构造函数,所以可以利用寄生构造函数:

function SpecialArray() {
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values, arguments);
  //添加方法
  values.toPipedString = function() {
    return this.join("|");
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"

通过在内部创建一个Array实例,并添加新的方法,最后将这个实例返回,既没有修改原生的Array构造函数,又成功添加了自定义的方法和属性。

缺点:使用寄生构造函数有一个缺点,那就是返回的实例与构造函数或构造函数原型属性之间没有关系,与在构造函数外创建实例没有区别,也无法通过instanceof来确定对象类型,因此有其他更好选择的时候,不推荐使用该方法。

2.稳妥构造函数

稳妥构造函数与寄生构造函数类似,但是并不使用new和this(某些环境下禁止使用),前面的函数可以改写成这样:

function Person(name, age, job) {
  //创建要返回的对象
  var o = new Object();

  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function() {
    alert(name);
  };
  //返回对象
  return o;
}

说完这些,现在来谈谈原型继承和原型链,所谓继承,基本思想是利用原型让一个引用类型继承另一个引用类型的方法和属性。每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。所有引用类型默认都继承了Object,而这个继承也是通过原型链实现的。大家要记住,所有函数的默认原型都是Object 的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。

借用构造函数(即在子类型构造函数的内部调用超类型构造函数)

如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定
义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结
果所有类型都只能使用构造函数模式。考虑到这些问题,借用构造函数的技术也是很少单独使用的。

组合继承(思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承)

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("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

SuperType 构造函数定义了两个属性:name 和colors。SuperType 的原型定义了一个方法sayName()。SubType 构造函数在调用SuperType 构造函数时传入了name 参数,紧接着又定义了它自己的属性age。然后,将SuperType 的实例赋值给SubType 的原型,然后又在该新原型上定义了方法sayAge()。这样一来,就可以让两个不同的SubType 实例既分别拥有自己属性——包括colors 属性,又可以使用相同的方法了。

原型式继承(借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型)

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

在没有必要兴师动众地创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式
继承是完全可以胜任的。不过别忘了,包含引用类型值的属性始终都会共享相应的值,就像使用原型模
式一样。

寄生式继承(寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象)

function createAnother(original) {
  var clone = object(original); //通过调用函数创建一个新对象
  clone.sayHi = function() { //以某种方式来增强这个对象
    alert("hi");
  };
  return clone; //返回这个对象
}

寄生组合式继承

通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 #Javascript
Vue中this.$nextTick的作用及用法
Feb 04 #Javascript
JS中this的4种绑定规则详解
Feb 04 #Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 #Javascript
Preload基础使用方法详解
Feb 03 #Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 #Javascript
使用preload预加载页面资源时注意事项
Feb 03 #Javascript
You might like
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python正则简单实例分析
2017/03/21 Python
python语音识别实践之百度语音API
2018/08/30 Python
python实现高斯投影正反算方式
2020/01/17 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
机关党员公开承诺书
2014/08/30 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS