深入理解js——构造函数的继承
看了阮一峰的网络日志(http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html),记录一下构造函数继承的几种方式。
1、构造函数绑定
使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:Parent.apply(Child, arguments);
2、使用prototype模式
第一步(删除Child的prototype 对象原先的值,赋予一个新值):Child.prototype = new Parent();
第二步(Child的原型的构造器指向Child):Child.prototype.constructor = Child;
3、直接继承prototype
Child.prototype = Parent.prototype;
Child.prototype.constructor = Child;
4、利用空对象作为中介
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
5、拷贝继承
第一步:把Parent的所有不变属性,都放到它的prototype对象上。
第二步:将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象。
function extend(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}
深入理解js——构造函数的继承的更多相关文章
- 详细理解JS中的继承
正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承 ...
- 深入理解js构造函数
JavaScript对象的创建方式 在JavaScript中,创建对象的方式包括两种:对象字面量和使用new表达式.对象字面量是一种灵活方便的书写方式,例如: ? 1 2 3 4 5 6 var o1 ...
- 【JS】深入理解JS原型和继承
前言 在学习JS中的原型,原型链,继承这些知识之前,我们先学习下基础知识:函数和对象的关系. 我们一直都知道,函数也是对象的一种,因为通过instanceof就可以判断出来.但是函数和对象的关系并不 ...
- 一个小实例理解js 原型和继承
导语1:一个构造函数的原型对象,其实就是这个构造函数的一个属性而已,属性名叫prototype,值是一个对象,对象中有一些属性和方法,所以每个构造函数的实例对象都拥有这些属性和方法的使用权. 导语2: ...
- js构造函数和继承实现方式
- JavaScript 构造函数的继承
JavaScript 构造函数的继承 在上一篇文章中讲述了 JS 对象.构造函数以及原型模式,这篇文章来讨论下 JavaScript 的继承 继承是 OO 语言中的一个最为人津津乐道的概念.许多 OO ...
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- 关于js中原生构造函数的继承
前言 在如今快节奏的工作当中,很多基础的东西会渐渐地被丢掉.就如继承这个话题,写React的同学应该都是class xxx extends React.Component,然而这可以理解为es5的一个 ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
随机推荐
- spring无法接收上传文件
现象 前端用ajax方式提交表单,代码类似于下面的例子. var formData = new FormData(); // HTML 文件类型input,由用户选择 formData.append( ...
- js动态添加的元素绑定事件
最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...
- padding 填充
CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距. padding(填充) 当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背 ...
- PHP filter_list() 函数
定义和用法 filter_list() 函数返回包含所有得到支持的过滤器的一个数组. 语法 filter_list() 提示和注释 注释:该函数的结果不是过滤器 ID,而是过滤器名称.请使用 filt ...
- pic16f877a的AD实验学习
一.主函数 //采集AD值 #include <pic.h> #include "ad.h" #include "usart.h" __CONFIG ...
- 二叉树入门(洛谷P1305)
题目描述 输入一串完全二叉树,用遍历前序打出. 输入输出格式 输入格式: 第一行为二叉树的节点数n. 后面n行,每一个字母为节点,后两个字母分别为其左右儿子. 空节点用*表示 输出格式: 前序排列的完 ...
- 【Flutter学习】事件处理与通知之事件处理
一,概述 移动应用中一个必不可少的环节就是与用户的交互,在Flutter中提供的手势检测为GestureDetector. Flutter中的手势系统分为二层: 第一层是触摸原事件(指针) Point ...
- Adobe 2019 全家桶 Mac 版(最新版)
经过不断的改革换新,Adobe2019系列已经全面来袭.在软件更新的同时,激活工具也不断的完善!小编带来的是Adobe2019注册机专门为同系列软件量身定做的注册破解工具! ▌软件下载-关注公众号 ...
- vue中setTimeout切换浏览器页签时怎么清除解决方案
大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroye ...
- 聊一聊 http2.0
1. 我们认识http 协议,从最初的,客户端与服务器进行通讯,基于连接发生的请求与响应 在HTTP1.0时代,连接无法复用,每次下完单,都被强制登出/关机,下一次下单,就得重新登录. 为了解决htt ...