[ JavaScript ] JavaScript 实现继承.

对于javascript中的继承,因为js中没有后端语言中的类式继承。所以js中的继承,一般都是原型继承(prototype)。

function P (name){this.name = name;this.say = function(){console.log('p');}
}function S (name,id){this.id = id;this.eat = function(){console.log('s');}
}S.prototype = P.prototype;var s = new S();

以上代代码存在一个重要问题:

S.prototype = P.prototype;

该句代码会导致,在改动子类的prototype的时候,相同会影响父类的prototype元素。

解决方案一般採用new 父级对象的方式:

S.prototype = new P();
这里涉及到new 的工作原理,new P(), 会依据P的prototype对象建立一个实例,然后将构造方法中的成员变量和成员方法设置进去。

此种方式, 改动子类的prototype则不会影响父类的prototpye(因为是新建了一个对象,不再是指向同一个prototype).

设置prototype之后。还须要重置子类S的contrustor,让其重指向 S。而不是new P() 所相应的construstor. 例如以下:

S.prototype.constructor = S;

非常多时候这里不重置。不会出现故障,可是假设后面须要用到constructor 来创建实例,或者判定实例类型,则会出现错误。

所以这里最好是重置。


上面所述的原型继承。尽管能够通过JavaScript原型继承,可是相同存在不足。

此种继承方式。不可以继承在构造方法设置的成员变量和成员方法。仅仅能继承在原型中设置的方法,或者属性。

如:

var s = new S('yang','01');
当中的第一个參数,并不能传递给到name属性。


于是引出另外一种继承方式: 对象冒充。

function P (name){this.name = name;this.say = function(){console.log('p');}
}function S (name,id){P.call(this,name);this.id = id;this.eat = function(){console.log('s');}
}var s = new S('yanghi','test');

在子类构造方法中,借用父类的构造方法。使子类具有父类的属性和方法。

例如以下:

P.call(this,name);

该句代码与例如以下效果一样:

this.name = name;
this.say = function(){}

从而将父类的属性复制到子类中。从而实现对象冒充。

那么该此种对象冒充方式。相同存在问题:

1 无法继承原型prototype中的属性和主法。

2 构造方法的成员方法在父类和子类中都会有一份拷贝,造成内存的添加。


所以最好的实现方式是:

1 对原型对象。採用原型继承

2 构造方法中的属性和方法。採用对象冒充。

这也是当前绝大对数的js继承库所採用的实现方式。例如以下:

function P (name){this.name = name;
}P.prototype.say = function(){console.log('say');
}function S (name,id){P.call(this,name);this.id = id;
}function Bare(){}
Bare.prototype = P.prototype;
S.prototype = new Bare();
S.prototype.constructor = S;S.prototype.eat = function(){console.log('eat');
}var s = new S('yanghi','test');

这里的成员属性。採用对象冒充,成员方法採用原型继承。

注意一点。这里实现原型继承须要採用一个中间变量。例如以下:

S.prototype = new Bare();

假设不採用中间变量。直接new P() 的话,会出现故障。

因为new 会依照P的prototype对象模版,创建一个对象,这一步没有问题。

可是接下来。它会将P构造方法的成员属性也设置到这个对象中,就会导致对这个对象污染。

这里我们仅仅须要它的prototype就能够了。其他的成员变量採用对象冒充的方式就能够了。


第三种实现继承方式,採用ES5 Object.create实现。

//Shape - superclass
function Shape() {this.x = 0;this.y = 0;
}Shape.prototype.move = function(x, y) {this.x += x;this.y += y;console.info("Shape moved.");
};// Rectangle - subclass
function Rectangle() {Shape.call(this); //call super constructor.
}Rectangle.prototype = Object.create(Shape.prototype);var rect = new Rectangle();rect instanceof Rectangle //true.
rect instanceof Shape //true.rect.move(1, 1); //Outputs, "Shape moved."

只是此方式最大的问题还是兼容性,须要 IE 9 + , safari 5 +,opera 11.6 + 


以上就是对象继承的一些问题,以记录之,谨防忘记。


转载于:https://www.cnblogs.com/blfbuaa/p/6881415.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql数据库应用的权限层级_MySQL数据库的用户权限管理

嗨!各位小伙伴今天翻了一下历史记录MySQL 数据库还有点内容今天开始我们就来补上吧~用户权限管理伙伴们要知道,在数据库方面有两个方向。一个是数据库管理员(Database Administrator)简称DBA,一个是数据库开发工程师(Database Developer)&…

linux i2c adapter 增加设备_Linux驱动之I2C驱动架构

一、Linux的I2C体系结构主要由三部分组成:(1) I2C核心提供I2C控制器和设备驱动的注册和注销方法,I2C通信方法,与适配器无关的代码以及探测设备等。(2) I2C控制器驱动(适配器)(3) I2C设备驱动二、重要的结构体i2c_adapter//i2c控制器(适配器)i…

Alpha-end

前言 失心疯病源10团队代码管理github个人感悟 肝不动了,肝不动了。明天如果见不到我,不要太想我。站立会议 队名:PMS530雨勤(组长) 今天完成了那些任务 熬夜肝代码代码签入github明天的计划 肝到凌晨还剩下哪些任务 团…

html 01前沿-web介绍

1. 认识网页 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。 2. 浏览器(显示代码) 浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox…

避免写慢SQL

最近在整理数据库中的慢SQL,同时也查询了相关资料。记录一下,要学会使用执行计划来分析SQL。 1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存。这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的。当有很多相同…

为什么子孙后代会讨厌使用java.util.Stack

在我用无意义的重言式杀死你之前,这是要点 如果您的应用程序接近实时,或者将代码发送到Mars,则需要保留Java中默认的Stack实现。 根据LinkedList编写您自己的版本。 同样,如果您的应用程序是关键任务,并且希望堆栈由…

play 连接mysql_Play framework 2.x 连接mysql | 学步园

笔者所使用的系统为64位 windows7。本文假设java1.5版本以上环境已经搭好,play 框架已经下载至本地。首先我们创建一个项目。命令行进入play的目录命令:play new demo再次输入项目名字输入2 选择java项目创建完成界面OK,一个play框架下的java…

rpm -e --nodeps_微课 | rpm的思维导图

前导课程:微课 | rpm的查询、升级与卸载命令本次微课将演示使用xmind绘制rpm思维导图的过程,包括视频文字,大约需要你10分钟。另外,文末还有一则IT冷笑话,学习之余、会心一笑:)这个思维导图将包含以下内容:…

CentOS7搭建lamp环境

Mysql安装 CentOS 7 版本将MySQL数据库软件从默认的程序列表中移除,用mariadb代替了。MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可。开发这个分支的原因之一是:甲骨文公司收购了MySQL后&#x…

border-sizing属性详解和应用

box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式,不再冗赘。1. 属性讲解 content-box 默认值,也是css2.1中的盒子模型。在计算 width和…

Couchbase:使用Twitter和Java创建大型数据集

在播放/演示Couchbase或任何其他NoSQL引擎时,创建大型数据集的一种简单方法是将Twitter feed注入到数据库中。 对于这个小应用程序,我正在使用: Couchbase Server 2.0服务器 Couchbase Java SDK (将由Maven安装) T…

查找标题已知的窗口句柄,遍历窗口控件句柄

有了回调函数的概念及上面的例子,我们可以继续了。其实想要找到一个标题已知的窗口句柄,用一个API函数就可以了:FindWindow. 其函数原形是: function FindWindow(lpClassName, lpWindowName: PChar): HWND; stdcall; lpClassName:窗口类名.如果只知道标题,可以为空.窗口类名可以…

西门子scl语言编程手册_西门子SCL编程PEEK指令讲解

单词“peek”在英语中表示“偷看,瞥一眼”,在计算机编程中表示“读取数据”。在西门子SCL编程中,PEEK指令可以用来读取输入缓存区(I)、输出缓存区(Q)、位存储区(M)及数据块(DB)中的数据,常用作间接寻址。今天这篇文章,…

HTML第一章:初始HTML

设置ws字体大小&#xff1a;左上角file-->Settings--->在搜索框中输入font网页的第一行一定是<!DOCTYPE html>&#xff1a;网页声明&#xff0c;代表这个页面是h5页面html标签中的leng"en"&#xff1a;意思是网页中会用到英文 <meta>&#xff1a;…

Guava的Collections2:过滤和转换Java集合

Groovy的便利之一是能够通过Groovy的闭包支持轻松地对集合执行过滤和转换操作。 Guava将对集合的过滤和转换引入标准Java&#xff0c;这是本文的主题。 Guava的Collections2类具有两个公共方法&#xff0c;这两个方法都是静态的。 方法filter&#xff08;Collection&#xff0…

钉钉机器人怎么设置自动回复_项目部署成功后触发钉钉机器人发送消息提醒——入门配置...

钉钉建好一个群打开群设置, 找到群机器人添加一个你想要的机器人可以使用自定义自定义机器人可以自定义头像,名字,生成一个webhook(https post的请求地址)到这里, 钉钉机器人设置好了,接下来我们对照文档进行配置https://ding-doc.dingtalk.com/doc#/serverapi2/qf2nxq/XAzBI -…

mysql加锁语法_MySql 加锁问题

1、设置非自动提交 set autocommit0; 这时候 for update才会起作用2、一般用法 set autocommit0; for update(加锁) ; commit/rollback; set autocommit1;首先看一下&#xff0c;set autocommit0 后&#xff0c;执行哪些语句会自动加锁&#xff0c;加的是什么锁&#xff1f…

td过长,将固定宽度table撑开

解决办法&#xff1a; 在table上加上样式: table{table-layout:fixed;word-break:break-all} table-layout:fixed tablle的列宽由表格宽度和列宽设定。 word-break:break-all 允许在单词内换行。 正常情况下&#xff1a; table表格中td过长&#xff1a; 加上样式之后&#…

Spring Boot 之注解@Component @ConfigurationProperties(prefix = sms)

从spring-boot开始&#xff0c;已经支持yml文件形式的配置&#xff0c;ConfigurationProperties的大致作用就是通过它可以把properties或者yml配置直接转成对象 例如&#xff1a; 配置文件: sms.urlXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX sms.appkeyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX …

Java临时缓存API –测试早期草案评审RI

它被称为“ 永无止境的故事 ”。 JSR在11年半前开始运作&#xff0c;并于2001年3月6日通过了JSR 评审投票 。 如果您想知道要获得成千上万个低JSR编号需要什么&#xff0c;那就是秘密。 与迈克尔恩德&#xff08;Michael Ende&#xff09;的德国幻想小说不同&#xff0c;这不是…