第21篇 js四种继承方式
js是一个很自由的语言,没有强类型的语言的那种限制,实现一个功能往往有很多做法。继承就是其中的一个,在js中继承大概可以分为四大类,上面一篇文章也提及过一些,下面开始详细说说js的继承。
1、原型继承---最简单,最常用的
function funcA(){ this.show=function(){ console.log("hello"); } } function funcB(){ } funcB.prototype=new funcA(); var b=new funcB(); b.show();
这里是运用原型链的特性实现,缺点也是很明显,如果继承的层次比较多的话,修改顶层的原型的方法,会对下面所有的对象产生影响。
2、原型冒充:
function funcA(age){ this.name="xiaoxiao"; this.age=age; this.show=function(){ console.log(this.name+this.age) } } function funcB(){ this.parent=funcA; this.parent(40); delete this.parent; } var b=new funcB(); b.show();
这个继承的方法很好理解,只不过把funcA中的代码都拿到funcB中执行一下,其实可以解释成:
function funcA(age){ this.name="xiaoxiao"; this.age=age; this.show=function(){ console.log(this.name+this.age) } } function funcB(){ // this.parent=funcA; // this.parent(40); // delete this.parent; //其实上面的过程只不是是把funcA搬过来 this.name="xiaoxiao"; this.age=age; this.show=function(){ console.log(this.name+this.age) } } var b=new funcB(); b.show();
明白了吗?
3、call和apply
这个在上面一篇文章到也提到了,也详细说明了原因,相信如果认真把原型的理解了这个就so easy.
下面不多说了,看看代码:
function funcA() { this.show = function(str) { console.log(str); } } function funcB() { this.read = function() {} } var a = new funcA(); var b = new funcB(); funcA.call(b);//use call a.show("a"); b.show("b");
call和apply效果是一样的,不过是传参方式上不一样,但是推荐用call,因为apply的效率会低很多,至于为什么,后面会说到。
4、复制继承
function funcA(){ this.name="hello"; this.show=function(){ console.log(this.name); } } function funcB(){ this.extend=function(o){ for(var p in o){ this[p]=o[p]; } } } var a=new funcA(); var b=new funcB(); b.extend(a); b.show();
这个类似于jquery的extend的方法,原理是把a中的属性遍历到b中。
好了,以上是今天的内容,比较简单,只要善于总结,这些相信在你的学习中会有帮助。下次写上下文中的this.
写于 2015.11.16
第21篇 js四种继承方式的更多相关文章
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- Javascript的四种继承方式
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- js 四种调用方式 Method Invocation Pattern
4.3. Invocation Invoking a function suspends the execution of the current function, passing control ...
- js实现的几种继承方式
他山之石,可以攻玉,本人一直以谦虚的态度学他人之所长,补自己之所短,望各位老师指正! 拜谢 js几种继承方式,学习中的总结: 所谓的继承是为了继承共有的属性,减少不必要代码的书写 第一种:借用构造函数 ...
- 重新理解JS的6种继承方式
写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...
- js的6种继承方式
重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...
- js的5种继承方式——前端面试
js主要有以下几种继承方式:对象冒充,call()方法,apply()方法,原型链继承以及混合方式.下面就每种方法就代码讲解具体的继承是怎么实现的. 1.继承第一种方式:对象冒充 function P ...
- 细说 js 的7种继承方式
在这之前,先搞清楚下面这个问题: function Father(){} Father.prototype.name = 'father'; Father.prototype.children = [ ...
- js的三种继承方式及其优缺点
[转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...
随机推荐
- JAVA中用于处理字符串的“三兄弟”
JAVA中用于处理字符串常用的有三个类:java.lang.String.java.lang.StringBuffer.java.lang.StringBuilder,这三者的共同之处都是final类 ...
- JS内存泄漏排查方法——Chrome Profiles
一.概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件 ...
- 常用SQL DDL语句
常用SQL DDL语句 DDL-数据库定义语言:直接提交的.CREATE:用于创建数据库对象.DECLARE:除了是创建只在过程中使用的临时表外,DECLARE语句和CREATE语句非常相似.唯一可以 ...
- php模式设计之 中介者模式
中介者模式 中介者模式用于开发一个对象,这个对象能够在类似对象相互之间不直接相互的情况下传送或者调解对这些对象的集合的修改.一般处理具有类似属性,需要保持同步的非耦合对象时,最佳的做法就是中介者模式. ...
- 在Delphi中隐藏程序进程
在开发某些软件的时候,为了保护程序自身,就需要用到隐藏程序进程.以下通过实例来讲解隐藏程序进程的方法: 1.创建一个新的项目 Project1 选择File,New Application.在表单Fo ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- HDU-1864-最大报销额
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1864 这题开始题意没搞清楚,就做题了,导致浪费了很多的时间,不应该啊, 注意事项:每张发票上,单项物品 ...
- 大数据时代的杀手锏----Tachyon
一.Tachyon系统的简介 Tachyon是一个分布式内存文件系统,可以在集群里以访问内存的速度来访问存在tachyon里的文件.把 Tachyon是架构在最底层的分布式文件存储和上层的各种计算框架 ...
- C# 泛型初探
初探的类: public class TClass { /// <summary> /// int参数 /// </summary> /// <param name=&q ...
- Jsoup后台解析html、jsp网页
在一些网络爬虫或者从第三方网站抓取信息的程序都面临1个问题,如何从网页中把所需的信息提取出来,Jsoup是个比较好的选择,它能把网站内容解析成Document,再从document中取element就 ...