创建一个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的所有成员,同时也包括:

  1. 一个新的属性,subject——这个属性包含了教师教授的学科。
  2. 一个被更新的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()prototypeconstructor属性指向的是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;
}

继承widthheight属性

function BlueGlassBrick() {
Brick.call(this); this.opacity = 0.5;
this.color = 'blue';
}

仅传入了thiscall()中 - 不需要其他参数,因为我们不会继承通过参数设置的父级的任何属性。

总结:

1、随着您的代码量的增大,继承变得重要。如果您开始创建一系列拥有相似特性的对象时,那么创建一个包含所有共有功能的通用对象,然后在更特殊的对象类型中继承这些特性,将会变得更加方便有用。

2、在使用继承时,建议您不要使用过多层次的继承,并仔细追踪定义方法和属性的位置。很有可能您的代码会临时修改了浏览器内置对象的原型,但您不应该这么做,除非您有足够充分的理由。过多的继承会在调试代码时给您带来无尽的混乱和痛苦。

3、对象在您打算把一个数据集合从一个地方传递到另一个地方的时候非常有用。这些都可以在不使用构造器和继承的情况下完成。如果您只是需要一个单一的对象实例,也许使用对象常量会好些,您当然不需要使用继承。

JS之原型式的继承的更多相关文章

  1. js原生继承之——原型式继承实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

    说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...

  3. JS 继承(类式 与 原型式)

    1. /* -- 类式继承 -- *///先声明一个超类 function Person(name) { this.name = name;}//给这个超类的原型对象上添加方法 getName Per ...

  4. JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)

    JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...

  5. [js高手之路]原型式继承与寄生式继承

    一.原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象 function object( o ){ var G = function(){}; G.prototype = o; retur ...

  6. JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...

  7. es5原型式继承间解

    1. 原型式继承方法 js 继承使用不难,要说清楚,需要自己一定总结,才能说清楚. es5 的继承方式有很多种,这个是 js 语言本身造成,但是类实现继承之后的功能,有如下 3 条: 子类继承父类,主 ...

  8. javascript学习笔记--经典继承、组合继承、原型式继承、寄生继承以及寄生组合继承

    经典继承 js中实现经典继承的方式是通过构造函数来实现的,即在子类中对父类调用call方法. function Geometric() { this.time = ""; this ...

  9. 理解JavaScript原型式继承

    0.基础 javascript没有类的概念, javascript不需要实例化某个具体类的实例.javascript对象本身可以用来创建对象, 而对象可以继承自其他对象, 这个概念称为原型式继承 每个 ...

随机推荐

  1. Determining the Size of a Class Object---sizeof(class)---By Girish Shetty

    There are many factors that decide the size of an object of a class in C++. These factors are: Size ...

  2. 根据浏览器判断是否为Android、ios或微信环境

    写h5页面时经常有业务逻辑需要判断页面所处的环境,这时我们可以通过navigator对象来获取浏览器相关信息加以判断,方法如下: let ua = navigator.userAgent; let i ...

  3. [Shell]如何获取Maven工程的project.version信息

    问题: 今天遇到Shell中如何能获取Maven项目工程中的project.version信息的问题 解决方案: 使用Maven的Exec 插件 #! /bin/bash MVN_VERSION=$( ...

  4. POJ_3468 A Simple Problem with Integers 【线段树区间查询+修改】

    一.题目 POJ3468 二.分析 裸的线段树区间查询+修改. 三.AC代码 #include <cstdio> #include <iostream> #include &l ...

  5. linux下获取系统时间 和 时间偏移

    获取linux时间  并计算时间偏移 void getSystemTimer(void){#if 0 char *wdate[]={"Sun","Mon",&q ...

  6. oracle使用已有vid快速新建虚拟机

    有时候需新建虚拟机,但是每一次新建都花费很多时间,这里在oracle中快速新建虚拟机,只需要复制已有的vdi,然后修改uuid即可   windows下在cmd下输入命令 cd C:\Program ...

  7. 在浏览器中输入URL后,执行的全部过程。(一次完整的http请求过程)

    整个流程如下: 域名解析 为了将消息从你的PC上传到服务器 上.需要用到1P协议.ARP协议和0SPF协议 发起TCP的3次握手 建立TCP连接后发起http请求 服务器响应htp请求 浏览器解析ht ...

  8. 理解ReentrantLock的公平锁和非公平锁

    学习AQS的时候,了解到AQS依赖于内部的FIFO同步队列来完成同步状态的管理,当前线程获取同步状态失败时,同步器会将当前线程以及等待状态等信息构造成一个Node对象并将其加入到同步队列,同时会阻塞当 ...

  9. nginx基础学习第二篇:nginx内置变量的使用

    ngx_http_core模块提供的内置变量有很多,常见的有 $uri,用来获取当前请求的uri,不含请求参数. $request_uri,用来获取请求最原始的uri,包含请求参数,且未解码. $re ...

  10. SpringBoot内嵌Tomcat开启APR模式(运行环境为Centos7)

    网上查到的一些springboot内嵌的tomcat开启apr的文章,好像使用的springboot版本较老,在SpringBoot 2.0.4.RELEASE中已经行不通了.自己整理了一下,供参考. ...