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对象本身可以用来创建对象, 而对象可以继承自其他对象, 这个概念称为原型式继承 每个 ...
随机推荐
- c++和java在桌面应用软件开发的区别
之前一直用c/c++比较多.最近做的事情用java写了个小程序.发现java的工具包很多而且好找,c++的桌面应用工具包就不好找了. java在项目的buildpath里添加外部jar包即可,c++需 ...
- 数据结构65:快速排序算法(QSort,快排)
上节介绍了如何使用起泡排序的思想对无序表中的记录按照一定的规则进行排序,本节再介绍一种排序算法——快速排序算法(Quick Sort). C语言中自带函数库中就有快速排序——qsort函数 ,包含在 ...
- @functools.wrapes
保证被装饰函数的__name__属性不变
- HTML DOM--基础概述
DOM: Document Object Model(文档对象模型)的简写,那么,这是一种什么样的模型,简单点来说,就是将文档当成了一棵树.它独立于平台与语言,允许程序与脚本动态地访问.更新文档的结构 ...
- ListView-电影列表
import React, { Component } from 'react';import { Platform, StyleSheet, Text, View, ListView } from ...
- 自动更新R软件
利用R语言命令自动更新R语言软件的版本. install.packages("installr") library(installr) updateR()
- HNOI2018 退役记
HNOI2018 退役记 \(day0\): 除了切水题以外没有什么很重要的事. \(day1\): 进考场发现前面是\(yyb\)?\(orzyyb\) 试题解压密码终于没有奇怪的字符了,一遍打对. ...
- 如何统计Visual Studio Code项目的代码行数
背景 年底到了,公司一年一度做述职报告的时间又到了,每到此时小伙伴们都想方设法的去做一些代码层面的汇总.在此交给大家个小妙招,走过路过不要错过哈,, 解决方案 使用Visual Studio Code ...
- epoll中epoll_data_t 中fd和ptr的用法
https://blog.csdn.net/u011123091/article/details/81867078 Linux高性能服务器P152
- RabbitMQ 很成熟 不是阿里的
简介 官网 http://www.rabbitmq.com RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现 RabbitMQ实现了AMQ ...