`
imrt
  • 浏览: 914 次
  • 性别: Icon_minigender_1
  • 来自: 漳州
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript 类的5种继承方式

 
阅读更多

1.第一种方式,冒充对象的方式.(利用js里的每一个方法名都是一个Function对象) 

Java代码 
  1. //第一种方式,冒充对象的方式.(利用js里的每一个方法名都是一个Function对象)  
  2. function Parent(username){  
  3.     this.username = username;  
  4.     this.say = function(){  
  5.         alert(this.username);  
  6.     }  
  7. }  
  8.   
  9. function Child(username,password){  
  10.       
  11.     this.temp = Parent;//temp指向Parent所指向的地方 。 利用js里的每一个方法名都是一个Function对象,指向一个方法。  
  12.     this.temp(username);//初始化方法里的内容  
  13.     delete this.temp;//temp没有用了。可以直接删除掉.this不可以丢了  
  14.       
  15.       
  16.     //Parent(username);//这样写表面看起来是正确的,其实是错误的。因为只有new出来的对象才有this,所以调用Parent里的this就没有值了  
  17.       
  18.       
  19.     this.password = password;  
  20.     this.hello = function(){  
  21.         alert(this.password);  
  22.     }  
  23. }  
  24.   
  25. var parent = new Parent("zhangsan");  
  26. parent.say();//zhangsan  
  27.   
  28. var child = new Child("lisi","123456");  
  29. child.say();//lisi  
  30. child.hello();//123456  


2.第二种方式:call()函数方式 

call()函数是Function对象的一个函数,具体用法如下 
Java代码 
  1. //call()函数是Function对象的一个函数  
  2. //具体用法如   
  3. function test(str){  
  4.     alert(this.username + ","  + str);  
  5. }  
  6.   
  7. var o = new Object();  
  8. o.username = "zhangsan";  
  9. test.call(o,"123456");//zhangsan,123456 .因为每个Function 对象都有一个call()方法,而函数名就是一个Function对象.call()函数的第一个参数是test函数里的this.  


所以继承可以这样实现: 
Java代码 
  1. function Parent(username){  
  2.     this.username = username;  
  3.     this.say = function(){  
  4.         alert(this.username);  
  5.     }  
  6. }  
  7. function Child(username,password){  
  8.     Parent.call(this,username);  
  9.     this.password = password;  
  10.     this.hello = function(){  
  11.         alert(this.password);  
  12.     }  
  13. }  
  14. var parent = new Parent("zhangsan");  
  15. parent.say();//zhangsan  
  16.   
  17. var child = new Child("lisi","123456");  
  18. child.say();//lisi  
  19. child.hello();//123456  



3.第三种实现方式:apply()函数方式,apply()和call()是一样的,只不过参数传递不同而已,apply的参数为数组 

Java代码 
  1. //第三种实现方式:apply()函数方式,apply()和call()是一样的,只不过参数传递不同而已,apply的参数为数组  
  2. //所以继承可以这样实现  
  3.   
  4. function Parent(username){  
  5.     this.username = username;  
  6.     this.say = function(){  
  7.         alert(this.username);  
  8.     }  
  9. }  
  10. function Child(username,password){  
  11.     Parent.apply(this,new Array(username));  
  12.     this.password = password;  
  13.     this.hello = function(){  
  14.         alert(this.password);  
  15.     }  
  16. }  
  17. var parent = new Parent("zhangsan");  
  18. parent.say();//zhangsan  
  19.   
  20. var child = new Child("lisi","123456");  
  21. child.say();//lisi  
  22. child.hello();//123456  



4. 第4种方式:原型链实现继承 

Java代码 
  1. //原型链实现继承  
  2. function Parent(){  
  3. }  
  4. Parent.prototype.hello = "hello";  
  5. Parent.prototype.sayHello = function(){  
  6.     alert(this.hello);  
  7. }  
  8.   
  9. function Child (){  
  10. }  
  11. Child.prototype = new Parent();//关键  
  12.   
  13. Child.prototype.world = "world";  
  14. Child.prototype.sayWorld = function(){  
  15.     alert(this.world);  
  16. }  
  17.   
  18. var child = new Child();  
  19. child.sayHello();  
  20. child.sayWorld();  


5.第五种方式:混合模式实现继承 
Java代码 
  1. //混合模式实现继承  
  2. function Parent(hello){  
  3.     this.hello = hello;  
  4. }  
  5. Parent.prototype.sayHello = function(){  
  6.     alert(this.hello);  
  7. }  
  8.   
  9. function Child(hello,world){  
  10.     this.world = world;  
  11.     Parent.call(this,hello);//关键  
  12.   
  13. }  
  14. Child.prototype = new Parent(); //关键  
  15. Child.prototype.sayWorld = function(){  
  16.     alert(this.world);  
  17. }  
  18.   
  19. var child = new Child("hello","world");  
  20. child.sayHello();  
  21. child.sayWorld();  
分享到:
评论

相关推荐

    JavaScript实现继承的几种方式

    本篇文章将深入探讨JavaScript中实现继承的几种常见方式。 1. 原型链继承 JavaScript的原型(prototype)机制是实现继承的基础。每个函数都有一个prototype属性,这个属性指向一个对象,这个对象的属性和方法可以被...

    javascript 原生态js类继承实现的方式

    我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。

    JavaScript学习之三 — JavaScript实现继承的7种方式

    本篇文章将深入探讨JavaScript实现继承的七种常见方式,帮助你更好地理解和运用这一概念。 1. 原型链继承(Prototype Chain Inheritance) 原型链是JavaScript实现继承的基础。每个函数都有一个`prototype`属性,这...

    JavaScript五种继承方式

    JavaScript继承第1种方式:对象冒充;第2种方式:call方法;第3种方式:apply方法;第4种方式:原型链方式;第5种方式:混合方式(推荐)

    【JavaScript的9种继承实现方式归纳】js实现继承的几种方式.pdf

    JavaScript 中的继承方式是基于原型的,与基于类的编程语言,如 C++ 和 Java,截然不同。JavaScript 的灵活性使得其实现继承的方式非常多样化。本文将介绍 JavaScript 中的 9 种继承实现方式,帮助读者更好地理解 ...

    JavaScript中的类继承

    JavaScript中的类继承是一种模拟传统面向对象编程中类概念的方式,因为JavaScript本身是一种基于原型的面向对象语言。在JavaScript中,对象可以直接从其他对象继承属性和方法,而不是通过类的实例化。这种继承机制...

    javascript 五种继承

    javascript 五种继承简介。

    JavaScript继承

    此外,JavaScript的灵活性允许开发者选择基于类的继承方式,或者利用原型继承的微妙之处,实现更高效的设计。 4.1 为什么需要继承 继承的主要目的是代码复用和降低耦合度。通过继承,可以在已有类的基础上扩展功能...

    javascript控件开发之继承关系

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,尤其在前端开发中占据核心地位。控件开发是JavaScript应用中的重要部分,它涉及到UI组件的创建和功能实现。在这个主题中,“javascript控件开发之继承关系”...

    学习javascript面向对象 javascript实现继承的方式

    本文将详细介绍六种实现JavaScript继承的方法。 1. 原型链继承 原型链继承是通过改变子类型的原型对象来实现继承的。子类型构造函数的原型被替换为超类型构造函数的一个实例,这样子类型就可以继承超类型的所有属性...

    Javascript编程 类的继承及封装:Class

    笔者历经多年javascript的开发,痛彻体会javascript面向对象编程的不便性,精心制作了一个类的定义与继承功能的js,实现了在javascript中对类的定义、继承、封装机制,主要功能特征包括:  一、 统一了类定义的语法...

    javascript中类和继承(代码示例+prototype.js)

    JavaScript是一种动态类型的语言,它没有像Java或C++那样的传统类,而是使用函数作为构造器来模拟类的行为,并通过原型链实现继承。本文将深入探讨JavaScript中的类和继承,并结合`prototype.js`文件中的示例进行...

    Javascript中的几种继承方式对比分析_.docx

    Javascript中的几种继承方式对比分析_.docx

    【温故而知新】JavaScript类、类继承、静态方法.md

    【温故而知新】JavaScript类、类继承、静态方法

    javascript的几种继承方法介绍.doc

    javascript的几种继承方法介绍.doc

    javascript的几种继承方法介绍_.docx

    JavaScript 是一种动态类型的编程语言,其核心特性之一就是原型继承。在JavaScript中,对象可以通过原型链实现继承,这是JavaScript中实现面向对象编程的重要方式。本文将详细介绍JavaScript中的三种主要继承方法:...

    JavaScript继承机制研究.pdf

    JavaScript继承机制的实现方式多样化,每种继承机制都有其优缺点。通过深入理解JavaScript继承机制,可以更好地理解JavaScript面向对象编程机制,并提高开发效率。本文对JavaScript继承机制的研究将有助于读者更好地...

    JavaScript定义类的几种方式总结

    ES6中引入了class关键字和extends关键字,它们提供了一种更加直观和面向对象的方式来定义和继承类,使得JavaScript的面向对象编程更加接近传统面向对象语言的模式。通过class关键字定义的类,其内部的构造函数方法...

    JavaScript中的继承之类继承_.docx

    本文将详细介绍JavaScript中的类继承概念,包括基本原理、实现方式以及一些高级用法。 #### 二、继承概述 在JavaScript中,继承主要通过原型链来实现。每个对象都有一个`prototype`属性,指向它的原型对象。当尝试...

Global site tag (gtag.js) - Google Analytics