js继承
js继承有5种实现方式:
- 继承第一种方式:对象冒充
function Parent(username){
this.username = username;
this.hello = function(){
document.write(this.username);
}
}
function Child(username,password){
//通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承
//第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对象,
//第二步:执行this.method方法,即执行Parent所指向的对象函数
//第三步:销毁this.method属性,即此时Child就已经拥有了Parent的所有属性和方法
this.method = Parent;
this.method(username);//最关键的一行
delete this.method;
this.password = password;
this.world = function(){
document.write(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
- 继承第二种方式:call()方法方式
call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数
function test(str){
document.write(this.name + " " + str);
}
var object = new Object();
object.name = "zhangsan";
test.call(object,"langsin");//此时,第一个参数值object传递给了test类(即方法)中出现的this,而第二个参数"langsin"则赋值给了test类(即方法)的str
function Parent(username){
this.username = username;
this.hello = function(){
document.write(this.username);
}
}
function Child(username,password){
Parent.call(this,username);
this.password = password;
this.world = function(){
document.write(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
- 继承的第三种方式:apply()方法方式
apply方法接受2个参数:
A、第一个参数与call方法的第一个参数一样,即赋值给类(即方法)中出现的this
B、第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数
function Parent(username){
this.username = username;
this.hello = function(){
document.write(this.username);
}
}
function Child(username,password){
Parent.apply(this,new Array(username));
this.password = password;
this.world = function(){
document.write(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
- 继承的第四种方式:原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承
function Person(){
}
Person.prototype.hello = "hello";
Person.prototype.sayHello = function(){
document.write(this.hello);
}
function Child(){
}
//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承
Child.prototype = new Person();
Child.prototype.world = "world";
Child.prototype.sayWorld = function(){
document.write(this.world);
}
var c = new Child();
c.sayHello();
c.sayWorld();
- 继承的第五种方式:混合方式 ,混合了call方式、原型链方式
function Parent(hello){
this.hello = hello;
}
Parent.prototype.sayHello = function(){
document.write(this.world);
}
function Child(hello,world){
Parent.call(this,hello);//将父类的属性继承过来
this.world = world;//新增一些属性
}
//将父类的方法继承过来
Child.prototype = new Parent();
//新增一些方法
Child.prototype.sayWorld = function(){
document.write(this.world);
}
var c = new Child("zhangsan","lisi");
c.sayHello();
c.sayWorld();
js继承的更多相关文章
- js继承之call,apply和prototype随谈
在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...
- js继承精益求精之寄生式组合继承
一.混合/组合继承的不足 上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原 ...
- 老生常谈--Js继承小结
一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.net/stoy ...
- Js继承小结
Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...
- js继承实现
JS实现继承可以分为:对象冒充和原型链继承 其中对象冒充又包括:临时变量,call 和 apply 临时变量方法: function Person(name,sex){ this.name = nam ...
- js继承之借用构造函数继承
我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现 ...
- js继承之原型链继承
面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...
- js继承的常用方法
写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的 ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)
一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...
随机推荐
- sassCore
core文件 setting 负责基础变量的文件,如常用的颜色,字体等变量. css3 负责css3属性前缀的文件.参考了bourbon,然后进行一系列的扩展及优化,以使解析出来的代码更加合理. me ...
- DOM Document
1.DOM Document对象 定义:每个载入浏览器的 HTML 文档都会成为 Document 对象.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. Docume ...
- html5 canvas画不出图像的原因
很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...
- 用Java写算法之归并排序
转自:http://flyingcat2013.blog.51cto.com/7061638/1281026 前面的三种排序算法(冒泡排序,选择排序,插入排序)在平均情况下均为O(n^2)复杂度,在处 ...
- 关于checkbox复选框
1.复选框后面为什么会有间距,如图 首先这肯定不是空格.实际上是这样的,在Firefox,chrome,Safari等现代浏览器下复选框与文字的间隔确实是由margin引起的,也就是默认情况下,che ...
- 小白如何进入IOS,答案就在这里
***对于进来看过我博客的博友们,请看一下最后面的几道题,觉得可以的可以自己私下做一下,有不懂的我们可以相互交流*** 现在我来说一下我们IOS需要的基础,现在用的比较多的就是swift语言. 首先, ...
- sql一个表中两个字段合并求和
sql一个表中两个字段,合并求和 SELECT SUM(字段a+'.'+字段b) as total from TABLE
- go 静态web服务器
package main import ( "net/http" ) type helloHandler struct{} func (h *helloHandler) Serve ...
- test3
下面写几个示例:这是行内公式: \( e^{\pi i} + 1 = 0\) ,下面的是行间公式: \[ e^{\pi i} + 1 = 0. \] 另一个复杂的公式: $$J_\alpha (x) ...
- 未能正确加载“RoslynPackage”包
一打开新建程序或者打开项目就报错,原因是安装的组件或者模板丢失或者有问题,在这一过程加载组件必定会产生错误,以下为解决方法: 1.重命名以下文件夹C:\Users\moonlight\Local Se ...