JS之原型式的继承
创建一个Person的构造器
function Person(first, last, age, gender, interests) {
this.name = {
first,
last
};
this.age = age;
this.gender = gender;
this.interests = interests;
};
方法定义在构造器的原型上
Person.prototype.greeting = function() {
alert('Hi! I\'m ' + this.name.first + '.');
};
任务:
创建一个Teacher
类,就像我们前面在面向对象概念解释时用的那个一样。这个类会继承Person
的所有成员,同时也包括:
- 一个新的属性,
subject
——这个属性包含了教师教授的学科。 - 一个被更新的
greeting()
方法,这个方法打招呼听起来比一般的greeting()
方法更正式一点——对于一个教授一些学生的老师来说。
定义一个Teacher的构造器函数
function Teacher(first, last, age, gender, interests, subject) {
Person.call(this, first, last, age, gender, interests); this.subject = subject;
}
call()
函数:基本上,这个函数允许您调用一个在这个文件里别处定义的函数。第一个参数指明了在您运行这个函数时想对“this
”指定的值,也就是说,您可以重新指定您调用的函数里所有“this
”指向的对象。其他的变量指明了所有目标函数运行时接受的参数。
最后一行代码简单地定义了一个新的subject
属性,这将是教师会有的,而一般人没有的属性。
创建一个和Person.prototype
一样的新的原型属性值
(这个属性指向一个包括属性和方法的对象)
Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype
现在会继承Person.prototype
的所有属性和方法。
Teacher()
的prototype
的constructor
属性指向的是Person()
, 我们需要改变一下指向
Teacher.prototype.constructor = Teacher;
每一个函数对象(Function
)都有一个prototype
属性,并且只有函数对象有prototype
属性,因为prototype
本身就是定义在Function
对象下的属性。当我们输入类似var person1=new Person(...)
来构造对象时,JavaScript实际上参考的是Person.prototype
指向的对象来生成person1
。另一方面,Person()
函数是Person.prototype
的构造函数,也就是说Person===Person.prototype.constructor
无参数继承
function Brick() {
this.width = 10;
this.height = 20;
}
继承width
和height
属性
function BlueGlassBrick() {
Brick.call(this); this.opacity = 0.5;
this.color = 'blue';
}
仅传入了this
到call()
中 - 不需要其他参数,因为我们不会继承通过参数设置的父级的任何属性。
总结:
1、随着您的代码量的增大,继承变得重要。如果您开始创建一系列拥有相似特性的对象时,那么创建一个包含所有共有功能的通用对象,然后在更特殊的对象类型中继承这些特性,将会变得更加方便有用。
2、在使用继承时,建议您不要使用过多层次的继承,并仔细追踪定义方法和属性的位置。很有可能您的代码会临时修改了浏览器内置对象的原型,但您不应该这么做,除非您有足够充分的理由。过多的继承会在调试代码时给您带来无尽的混乱和痛苦。
3、对象在您打算把一个数据集合从一个地方传递到另一个地方的时候非常有用。这些都可以在不使用构造器和继承的情况下完成。如果您只是需要一个单一的对象实例,也许使用对象常量会好些,您当然不需要使用继承。
JS之原型式的继承的更多相关文章
- js原生继承之——原型式继承实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- JS 继承(类式 与 原型式)
1. /* -- 类式继承 -- *///先声明一个超类 function Person(name) { this.name = name;}//给这个超类的原型对象上添加方法 getName Per ...
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
- [js高手之路]原型式继承与寄生式继承
一.原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象 function object( o ){ var G = function(){}; G.prototype = o; retur ...
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...
- es5原型式继承间解
1. 原型式继承方法 js 继承使用不难,要说清楚,需要自己一定总结,才能说清楚. es5 的继承方式有很多种,这个是 js 语言本身造成,但是类实现继承之后的功能,有如下 3 条: 子类继承父类,主 ...
- javascript学习笔记--经典继承、组合继承、原型式继承、寄生继承以及寄生组合继承
经典继承 js中实现经典继承的方式是通过构造函数来实现的,即在子类中对父类调用call方法. function Geometric() { this.time = ""; this ...
- 理解JavaScript原型式继承
0.基础 javascript没有类的概念, javascript不需要实例化某个具体类的实例.javascript对象本身可以用来创建对象, 而对象可以继承自其他对象, 这个概念称为原型式继承 每个 ...
随机推荐
- 线上CPU100%?看看这篇是怎么排查的!
前言 作为后端开发工程师,当收到线上服务器CPU负载过高告警时,你会这么做?重启服务,忽略告警?不过在我看来一个合格的工程师是一定要定位到具体问题所在的,从而 fix 它.下面记录一下线上服务器 CP ...
- js中的类和对象以及自定义对象
js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...
- android 企业级高性能图表库 SciChart (付费)
1.官网 https://www.scichart.com/ 2.特性 2.1 链接 https://www.scichart.com/android-chart-features/ https:// ...
- css一些常用技巧代码
图片等比例自动缩放 img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 多行省略 最后line-clamp设 ...
- Python - 三级菜单优化方法 (单层循环)
menu = {...... } current_layer = menu layers = [] while True: for k in current_layer: print(k) choic ...
- 在ionic3自定义组件中使用官方组件
先创建组件: ionic g component xxx 在components里面如下图引入
- 使用WinSCP进行简单代码文件同步
前言传输协议FTPFTPSSFTPSCP为什么使用WinSCP?CMD的FTP命令FileZillaPuTTYrsyncSublime的SFTP插件WinSCPWinSCP进行简单代码文件同步总结备注 ...
- 再探php
1. 如何打开一个php文件? 启动本地服务器和MySQL, 然后将php文件放在xampp -> htdocs 目录下(可以是子目录.孙子目录 ......),打开浏览器,在浏览器中输入 l ...
- COALESCE操作符
一.应用场景 1.购买的零件和本地生产的零件都是零件,尽管多重的实体类型在数据存储上略有不同,但是它们有太多的相同之处,因此通常使用一个表格而不是两个. 所以这是如果我们需要计算零件的实际话费的话,那 ...
- 关于window.console&&console.log(123)的思考
一.JS的且运算记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了.要理解这个,首先得明白三 ...