热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javascript面向对象程序设计——继承初步(byvczero)

上一篇说了javascript的封装,没有刻意去说javascript的“共有函数”、“私有函数”,因为个人觉得这只是作用域的问题,我们不能刻意的模仿强类型语言(C++JAVA)而

上一篇说了Javascript的封装,没有刻意去说Javascript的“共有函数”、“私有函数”,因为个人觉得这只是作用域的问题,我们不能刻意的模仿强类型语言(C++/JAVA)而去编写代码。尊重每一门语言的特性才是最为重要的。

一、基于prototype原型的继承

 1 var Person = function(name, age){
 2         this.name = name;
 3         this.age = age;
 4     }
 5 
 6     Person.prototype = {
 7         addUser: function(){
 8             console.log(‘用户:‘ + this.name + ‘已添加‘);
 9         },
10 
11         getName: function(){
12             return this.name;
13         }
14     }
15 
16     Person.getUser = function(user){
17         console.log(user.name + ‘已经找到‘);
18     }
19 
20     var p = new Person(‘山鬼谣‘, 30);
21     console.log(p.name);//山鬼谣
22     p.addUser();//用户:山鬼谣已经添加
23     Person.getUser(p); //山鬼谣已经找到

这时,我们看到《侠岚》中的游不动(人名)也出现了,但是游不动是最为基本的侠岚(四象侠岚),因此游不动具有自己的个性特征。因此,我们需要构建四象侠岚的类SiXiang,但是四象侠岚又具备最基本的Person特性,因此继承于Person。

 1     var Sixiang = function(name, age, tech){
 2         this.name  = name;
 3         this.age = age;
 4         this.tech = tech;
 5     }
 6 
 7     Sixiang.prototype = new Person();
 8     Sixiang.prototype.showTech = function(){
 9         console.log(‘我的技能是:‘ + this.tech);
10     }
11 
12     var youbudOng= new Sixiang(‘游不动‘, 18, ‘土‘);
13     console.log(youbudong.name);//游不动
14     youbudong.addUser();//用户:游不动已经添加
15     console.log(youbudong.getName());//游不动
16     youbudong.showTech();//我的技能是:土
17     //静态方法是不能被继承的,因为Sixiang.prototype接收的是一个实例
18     //youbudong.getUser(youbudong); //has no method getUser

我们可以看到通过原型的继承,因为是new一个实例赋给了子类的prototype,因此,子类子包含父类实例的方法,而不含类方法(静态方法)。如果子类中定义了与父类中原型一样的方法,将会覆盖父类的方法如,新增Sixiang.prototype.getName方法:

 1     var Sixiang = function(name, age, tech){
 2         this.name  = name;
 3         this.age = age;
 4         this.tech = tech;
 5     }
 6 
 7     Sixiang.prototype = new Person();
 8     Sixiang.prototype.showTech = function(){
 9         console.log(‘我的技能是:‘ + this.tech);
10     }
11 
12     Sixiang.prototype.getName = function(){
13         return ‘四象侠岚的getName方法‘;
14     }
15 
16     var youbudOng= new Sixiang(‘游不动‘, 18, ‘土‘);
17     console.log(youbudong.name);//游不动
18     youbudong.addUser();//用户:游不动已经添加
19     console.log(youbudong.getName());//四象侠岚的getName方法
20     youbudong.showTech();//我的技能是:土
21     //静态方法是不能被继承的,因为Sixiang.prototype接收的是一个实例
22     //youbudong.getUser(youbudong); //has no method getUser

二、构造函数指向问题
我们可以测试下以下代码,发现Sixiang的构造函数指向有问题。

console.log(youbudong.cOnstructor=== Sixiang);//false
console.log(youbudong.cOnstructor=== Person);//false

这不对啊,为什么既不是父类的构造函数又不是子类的呢。将子类整理以下,我们将代码拷贝到chrome的console中看看,发现:

 1 var Sixiang = function(name, age, tech){
 2         this.name  = name;
 3         this.age = age;
 4         this.tech = tech;
 5     }
 6 
 7     Sixiang.prototype = new Person();
 8     Sixiang.prototype.showTech = function(){
 9         console.log(‘我的技能是:‘ + this.tech);
10     }
11 
12     var youbudOng= new Sixiang(‘游不动‘, 18, ‘土‘);
13     console.log(youbudong.name);//游不动
14     youbudong.addUser();//用户:游不动已经添加
15     console.log(youbudong.getName());//四象侠岚的getName方法
16     youbudong.showTech();//我的技能是:土
17     console.log(youbudong);

,

我们在var youbudOng= new Sixiang(‘游不动‘, 18, ‘土‘);前添加Sixiang.prototype.cOnstructor= Sixiang;我们再到chrome看。

 1     var Sixiang = function(name, age, tech){
 2         this.name  = name;
 3         this.age = age;
 4         this.tech = tech;
 5     }
 6 
 7     Sixiang.prototype = new Person();
 8     Sixiang.prototype.showTech = function(){
 9         console.log(‘我的技能是:‘ + this.tech);
10     }
11     Sixiang.prototype.cOnstructor= Sixiang;
12     var youbudOng= new Sixiang(‘游不动‘, 18, ‘土‘);
13     console.log(youbudong.name);//游不动
14     youbudong.addUser();//用户:游不动已经添加
15     console.log(youbudong.getName());//四象侠岚的getName方法
16     youbudong.showTech();//我的技能是:土
17     console.log(youbudong);
18     console.log(youbudong.cOnstructor=== Sixiang);//true

,

这样,构造函数的指向问题得以修正。下一篇,重点介绍原型链和封装类的继承。

Javascript面向对象程序设计——继承初步(by vczero),,

Javascript面向对象程序设计——继承初步(by vczero)


推荐阅读
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 在编写业务代码时,常常会遇到复杂的业务逻辑导致代码冗长混乱的情况。为了解决这个问题,可以利用中间件模式来简化代码逻辑。中间件模式可以帮助我们更好地设计架构和代码,提高代码质量。本文介绍了中间件模式的基本概念和用法。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 前景:当UI一个查询条件为多项选择,或录入多个条件的时候,比如查询所有名称里面包含以下动态条件,需要模糊查询里面每一项时比如是这样一个数组条件:newstring[]{兴业银行, ... [详细]
author-avatar
Boss-201411
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有