原型

我们创建的每个函数都有一个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. GPIO和门电路

    1. GPIO 1.1 简介 GPIO, General Purpose I/O, 通用输入输出接口, 是最简单的数字输入输出引脚 - 作为输出可以有两种状态: 0和1 - 作为输入,它接收外面输入的 ...

  2. shell文本过滤编程(一):grep和正则表达式【转】

    转自:http://blog.csdn.net/shallnet/article/details/38799739 版权声明:本文为博主原创文章,未经博主允许不得转载.如果您觉得文章对您有用,请点击文 ...

  3. docker下使用DB2

    1.查询可安装的db2镜像 benjamin@docker:~$ docker images |grep -i db2 ibmcom/db2express-c latest 7aa154d9b73c ...

  4. mariadb 集群使用

    集群启动问题 在kvm虚机下,启动mariad,日志报如下错误: :: [Note] /usr/libexec/mysqld: Shutdown complete :: mysqld_safe mys ...

  5. 转载——分享一个html+js+ashx+easyui+ado.net权限管理系统

    EasyUI.权限管理 这是个都快被搞烂了的组合,但是easyui的确好用,权限管理在项目中的确实用.一直以来博客园里也不少朋友分享过,但是感觉好的要不没源码,要不就是过度设计写的太复杂看不懂,也懒得 ...

  6. 更新到xcode10以后出现几个无奈的问题,谨已此篇告诫广大ioser升级请慎重

    1.第一次用xcode 10 archive的时候遇到的电脑卡死不动的问题,期间鼠标键盘通通都动不了,只能强制关机来解决,于是又进行了一次可还是遇到相同的问题,无奈之下只能等待,大约20分钟左右(20 ...

  7. NewCode

    1.[数论]给你N,求不大于N的最大完全平方数. #include<bits/stdc++.h> #define FOR(i,a,b) for(int i=(a),_b=(b);i< ...

  8. shell实现自动备份整个数据库,一个库备份一个文件

    自动实现备份整个数据库 实现一个库备份一个文件 实现排除不需要备份的库 实现备份成压缩文件 实现定义保留多少天的备份文件 核心代码 #!/bin/bash #set -x ############## ...

  9. redis 事件

    事件是 Redis 服务器的核心,它处理两项重要的任务: 文件事件 在多个客户端中实现多路复用,接受它们发来的命令请求,并将命令的执行结果返回给客户端. 时间事件 实现服务器常规操作(server c ...

  10. 开源日历TimesSquare在iOS7下诡异渲染的解决办法

    因为没有时间自己写一个日历,所以暂时使用了一个三方的日历https://github.com/square/objc-TimesSquare 但是在iOS7下.突然产生了一个诡异的BUG..如下图: ...