此篇由别的大神的博客与《javascript高级程序设计》一书整理而来

原博客地址:https://hyj1254.iteye.com/blog/628555

看到javascript高级程序设计的面向对象章节看到超类与子类这个概念词,不懂上度娘查了才知道是怎么一回事。

说到超类与子类,就不得不提起原型模式,原型对象,原型链与原型链继承了

在原型模式章节中,对于原型模式这样描述:“我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype 就是通过调用构造函数而创建的那个对象实例的原型对象”

这一段话表明了:prototype由构造函数Object()创建,所以它本身也是一个Object实例,而任何Object实例都可以从Object.prototype中继承属性;于是prototype就也具有了这种能力;

而对于原型对象,书中描述如下:

“无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype 属性所在函数的指针

这段话 表明了:函数的prototype属性指向函数的原型对象,而原型对象又会指回创建的函数

(prototype属性以及constructor属性都是浏览器内部生成,外部不可直接访问)

鉴于此种特性,我们将另一个类型的实例赋值给一个函数的原型对象(fun1.prototype=new fun2()),这样原本存在于该实例的属性以及方法也存在于原型对象中了,这样层层递进就构成了原型链。

另一个很重要的信息:基于prototype的继承不仅仅局限于单一的prototype对象,访问沿着一条prototype链逐级向上执行:假设有个Complex实例,访问其中一属性,如果本身找不到,便访问Complex.prototype对象;还找不到即在Object实例中找不到,就接着访问Complex.prototype的上一级--Object.prototype。

这就解释了为什么JS对象都从Object对象中继承了方法:如自定义了Complex类,然后它的每个实例就都能访问toString()方法,因为它的prototype是Object实例,能访问Object.prototype。

  这就是所谓“超类和子类”的核心。拿上例来说,它所表述的是,由于Complex.prototype默认是Object的实例(由Object()初始化),于是Complex便继承了Object(即可以访问Object和Object.prototype的所有属性)。 
    好戏登场了:只要把Complex.prototype的构造函数换成其他的,而不是默认的Object(),那Complex便成为了那个类的子类;这就实现了自己定义的超类和子类关系。当然Complex还是Object的子类,但那是因为那个类最终也是Object的子类。

举个栗子:

 function Person(name){this.name=name;}
Person.prototype.say=function(){alert("hello");};
function Man(){}
Man.prototype=new Person("Tom"); var man=new Man();
alert(man.name);//Tom,继承了Person实例的属性:name
man.say();//hello,继承了Person.prototype的属性:say
alert(man.hasOwnProperty('name'));//false,name在Man.prototype中

在上面的栗子中,Man是Person的子类

当然,这样写虽然能达到效果,但可能不符合“标准”,那就换成标准的:

 function Person(name){this.name=name;}
Person.prototype.say=function(){alert(this.hasOwnProperty('name'));}
function Man(name){
Person.call(this,name);//多了这一步,实现实例属性的继承,要先明白call的作用 }
Man.prototype=new Person();//继承Person.prototype的属性。
//--------------
var man = new Man("Tom");
alert(man.constructor==Person);//true
Man.prototype.constructor=Man;//将Man的构造函数指回Man
alert(man.name);//Tom
alert(man.hasOwnProperty('name'));//true,通过call方法,name已经成为man的实例属性。hasOwnProperty判断man本身是否具有name属性。
man.say();//true,继承了Person.prototype的属性,this指向man
alert(Man.prototype.constructor==Person);//false
alert(Man.prototype instanceof Person);//true

总结以上就是:Man是谁的子类就看Man.prototype是由谁的构造函数初始化的。只要把握了这点,继承关系可以随心所欲的构造。

JS 超类和子类的更多相关文章

  1. 窗口 超类化 子类化 HOOK

    body { font-family: Bitstream Vera Sans Mono; font-size: 11pt; line-height: 1.5; } html, body { colo ...

  2. JavaScript 超类与子类 继承

    //超类和子类 继承的实现 function R(w, h) { var date = new Date(); this.width = w; this.height = h; this.create ...

  3. Java核心技术第五章——1.类、超类、子类(2)

    继上一篇Java核心技术第五章——1.类.超类.子类(1) 6.重载解析 假如调用ClassName.Method(args) 1.编译器列出类ClassName所有名为Method的方法. 2.编译 ...

  4. Java核心技术第五章——1.类、超类、子类(1)

    1.定义子类: 关键字extends表明正在构造的新类派生与一个已存在的类.已存在的类称为超类.基类或父类:新类称为子类.派生类或孩子类.超类和子类是Java程序员最常用的两个术语(emmm~~我觉得 ...

  5. JAVA构造函数在超类与子类定义鲁波总结

    1.子类无构造函数,超类无构造函数,创建的无参数的对象: 编译通过. class A { } class B extends A { } public class Testeeer { public ...

  6. Core Java (十一) Java 继承,类,超类和子类

    Core Java (十一) Java 继承,类,超类和子类 标签: javaJavaJAVA 2013-01-22 17:08 1274人阅读 评论(0) 收藏 举报  分类: java(58) 读 ...

  7. JS于,子类调用父类的函数

    概要 JS虽然没有直接有面向对象的特性,但还是能prototype为了模拟面向对象的特性,如继承和多态.而大多数面向对象的语言(例如C++.Java等一下)相比,JS为了实现面向对象还是有点繁琐,抽象 ...

  8. 窗口的子类化与超类化——子类化是窗口实例级别的,超类化是在窗口类(WNDCLASS)级别的

    1. 子类化 理论:子类化是这样一种技术,它允许一个应用程序截获发往另一个窗口的消息.一个应用程序通过截获属于另一个窗口的消息,从而实现增加.监视或者修改那个窗口的缺省行为.子类化是用来改变或者扩展一 ...

  9. java中构造方法和方法super/this超类与子类中初始化顺序

    java中构造方法和方法全面解析 我相信大多说人都对构造方法.方法不陌生,而且很了解,但我也相信有很多像我这样的没有一个很好很清晰很全面的认识,今天就把它整理如下,希望能给大家带来点方便与帮助,也希望 ...

随机推荐

  1. Oracle中row_number()、rank()、dense_rank() 的区别

    link:https://www.cnblogs.com/qiuting/p/7880500.html

  2. python之堡垒机(第九天)

    本节作业: 通过使用paramiko和sqlalchemy实现堡垒机功能 主要功能实现: 1.用户登录堡垒机后,无需知道密码或密钥可以SSH登录远端服务器: 2.用户对一个组内所有主机批量执行指定命令 ...

  3. Windows7 安装TensorFlow,python3.6

    TensorFlow 1.2.0新版本完美支持Python3.6,windows在cmd中输入pip install tensorflow就能下载应用最新tensorflow 只需在cmd中输入pip ...

  4. 原生JS实现表单序列化serialize()

    有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活. 用HTML5的FormData来初始化表单 var formdata=new FormData(documen ...

  5. Github怎么写README

    编辑README文件 大标题(一级标题):在文本下面加等于号,那么上方的文字就变成了大标题,等于号的个数无限制,但一定要大于0 大标题 ==== 中标题(二级标题):在文本下面加下划线,那么上方的文本 ...

  6. 【js】了解前端缓存,收获不止于此!

    了解前端缓存,收获不止于此! 这次我们来讲一下关于前端缓存的问题.感谢赵欢同学提供doc素材. 首先,开局我画了一张图,你会对文章有一个大局了解. 今天讲的是前端缓存. 前端缓存有3大种:如图,分为H ...

  7. redis的架构(一)

    redis认证 redis的认证比较简单,这里简单来说明一下怎么设置redis的认证: redis的配置文件中有一个requirepass字段,在后面直接写上对应的密码即可.默认redis的不开启认证 ...

  8. 13: ELK(ElasticSearch+Logstash+ Kibana)搭建实时日志分析平台

    参考博客:https://www.cnblogs.com/zclzhao/p/5749736.html 51cto课程:https://edu.51cto.com/center/course/less ...

  9. 软考自查:UML建模

    UML建模 内容提要 用例图 类图与对象图 顺序图 活动图 状态图 通信图 构件图 用例图 包含关系 扩展关系 泛化关系     类图与对象图 填类名,方法名,属性名 填多重度 填关系     1: ...

  10. 王之泰/王志成《面向对象程序设计(java)》第十一周学习总结

    第一部分:理论知识学习部分 第十一章理论知识主要为集合类的介绍,在实验中都有所体现且本周主要复习回顾上周的泛型程序设计 第二部分:实验部分 ——集合 1.实验目的与要求 (1) 掌握Vetor.Sta ...