JavaScript学习3:原型和继承
原型
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包括能够由特定类型的全部实例共享的属性和方法。逻辑上能够这么理解:prototype是通过调用构造函数而创建的那个对象的原型对象。
为什么要引入原型的概念呢?使用原型的目的。也是他的优点是能够让全部的对象实例共享它所包括的属性和方法。换句话说,就是不必再构造函数中定义对象信息,而是能够直接将这些信息加入到原型中。
详细怎么用,我们来看代码实例:
<span style="font-size:18px;">//原型实例
function Person(){} //声明一个构造函数 Person.prototype.name='Lian'; //在原型里加入属性
Person.prototype.age=100;
Person.prototype.run=function(){ //在原型里加入方法
return this.name + this.age + '奋斗中……';
}; var person1=new Person();
var person2=new Person();
alert(person1.run==person2.run); //返回true,说明方法的引用地址是一致的。即两个对象共享了一个方法</span>
为了更好的理解构造函数的声明方式和原型模式的声明方式的差别,我找了两张图分享给大家。帮助大家理解:
我们从图中能够看到,在原型模式声明中。多了两个属性,这两个属性都是创建对象时自己主动生成的。_proto_属性是实例指向原型对象的一个指针,它的作用就是指向构造函数的原型属性constructor。通过这两个属性,就能够訪问到原型里的属相和方法了。
看到这里你会认为奇怪。上面代码实例中的构造函数的函数体中什么也没有。才干訪问到原型对象里的值,假设函数体中有属性或者方法呢?这里就要涉及一个原型模式运行流程的问题了:是先去查找构造函数实例里面的属性和方法,假设有。立马返回,若没有,则去它的原型对象中找。若有,则返回。
使用原型模式创建对象也有其缺点,那就是它省略了构造函数传參初始化这一过程。带来的缺点就是初始化的值都是一样的。可是这恰恰是它最大的长处,那就是共享。
继承
继承是面向对象中的一个核心概念,在比較正统的面向对象的语言中一般都会採用两种方式实现继承:一个是接口实现,一个是类继承。而我们的JavaScript仅仅支持继承。而不支持接口实现,继承是怎样实现的,这里要引入原型链的概念了。什么是原形链。我们看一段代码就会知道。
<span style="font-size:18px;">//继承实例
function A(){
this.name ='Lian';
} function B(){
this.age=100;
} function C(){
this.address='中国';
}
B.prototype.age =200;
B.prototype =new A(); //B继承了A C.prototype =new B(); //C又继承了B var c=new C();
alert(c.name+' '+ c.age); //C具有了A和B的属性</span>
在JavaScript中,被继承的函数称为超类型(也就是面向对象中说的父类或者说是基类),继承的函数称为子类型(即子类或者派生类)。继承有优点。可是也有其自己的问题,比方字面量重写原型会中断关系,使用引用类型的原型,而且子类型无法给超类型传递參数。
综合考虑,我们使用原形链加上构造函数,这样产生了组合继承。
<span style="font-size:18px;">//组合继承
function Box(age){
this.name='Lee';
this.age=age;
} Box.prototype.run=function(){
return this.name +this.age;
}; function Desk(age ){
Box.call(this,age); //对象冒充,给超类型传參
} Desk.prototype =new Box(); //原形链继承 var desk =new Desk(100);
alert (desk.run()); //显然Desk继承了Box的run方法</span>
组合继承是JavaScript最经常使用的继承方式,可是,组合继承也有一点问题。那就是超类型在使用过程中会被调用两次。一次是创建子类型的时候。一次是在子类型构造函数的内部。
这样会带来性能上的开销,怎样解决?留给读者去思考……
JavaScript学习3:原型和继承的更多相关文章
- 【转】JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
- JavaScript 类型、原型与继承学习笔记
目录 一.概览 二.数据类型 1. JavaScript中的数据类型 2. 什么是基本类型(Primitive Data Type) 2.1 概念 2.2 七个基本类型 2.3 基本类型封装对象 3. ...
- 菜鸟快飞之JavaScript对象、原型、继承(三)
正文之前需要声明的一点是,菜鸟系列博文全是基于ES5的,不考虑ES6甚至更高版本. 继承 由于我个人不是学计算机的,所以对于很多东西只是知其然,不知其所以然.就像这个继承,刚开始学JavaScript ...
- javascript中的原型和继承
javascript一直是初学者口中的难点,甚至一些有些许工作经验的人也不太明白其中的原理,而我就是那个初学者,前段时间在阮一峰老师的博客上看了一篇文章<javascript继承机制的设计思想& ...
- 详解JavaScript中的原型和继承-转自颜海镜大大
本文将会介绍面向对象,继承,原型等相关知识,涉及的知识点如下: 面向对象与继承 CEOC OLOO 臃肿的对象 原型与原型链 修改原型的方式 面向对象与继承 最近学习了下python,还写了篇博文&l ...
- 菜鸟快飞之JavaScript对象、原型、继承(一)
有前辈说过,在JavaScript中,一切皆对象.由此可见,作为JavaScript的核心之一,对象是有多么重要.虽然今天走亲戚有点累,但还是得写写这个对象,免得吃几天好的,就又忘光了. 1.创建对象 ...
- 菜鸟快飞之JavaScript对象、原型、继承(二)
上一节写了创建对象的三种方法,而其中通过函数创建对象的方式又有三种模式,分别是工厂模式.构造函数模式.原型模式.而这三种模式最常用的则是原型模式.还是上栗子: 工厂模式: function Fun1( ...
- 【面试必备】javascript的原型和继承
原型.闭包.作用域等知识可以说是js中面试必考的东西,通过你理解的深度也就能衡量出你基本功是否扎实.今天来复习一下javascript的原型和继承,虽说是老生常谈的话题,但对于这些知识,自己亲手写一遍 ...
- JavaScript 面向对象 原型(prototype) 继承
1.对象的概念:无需属性的集合,属性可以为数值,对象或函数,ECMAscript中没有类的概念,这点是javascript与其他面向对象(OO)语言不同的地方. //创建一个自定义对象 var per ...
- 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)
上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...
随机推荐
- python的上下文管理
说道上下文管理首先想到的就是这个: class MyResource: def __enter__(self): print("查询开始") return self def __e ...
- layui 自定义表单验证 以及提交表单
订购数量</span> <span style="color: red">*</span>: <input type="text ...
- emacs使用http代理打开
环境:ubuntu 15.10 64bit,emacs 24 ,git http代理搭建方法:http://www.cnblogs.com/liuxuzzz/p/5324749.html 原因: 因为 ...
- 广州地区常用的DNS解析服务器
广州电信DNS: 首选:202.96.128.143 备用:202.96.128.68 首选:202.96.134.133 备用:202.96.128.166 首选:61.144.56.100备用:6 ...
- Dialog和软键盘在屏幕上的并存问题:
最近做添加门店,门店昵称自动根据文字变化去搜索后台数据,但是一搜索软键盘就关闭了,感觉用户体验不太好.一开始根本不知道啥问题,找了半天才发现是网络请求dialog加载导致软件盘隐藏的,后面直接把dia ...
- luogu P1941 飞扬的小鸟
题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便 ...
- noip2017集训测试赛(四)Problem A: fibonacci
题目大意 给你一个序列\(a_1, a_2, ..., a_n\). 我们令函数\(f(n)\)表示斐波那契数列第\(n\)项的值. 总共\(m\)个操作, 分为以下两种: 将\(x \in [L, ...
- dedecms调用文章发布日期
<span>[field:pubdate function="MyDate('m-d',@me)"/]</span>
- MFC中 在SDI模式下的视图中添加按钮的方法
在单文档视图(SDI)结构中,视图一般用来显示数据.但是,有时也希望在视图中显示按钮或其他的控件,以满足用户的需要.下面是手动添加按钮并使按钮具有响应事件的功能的方法. 第一步:添加一个按钮 ...
- EasyMvc入门教程-基本控件说明(7)文字块导航
文字块导航其实就是开发winform时候常见的 带Title的Group面板..~!@#¥..好吧,没开发过winform的同学看下图: 实现代码如下: @Html.Q().BlockField(). ...