当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦。而在js中每个函数都有个原型,我们可以通过找原型进行继承的方法,在不对B中的属性或方法重写的前提下实现对A函数的继承。

那么我们构造一个函数:属性写在函数内,方法写在原型(.prototype)中,这样我们可以通过一级一级的找原型来实现继承。

function Baby(name,isMale,birthdate){
this.name = name;
this.isMale = isMale;
this.birthdate = birthdate;
//年龄可以通过生日计算得出,所以可以通过get方法来定义
//这个属性
Object.defineProperty(this,"age",{
get:function(){
var age = new Date().getFullYear()-this.birthdate.getFullYear();
return age;
}
});

}

//这是函数的方法
Baby.prototype.eat = function(food){
console.log(this.name+"吃了"+food);
}
Baby.prototype.sleep = function(hours){
console.log(this.name+"睡了"+hours+"个小时");
}

如果我们再写一个构造函数,而这个新的构造函数中有A函数的属性和方法,很多时候我们会这样写:

function Child(name,isMale,birthdate){
this.name = name;
this.isMale = isMale;
   this.birthdate = birthdate;
   ..........
//如果把所有的属性赋值都再写一次,逻辑上没有错误,
//但是代码上很浪费,因为Child构造函数中的代码和Baby函数
//中的代码一模一样,如果能够把Baby函数中的代码放在此处
//执行,效率会提高很多。

对于方法的继承我们可能会这样写:Baby(name,isMale,birthdate);那么这样就会导致这两个函数中的this所指定的内容不同

如果在此直接调用Baby函数,那么Baby函数中的this不是
本函数中的this,而是window,就会造成属性没有赋值给
我们正在创建的对象,而是赋值给了window。

当我们对一个函数的属性进行继承的时候我们可以通过call()进行调用:

Baby.call(this,name,isMale,birthdate);写在Child函数中,也就是调用了Baby的属性

方法的继承:

Child.prototype = Object.create(Baby.prototype);Object.create 创建一个对象并指定这个对象的原型
Child.prototype.constructor = Child;

//自己设置的原型需要手动设置 原型的构造函数。
//设置了原型的构造函数之后,通过查看对象的原型中的
//constructor,就可以知道这个对象是用哪个构造函数创建的
//,相当于知道这个对象是什么类型。

//JavaScript中没有类的概念,继承通过原型链实现,当一个
//构造函数B要继承构造函数A时,只要将B的原型的原型设置为A的
//原型即可。

JS中原型链继承的更多相关文章

  1. [js]js中原型的继承

    js继承01 思路: 单例/工厂/构造函数--演进到原型 搞清原型结构 原型继承 模拟系统原型继承 实现自己的继承 观察原型继承特点 演进到原型链这一步 //单例模式: 防止变量名冲突: // 思路: ...

  2. 怎么理解js的原型链继承?

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  3. js重点--原型链继承详解

    上篇说过了关于原型链继承的问题,这篇详解一下. 1. function animals(){ this.type = "animals"; } animals.prototype. ...

  4. 关于JS中原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  5. JS中原型链的理解

    new操作符具体干了什么呢?其实很简单,就干了三件事情. var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj); 第一行,我们创建了 ...

  6. JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  7. 关于js中原型链的理解

    我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象 ...

  8. JS中原型链中的prototype与_proto_的个人理解与详细总结

    1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...

  9. javascript中继承(一)-----原型链继承的个人理解

    [寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...

随机推荐

  1. Mysql Sql语句令某字段值等于原值加上一个字符串

    MySQL连贯字符串不能利用加号(+),而利用concat. 比方在aa表的name字段前加字符'x',利用: update aa set name=concat('x',name); 替换: UPD ...

  2. Demo中的IOC自定义实现

    在做练习的时候,小小项目,使用IOC控件觉得麻烦,使用工厂觉得不高大上啊,自己写个简陋的依赖注入IOC吧; 控制反转(IOC)是管理映射依赖的的,是依赖倒置(DIP)的实现方式; 依赖倒置(DIP)是 ...

  3. silverlight 流程设计器,流程引擎

    (图一流程设计器包含元素) (图一流程设计器实现功能) (流程引擎工作原理) (流程数据库设计) (流程数据库设计) (流程数据库设计) (工作流程设计器实现效果图) (代码结构图) 无法上传附件,需 ...

  4. Transaction事务传播行为种类PROPAGATION_REQUIRED

    事务传播行为种类 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为,它们规定了事务方法和事务方法发生嵌套调用时事务如何进行传播: 表1事务传播行为类型 事务传 ...

  5. AJXA 入门 前端界面操作(例题)

    AJXA  处理界面  与之前的 嵌入 PHP 相比   不用  频繁的 刷新界面 mysql 链接数据库封装类 <?php class DBDA { public $host="lo ...

  6. OC中的__attribute__的使用

    简介: 在IOS9.2官方文档中Attributes的描述如下,简单明了: Attributes provide more information about a declaration or typ ...

  7. 安装VS2015历险记

    最近,因为一些需求,需要在家里的笔记本上安装VS2015.本来以为一件很容易的一件事,发现做起来遇到了很多坑. 首先,下载VS2015,这就花费了两三个小时,安装包太大了.下载完,安装.安装不成功,报 ...

  8. C++开始前篇,深入编译链接(补充1)

    针对这些问题,这次做一个补充: 一,可重定位文件的格式是什么,以main.o为例, 格式为ELF ,包括:{1,ELF Header 它描述了整个文件的文件属性,包括文件是否可以执行,是静态链接还是动 ...

  9. JavaScript 字符串处理详解

    一.创建字符串       创建一个字符串,将一组字符串用引号包起来,将其赋值给一个字符串变量. var JsStr="Hello,JavaScript String!"; 二.字 ...

  10. 使用dd命令备份Linux分区

    为了备份分区,开始使用的是Remastersys,但最终生成的iso文件仅有几十K,应该是软件bug,且此软件不再更新,后尝试使用Linux Respin,但github一直连接不上. 其实可以尝试使 ...