原型

我们创建的每个函数都有一个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:原型和继承的更多相关文章

  1. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  2. JavaScript 类型、原型与继承学习笔记

    目录 一.概览 二.数据类型 1. JavaScript中的数据类型 2. 什么是基本类型(Primitive Data Type) 2.1 概念 2.2 七个基本类型 2.3 基本类型封装对象 3. ...

  3. 菜鸟快飞之JavaScript对象、原型、继承(三)

    正文之前需要声明的一点是,菜鸟系列博文全是基于ES5的,不考虑ES6甚至更高版本. 继承 由于我个人不是学计算机的,所以对于很多东西只是知其然,不知其所以然.就像这个继承,刚开始学JavaScript ...

  4. javascript中的原型和继承

    javascript一直是初学者口中的难点,甚至一些有些许工作经验的人也不太明白其中的原理,而我就是那个初学者,前段时间在阮一峰老师的博客上看了一篇文章<javascript继承机制的设计思想& ...

  5. 详解JavaScript中的原型和继承-转自颜海镜大大

    本文将会介绍面向对象,继承,原型等相关知识,涉及的知识点如下: 面向对象与继承 CEOC OLOO 臃肿的对象 原型与原型链 修改原型的方式 面向对象与继承 最近学习了下python,还写了篇博文&l ...

  6. 菜鸟快飞之JavaScript对象、原型、继承(一)

    有前辈说过,在JavaScript中,一切皆对象.由此可见,作为JavaScript的核心之一,对象是有多么重要.虽然今天走亲戚有点累,但还是得写写这个对象,免得吃几天好的,就又忘光了. 1.创建对象 ...

  7. 菜鸟快飞之JavaScript对象、原型、继承(二)

    上一节写了创建对象的三种方法,而其中通过函数创建对象的方式又有三种模式,分别是工厂模式.构造函数模式.原型模式.而这三种模式最常用的则是原型模式.还是上栗子: 工厂模式: function Fun1( ...

  8. 【面试必备】javascript的原型和继承

    原型.闭包.作用域等知识可以说是js中面试必考的东西,通过你理解的深度也就能衡量出你基本功是否扎实.今天来复习一下javascript的原型和继承,虽说是老生常谈的话题,但对于这些知识,自己亲手写一遍 ...

  9. JavaScript 面向对象 原型(prototype) 继承

    1.对象的概念:无需属性的集合,属性可以为数值,对象或函数,ECMAscript中没有类的概念,这点是javascript与其他面向对象(OO)语言不同的地方. //创建一个自定义对象 var per ...

  10. 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

    上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...

随机推荐

  1. C++ 求幂的运算符是什么?

    1.VB里面求幂的运算符是“^” 2.C++没有求幂的运算符, c++头文件加 #include<math.h>使用pow(x,y),可算出x的y次幂 3.C++中 “^”是按位“异或”运 ...

  2. 安装配置Vim中文帮助文档

    1.home/.vimrc是用户自己的vim配置文件,在这个配置文件中设置的配置只影响该用安装前的准备工作: 在home目录下列新建文件夹  : .vim ------------------> ...

  3. sql查询 ,多行数据合并成一行,并且显示合并后某一列的值拼接结果

    select  [value] = stuff((select ','+modmb003  from modmb detail where modmb=18 for xml path('')), 1, ...

  4. 关联分析(Apriori算法)

    两个概念: 频繁项集:常出现的物品集合 关联分析:找到诸如:尿布-->啤酒的关联,反过来则是另一条 两个控制参数: 项集的支持度(support):一个项集出现的次数在所有样本中出现的比例 可信 ...

  5. python安装在windows server2008,故障排除

    python安装在windows server2008,故障排除   我也在虚拟机上的win2008安装python2.7.9多次回滚了.搜了一通 Windows Server 2003/2008无法 ...

  6. 10.1综合强化刷题 Day7

                                                                                       noip提高组模拟赛       ...

  7. API网关服务Zuul-Spring Cloud学习第五天(非原创)

    文章大纲 一.Zuul是什么二.Zuul的基本实现三.路由配置细节四.异常处理细节五.项目源码与参考资料下载六.参考文章   一.Zuul是什么   到目前为止,我们Spring Cloud中的内容已 ...

  8. eclipse中mybatis generator插件的安装与使用,实现自动生成代码

    git地址:https://github.com/mybatis/generator 下载后解压: 选择任意一个版本的jar放到eclipse的features目录下即可 选择任意一个版本的jar放到 ...

  9. 每天学一点Python(2)

    9月16日(python扩展的安装和使用) 接着上一篇继续.按照之前计划,先分析导出的数据,再做进一步统计. 导出的数据是html类型的,想到的处理方法有: 1.直接readlines然后一行一行找我 ...

  10. 【GLSL教程】(八)纹理贴图 【转】

    http://blog.csdn.net/racehorse/article/details/6664717 简单的纹理贴图(Simple Texture) 为了在GLSL中应用纹理,我们需要访问每个 ...