十分钟读懂JavaScript原型和原型链
原型(prototype)这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型。在JavaScript中,原型的探索也有很多有趣的地方,接下来跟随我的脚步去看看吧。
原型对象释义 每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象。 每个实例对象都能共享其原型对象上的属性和方法。 原型对象的作用主要用来实现属性的继承,让实例对象能共享原型对象的属性,减少内存分配。 所以,在上一节中,我们想在每个Person对象中共享同一个say方法,可以这样来实现。
function Person(name, age) { this.name = name; this.age = age; }//在原型对象上添加say函数,实例对象共享该函数
Person.prototype.say = function(){ console.log("say hello"); };var p = new Person("zs", 10, say); p.say();var p2 = new Person("zs", 10, say); p2.say(); 在原型对象上添加成员的方法: 构造函数.prototype.成员名 = 成员值; 为Person原型对象添加say方法后,实现了在多个实例对象上共享该方法的功能。
获取原型对象的方法:
构造函数.prototype 实例对象.__ proto __ 在每个实例对象上都有一个__ proto 的属性,也是用来获取该对象的原型对象。 Person.prototype == p.proto __;//true
下图详细说明了各对象之间的关系:
- 在多人开发的环境中,如果使用这种方式对内置对象做扩展,可能会对其他开发人员造成影响
- 如果在原型对象上添加了过多的成员,会降低对象成员的搜索效率。 安全的扩展内置对象 上面扩展内置对象的方法存在一定的问题,问题的关键其实在于我们是直接在内置对象的原型上进行拓展的,这样导致对其他使用该对象的开发人员造成影响。
- 所以,我们的解决思路就是,自定义一个对象,让该对象继承需要扩展的内置对象,然后只需要对自定的对象进行操作即可。
- function MyArray() { }//让MyArray的原型指向Array对象//即继承Array中的所有成员 MyArray.prototype= new Array(); MyArray.prototype.getLength=function () { return this.length; }var arr1 = new MyArray(); arr1.push("A","B","C","D","E");//内置对象的初始方法console.log(arr1.getLength());//扩展之后的方法
- 接下来,如果想要对数组做扩展,我们只需要操作MyArray即可,而不需要直接操作Array,如此,就不会对其他使用Array的开发人员操作影响了。看图理解:
关于原型和原型链,为大家展示的差不多了。但是它的核心内容还远远不止这些。接下来还有很多内容需要大家继续探索,如果你对此感兴趣,那就关注我们,接下来会发布更多教程供大家参考。
十分钟读懂JavaScript原型和原型链的更多相关文章
- 3.十分钟读懂——App开发规范的业务流程
转自:http://www.itdaan.com/blog/2017/12/08/6bc06b3387a8d1238504355a6a1c6743.html 一.主要流程 二.产品立项 工作概述: ...
- 一分钟读懂互联网广告竞价策略GFP+GSP+VCG
原文:http://ju.outofmemory.cn/entry/116780 一分钟读懂互联网广告竞价策略GFP+GSP+VCG 两个广告位,三家广告主竞价,广告平台究竟应该制定广告竞价策略呢?这 ...
- 【转】一分钟读懂互联网广告竞价策略GFP+GSP+VCG
参考这篇文章: http://ju.outofmemory.cn/entry/116780 一分钟读懂互联网广告竞价策略GFP+GSP+VCG 两个广告位,三家广告主竞价,广告平台究竟应该制定广告竞价 ...
- 一片非常有趣的文章 三分钟读懂TT猫分布式、微服务和集群之路
原文http://www.cnblogs.com/smallSevens/p/7501932.html#3782600 三分钟读懂TT猫分布式.微服务和集群之路 针对新手入门的普及,有过大型网站技 ...
- 一分钟读懂低功耗蓝牙(BLE)连接数据包
一分钟读懂低功耗蓝牙(BLE)连接数据包 1.概述 BLE 连接过程中有三个重要的数据包:SCAN_REQ, SCAN_RSP 和 CONNECT_REQ. SCAN_REQ: 扫描请求,由主设备(M ...
- 十分钟看懂AES加密
十分钟看懂AES加密算法 今天看了Moserware的<A Stick Figure Guide to the Advanced Encryption Standard(AES)>收获了不 ...
- 一文读懂JS中的原型和原型链(图解)
讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外). 2.所有的引用类型都有一个’_ _ proto_ ...
- 五分钟读懂UML类图
平时阅读一些远吗分析类文章或是设计应用架构时没少与UML类图打交道.实际上,UML类图中最常用到的元素五分钟就能掌握,下面赶紧来一起认识一下它吧: 一.类的属性的表示方式 在UML类图中,类使用包含类 ...
- 五分钟读懂UML类图(转)
平时阅读一些远吗分析类文章或是设计应用架构时没少与UML类图打交道.实际上,UML类图中最常用到的元素五分钟就能掌握,下面赶紧来一起认识一下它吧: 一.类的属性的表示方式 在UML类图中,类使用包含类 ...
随机推荐
- SpringBoot 之Spring Boot Starter依赖包及作用(自己还没有看)
spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. spring-boot-starter-amqp 通过spring-rabbit来支持 ...
- cronicle docker 运行试用
Cronicle 是一款基于nodejs 开发的分布式任务调度工具,包含了比较全的UI,使用也比较简单,为了 方便学习,简单制作了一个docker 镜像,方便使用 Dockerfile FROM ...
- Xml解析作业与Xml建模andXml建模作业
作业:config.xml解析 1.获取所有action中的type的值 public static void main(String[] args) throws Exception { Input ...
- 【louguP1502】窗口的星星
题目链接 用两条扫描线从左往右扫描,距离为W,右边的扫描线扫到就加上,左边的扫到就减去, 线段树上的一点\(x\)维护\((x,x+H)\)的星星总价值,修改时直接修改\((x-H,x)\)就行了 坐 ...
- PHP Record the number of login users
Function to record how many times the user logs in Connect to the database first: you can create a n ...
- #Ubuntu 14.04 系统下载
http://mirrors.aliyun.com/ubuntu-releases/14.04/
- zabbix监控ESXI主机
ESXI6.0默认SSH关闭的,打开SSH的方法如下图: SSH打开后,主机会有警报,关闭警报的方法如下图 esxcli system snmp set --communities publi ...
- zookeeper(一) 原理
参考文档:http://cailin.iteye.com/blog/2014486/ http://www.uml.org.cn/zjjs/201707282.asp?artid=19686 一.zo ...
- dateTime格式转换
select Convert(varchar(8),GETDATE(),112) Select replace(CONVERT(varchar(8), GETDATE(), 108),':','')
- Nexus Repository Manager OSS 3.x 安装配置
前言想要使用maven搭建项目,但是国内的网络环境可以想象,还有公司自己开发的jar包等问题,所以需要搭建一个maven的私服,这样便于管理. 找了一些教程,顺便记下来,当做笔记. 本文以Window ...