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中原型链继承的理解. 总的说来, ...
随机推荐
- ExecutorService线程池
ExecutorService 建立多线程的步骤: 1.定义线程类 class Handler implements Runnable{} 2.建立ExecutorService线程池 Executo ...
- C 调用redis缓冲
下载 redis 文件, 进行编译 wget https://github.com/redis/hiredis/archive/master.zip 将其解压, 并编译 unzip -x maste ...
- Firefox Portable Developer 52.0.0.6176-6178
FirefoxPortableDeveloper-52.0.0.6176.7z 47.9 MB FirefoxPortableDeveloper-52.0.0.6178.7z 55.8 MB
- jquery Ajax提交表单数据
//表单中控件的name要和实体类字段属性一致 $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#your ...
- (转)REDIS各项配置参数介绍
# 默认情况下,redis不是在后台模式运行的,如果需要在后台进程运行,把该项的值更改为yes,默认为no daemonize:是否以后台daemon方式运行 # 如redis服务以后台进程运行的时候 ...
- JavaScript 嵌套 书名号 查询
字符串中查找嵌套书名号 ,一开始想用正则来做的,最后发现正则不可能达到我的需求(可能是我正则理解不够,哈哈),所以写下了这个方法:只做了三层,如果你要更多,可以自己添加,哈哈//提取查询关键字,sou ...
- Datazen笔记索引
Datazen介绍 http://www.cnblogs.com/aspnetx/p/4557547.html Datazen安装 http://www.cnblogs.com/aspnetx ...
- 【DWR系列03】- DWR主要类详解
img { border: 1px solid black } 一.简介 首先应该了解这个jar包主要的类,了解了类,就了解了DWR.DWR的在线javadoc:http://directwebrem ...
- php结合md5的加密解密算法实例
<?php /* * Created on 2016-12-22 * */ function encrypt($data, $key){ $key = md5($key); $x = 0; $l ...
- Laravel5路由/home页面无法访问
报错信息: Not Found The requested URL /laravel5/public/home was not found on this server. 解决方法: 1.编辑apac ...