JS中原型链继承
当我们通过构造函数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中原型链继承的更多相关文章
- [js]js中原型的继承
js继承01 思路: 单例/工厂/构造函数--演进到原型 搞清原型结构 原型继承 模拟系统原型继承 实现自己的继承 观察原型继承特点 演进到原型链这一步 //单例模式: 防止变量名冲突: // 思路: ...
- 怎么理解js的原型链继承?
前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...
- js重点--原型链继承详解
上篇说过了关于原型链继承的问题,这篇详解一下. 1. function animals(){ this.type = "animals"; } animals.prototype. ...
- 关于JS中原型链中的prototype与_proto_的个人理解与详细总结
一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...
- JS中原型链的理解
new操作符具体干了什么呢?其实很简单,就干了三件事情. var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj); 第一行,我们创建了 ...
- JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)
一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...
- 关于js中原型链的理解
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象 ...
- JS中原型链中的prototype与_proto_的个人理解与详细总结
1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...
- javascript中继承(一)-----原型链继承的个人理解
[寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...
随机推荐
- .NET WEB项目的调试发布相关
最近接触了.NET WEB项目,调试的时候因为没配置好文件浪费了些时间,特此记录一下相关配置,以后备用 如果IIS的基目录指向了别处,在build以后必须要发布,其实就是把最新的程序更新到IIS的基目 ...
- Zookeeper开源客户端框架Curator简介
Curator是Netflix开源的一套ZooKeeper客户端框架. Netflix在使用ZooKeeper的过程中发现ZooKeeper自带的客户端太底层, 应用方在使用的时候需要自己处理很多事情 ...
- C++ Bitstream类
从raknet上剥下来的 比较适用于前后端通讯,可以对BitStream进行二次封装,方便使用. BitStream.h: #ifndef __BITSTREAM_H #define __BITSTR ...
- 三年回首:C基础
atoi 实现注意: 要可以表示负数:处理到空格要结束:空串""返回0:NULL直接seg fault:溢出判断(atoi(2147483648)实际得到的是-2147483648 ...
- Jquery知识点梳理
Jquery $代表选择器 JS 选取元素 操作内容 操作属性 操作样式 <div id="aa" style="width:100px; height:100px ...
- 素数的平方阶群必为Abel群
定理 设$p$为素数,则$p^2$阶群$G$必为Abel群.
- 安装SQL Developer,连接Oracle 12c,创建新用户
1.访问Oracle官网:https://www.oracle.com/index.html,下载SQL Developer 2.安装... 3.打开Sql Developer,右键"创建新 ...
- hbase 遇到过的问题
1:下面这个错误是因为我zookeeper忘了启动了,启动你的zookeeper,重新启动下你的hbase hbase(main):002:0> list TABLE ERROR: Can't ...
- mac版本cornerstone的无限期破解方法【转】
CornerStone是个人非常喜欢的mac上的一款SVN客户端工具,官方提供了14天的免费试用(trail)版本.我们可以在此基础上提供无限期试用版本. 方法一:如果你从来没有安装过这个trail版 ...
- Lintcode 75.寻找峰值
--------------------------------------- 按照给定的峰值定义,峰值的左半部分一定是递增的,所以只要找到不递增的即可. AC代码: class Solution { ...