js实现继承的5种方式

 更新时间:2015年12月01日 15:17:16   作者:梦断天涯  
这篇文章主要介绍了js实现继承的5种方式,具体分析了JavaScript对象冒充、call()方法方式、apply()方法方式、原型链方式及混合方式的具体使用技巧,需要的朋友可以参考下

本文实例讲述了js实现继承的5种方式。分享给大家供大家参考,具体如下:

1、继承第一种方式:对象冒充

function Parent(username){
  this.username = username;
  this.hello = function(){
   alert(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(){
   alert(this.password);
  }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();

2、继承第二种方式:call()方法方式

call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

function test(str){
  alert(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(){
   alert(this.username);
  }
}
function Child(username,password){
  Parent.call(this,username);
  this.password = password;
  this.world = function(){
   alert(this.password);
  }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();

3、继承的第三种方式:apply()方法方式

apply方法接受2个参数,
A、第一个参数与call方法的第一个参数一样,即赋值给类(即方法)中出现的this
B、第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数

function Parent(username){ 
  this.username = username; 
  this.hello = function(){ 
   alert(this.username); 
  } 
} 
function Child(username,password){ 
  Parent.apply(this,new Array(username)); 
  this.password = password; 
  this.world = function(){ 
   alert(this.password); 
  } 
} 
var parent = new Parent("zhangsan"); 
var child = new Child("lisi","123456"); 
parent.hello(); 
child.hello(); 
child.world(); 

4、继承的第四种方式:原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承

function Person(){ 
} 
Person.prototype.hello = "hello"; 
Person.prototype.sayHello = function(){ 
  alert(this.hello); 
} 
function Child(){ 
} 
Child.prototype = new Person();//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承 
Child.prototype.world = "world"; 
Child.prototype.sayWorld = function(){ 
  alert(this.world); 
} 
var c = new Child(); 
c.sayHello(); 
c.sayWorld(); 

5、继承的第五种方式:混合方式

混合了call方式、原型链方式

function Parent(hello){ 
  this.hello = hello; 
} 
Parent.prototype.sayHello = function(){ 
  alert(this.hello); 
} 
function Child(hello,world){ 
  Parent.call(this,hello);//将父类的属性继承过来 
  this.world = world;//新增一些属性 
} 
Child.prototype = new Parent();//将父类的方法继承过来 
Child.prototype.sayWorld = function(){//新增一些方法 
  alert(this.world); 
} 
var c = new Child("zhangsan","lisi"); 
c.sayHello(); 
c.sayWorld();

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • javascript中局部变量和全局变量的区别详解

    javascript中局部变量和全局变量的区别详解

    本文主要是向大家详细的对比分析了javascript中局部变量和全局变量的区别,是篇非常不错的文章,值得仔细去品读,推荐给小伙伴们。
    2015-02-02
  • Javascript 获取鼠标当前的位置实现方法

    Javascript 获取鼠标当前的位置实现方法

    这篇文章主要介绍了Javascript 获取鼠标当前的位置实现方法的相关资料,需要的朋友可以参考下
    2016-10-10
  • JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)

    JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)

    随着移动互联网的不断普及,企业的网络宣传不仅只局限在PC端,还要在移动端发展。我们在自己的网站做了WAP手机完整之后,如果有用户通过手机访问我们的企业顶级域名网站,就要判断跳转到专为的WAP网站,下面小编给大家整理有关手机浏览器跳转WAP手机网站的相关内容
    2015-08-08
  • JavaScript实现图片瀑布流和底部刷新

    JavaScript实现图片瀑布流和底部刷新

    这篇文章主要为大家详细介绍了JavaScript实现图片瀑布流和底部刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • ES6入门教程之Class和Module详解

    ES6入门教程之Class和Module详解

    这篇文章主要给大家介绍了ES6中Class和Module的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • JavaScript学习笔记之DOM操作实例分析

    JavaScript学习笔记之DOM操作实例分析

    这篇文章主要介绍了JavaScript学习笔记之DOM操作,结合实例形式分析了javascript针对dom元素的获取、设置相关操作常用函数使用技巧,需要的朋友可以参考下
    2019-01-01
  • el-tree限制选中个数的实例

    el-tree限制选中个数的实例

    这篇文章主要介绍了el-tree限制选中个数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • uni-app 百度语音识别文字并展示功能实现

    uni-app 百度语音识别文字并展示功能实现

    这篇文章主要介绍了uni-app 百度语音识别文字并展示功能实现,本文主要写的是 uniapp实现语音输入并展示在页面上,纯前端,不涉及后端,需要的朋友可以参考下
    2023-12-12
  • javascript 事件绑定问题

    javascript 事件绑定问题

    在子页面(<iframe></iframe>)创建父级事件!当子页面(<iframe></iframe>)被销毁!子页面(<iframe></iframe>)创建父级事件也会被销毁!
    2011-01-01
  • 解析Javascript中难以理解的11个问题

    解析Javascript中难以理解的11个问题

    这篇文章主要是对Javascript中难以理解的11个问题进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论