js怎样实现继承
js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式
1.使用对象冒充实现继承(该种实现方式可以实现多继承)
实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.parent=Parent;
- this.parent(firstname);
- delete this.parent;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- var mychild=new Child("李");
- mychild.saySomeThing();
2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- this.getName=function()
- {
- return firstname;
- }
- }
- var child=new Child("张");
- Parent.call(child,child.getName());
- child.saySomeThing();
3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- this.getName=function()
- {
- return firstname;
- }
- }
- var child=new Child("张");
- Parent.apply(child,[child.getName()]);
- child.saySomeThing();
4.采用原型链的方式实现继承
实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承
- function Parent()
- {
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- Child.prototype=new Parent();
- var child=new Child("张");
- child.saySomeThing();
5.采用混合模式实现继承
- function Parent()
- {
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- Parent.prototype.sayParent=function()
- {
- alert("this is parentmethod!!!");
- }
- function Child(firstname)
- {
- Parent.call(this);
- this.fname=firstname;
- this.age=40;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- Child.prototype=new Parent();
- var child=new Child("张");
- child.saySomeThing();
- child.sayParent();
js怎样实现继承的更多相关文章
- 浅谈JS中的继承
前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...
- JS创建对象、继承原型、ES6中class继承
面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...
- js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...
- js模拟实现继承功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- js怎么实现继承?
3. js怎么实现继承? 1. 使用原型prototype 这个问题其实之前总结过了……但是面试时候有点忘……主要思想是记得的,但是不会写,还是基础太不牢靠,写的太少了.一开始因为不知道怎么能继承父类 ...
- [js]js原型链继承小结
这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...
- js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
随机推荐
- Android之ExpandableList扩展用法(基于BaseExpandableListAdapter)
1.简介 基于基于BaseExpandableListAdapter扩展的ExpandableList用法,现在网上流行的主要有两种:第一种是向BaseExpandableListAdapter传入两 ...
- [转]sscanf函数具体用法
大学生程序代写 sscanf 名称: sscanf() - 从一个字符串中读进与指定格式相符的数据. 函数原型: Int sscanf( string str, string fmt, mixed v ...
- 关于对H264码流的PS的封装的相关代码实现
1.写在开始之前: 最近因为新工作要维护别人留下的GB模块代码,先熟悉了流程,然后也试着封装了下ps流,结果也能通过测试正常预览了,当然,其中开发读文档的头疼,预览花屏,卡帧的事情都有遇到,当时慢慢的 ...
- Agc012_E Camel and Oases
传送门 题目大意 坐标轴上有$n$个坐标,第$i$个坐标是$x_i$,初始你有一个容量$V$,当两个给定的坐标距离不超过$V$时,你可以从一个坐标到达另一个坐标,同时你还可以令$V=\lfloor \ ...
- BZOJ4545: DQS的trie
BZOJ4545: DQS的trie https://lydsy.com/JudgeOnline/problem.php?id=4545 分析: 对trie用dfs建sam复杂度是\(O(n^2)\) ...
- HDU1257(简单DP)
最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- 【转】 Pro Android学习笔记(三二):Menu(3):Context菜单
目录(?)[-] 什么是Context menu 注册View带有Context menu 填Context菜单内容 Context菜单点击触发 什么是Context menu 在桌面电脑,我们都很熟 ...
- Android audioManager
Android audioManager AudioManager provides access to volume and ringer mode control. 获取对象 Use Contex ...
- 关于javaScript事件委托的那些事
今天是第一次写稿,还是有那么一丢丢小鸡冻...回归正题啦... 关于javaScript事件委托不得不说的那些事,为什么要使用事件委托? 我们可以这么说,假设老板要分配一项任务,首先要秘书叫A君来到办 ...
- Ubuntu 安装Logstash
Logstash 包是从同一存储库中可用,如 Elasticsearch,和我们已经安装了该公钥,因此,让我们共创 Logstash 源列表︰ echo 'deb http://packages.el ...