写作背景

最近在抓基础,毕竟没有好地基盖楼容易塌啊...再回首javascript,原型可以说是该语言较为核心的设计之一,我们有必要了解下其设计理念 (#^.^#)

基本概念

  • MyObject.prototype:用于建立由new MyObject()创建的对象的原型。
  • _proto_:获取obj对象的原型对象的非标准方法(只在某些浏览器支持,如chrome/safari/firefox)。
  • Object.getPrototype(obj):获取obj原型对象的标准方法。
  • 原型对象:包含由特定类型的所有实例共享的属性和方法;prototype正指向这个对象。
  • constructor:每个系统默认,注意系统默认的原型对象都有一个constructor属性,指向其构造函数。

原型对象图解

说明

  • 每个函数都有一个prototype属性,指向原型对象。
  • 原型对象默认取得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。
  • 构造函数创建的每个实例中包含一个[[prototype]]指针,指向构造函数的原型对象。(备注:这个指针的标准访问方式为Object.prototype(obj),非标准访问方式为_proto_)

Object、Function和原型关系


说明

  • 首先Object和Function都是构造函数,而所有的构造函数的都是Function的实例对象. 因此Object是Function的实例对象。
  • Function.prototype原型对象是Object的实例对象。
  • 实例对象的原型(我们以proto来表示)会指向其构造函数的prototype属性, 因此Object.proto ===Function.prototype,Function.proto===Function.prototype,Function.prototype.proto === Object.prototype
  • 当我们访问一个属性值的时候, 它会沿着原型链向上查找, 直到找到或者到Object.prototype.proto(为null)截止。

原型链实现继承

本图参考实现代码见javascript高级程序设计

function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true

原型链弊端

  • 在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性了。
  • 没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。

希望文章对小伙伴有所帮助,也非常欢迎指出文章存在问题,emmmmmmmmmm......

javascript之原型的更多相关文章

  1. Javascript的原型链图

    90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...

  2. 深入理解JavaScript系列:史上最清晰的JavaScript的原型讲解

    一说起JavaScript就要谈的几个问题,原型就是其中的一个.说了句大话,史上最清晰.本来是想按照大纲式的行文写一下,但写到后边感觉其实就一个概念,没有什么条理性,所以下面就简单按照概念解释的模式谈 ...

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

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

  4. javascript进阶-原型prototype

    一.javascript原型认识 很多编程语言都有类的概念,我们可以拿原型和类进行比较,看看它们之间的区别以及相同点在哪里. 1.类:类是一个具体事物的抽象所以类是一个抽象的东西,在面向对象中类可以用 ...

  5. 理解JavaScript 的原型属性

    1.原型继承 面向对象编程可以通过很多途径实现.其他的语言,比如 Java,使用基于类的模型实现: 类及对象实例区别对待.但在 JavaScript 中没有类的概念,取而代之的是一切皆对象.JavaS ...

  6. JavaScript - 基于原型的面向对象

    JavaScript - 基于原型的面向对象 1. 引言 JavaScript 是一种基于原型的面向对象语言,而不是基于类的!!! 基于类的面向对象语言,比如 Java,是构建在两个不同实体的概念之上 ...

  7. JavaScript的原型继承

    JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他 ...

  8. javaScript系列 [04]-javaScript的原型链

    [04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...

  9. JavaScript prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

  10. Javascript的原型继承,说清楚

    一直以来对Javascript的原型.原型链.继承等东西都只是会用和了解,但没有深入去理解这门语言关于继承这方面的本质和特点.闲暇之余做的理解和总结,欢迎各位朋友一起讨论. 本文本主要从两段代码的区别 ...

随机推荐

  1. python3 内置函数详解

    内置函数详解 abs(x) 返回数字的绝对值,参数可以是整数或浮点数,如果参数是复数,则返回其大小. # 如果参数是复数,则返回其大小. >>> abs(-25) 25 >&g ...

  2. MySQL多实例(二)

    一.多实例MySQL数据库原理 1.1:原理图 1.2:多实例原理(什么是多实例) 简单来说MySQL多实例就是在一台服务器上同时开启多个不用的服务端口(如:3306.3307),同时运行多个MySQ ...

  3. 用Python玩转数据——第五周数据统计和可视化

    一.数据获取 1.本地数据 with 语句,pd.read_csv('data.csv') 2.网站上数据 2.1 直接获取网页源码,在用正则表达式进行删选 2.2 API接口获取---以豆瓣为例 i ...

  4. Ubuntu之tar与curl操作

    1,压缩备份: tar cfvj /tmp/test.tar.bz2  /tmp/test tar cfvz /tmp/test.tar.gz  /tmp/test tar xfvj /tmp/tes ...

  5. Spring Security构建Rest服务-0400-使用切片拦截rest服务

    Restful API的拦截: 1,过滤器(Filter) 2,拦截器(Interceptor) 3,切片(Aspect) 1,过滤器 和传统javaweb一鸟样,例,记录controller执行时间 ...

  6. java数据结构之队列

    队列概述队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有元素时,称为空队列.– ...

  7. SpringBoot学习之自动装配

    在前面使用SSM集成时,我们可以使用注解实现无配置化注入,但是这种依赖被进行“人工干预了的”,换句话就是说我们手动进行装配,那么此时还没有达到SpringBoot这种自动装配的效果,那么究竟Sprin ...

  8. C#中null值属于什么变量类型

    今天学习发现有段代码的输出结果有些理解不了,如图1,输出的结果全部为 false: 图1 后来和同事讨论研究了一下才明白,原来是这样:↓ class Program { static void Mai ...

  9. nginx 超时问题: upstream timed out (110: Connection timed out) while reading response header from upstream

    目录 错误内容 错误原因 错误解决办法 错误内容 我们可以在error.log 里面可以看到 错误内容:upstream timed out (110: Connection timed out) w ...

  10. maven 中 jar管理

    慢慢补充 将本地jar添加到maven的仓库中 mvn install:install-file -DgroupId=org.geotools -DartifactId=gt-swing -Dvers ...