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中原型链继承的理解. 总的说来, ...
随机推荐
- Spark基础知识汇总
2,wordcount: val wordcount = sc.textFile()).reduceByKey(_ + _).sortByKey().collect val wordcount = s ...
- asp.net4.5尚未在web服务器上注册 解决方案
以前都是直接用aspnet_regiis.exe -i 现在用这个不好使了,解决办法打微软补丁. https://blogs.msdn.microsoft.com/webdev/2014/11/11/ ...
- java 文件保存到本地
private void savePic(InputStream inputStream, String fileName) { OutputStream os = null; try { Strin ...
- xpath 总结
例如 <table id="MatchTable"> <tr id="Explain_1228761" style="display ...
- iOS 编译时处理器架构选择
先看看主流的ios设备的架构 armv6 iPhone iPhone2 iPhone3G 第一代和第二代iPod Touch armv7 iPhone4 iPhone4S armv7s iPhone5 ...
- Mosquitto搭建Android推送服务番外篇一:各种报错解决
文章钢要: 目前笔者在开发搭建Mosquitto服务器,在此期间遇到很多实际问题,所以走了很多弯路,在这里写出来为大家提供一些帮助. 1.安装完成后启动Mosquitto报错 执行mosquitto客 ...
- 通过数组和枚举简化GPIO操作编码
在工作中,经常遇到大量使用GPIO作为数字量输入输出来控制设备或采集状态,每次定义操作不同的GPIO针脚既麻烦又容易出错,于是就想要简化操作过程.对于数字量输入来说就是采集对应针脚的状态:而输出则是根 ...
- JAVA图片验证码
package hh.com.util; import java.io.IOException; import javax.servlet.ServletException; import javax ...
- FPGA 开发笔记 点滴
1.添加包含的文件或参数文件(define.v)的方式:如果文件在工程目录下的一个文件夹下,则可用 `include "../文件夹名/define.v", 文件和工程载同一目录 ...
- Python 实现隐藏文件夹、文件操作
Python通过win32api 可以实现操作文件夹文件操作,获取属性,修改属性 1.获取属性 通过win32api.GetFileAttributes 方法可以获取属性值 import win32c ...