[js高手之路]使用原型对象(prototype)需要注意的地方

我们先来一个简单的构造函数+原型对象的小程序

 1         function CreateObj( uName, uAge ) {2             this.userName = uName;3             this.userAge = uAge;4         }5         CreateObj.prototype.showUserName = function () {6             return this.userName;7         }8         CreateObj.prototype.showUserAge = function () {9             return this.userAge;
10         }

这个程序,没有什么问题,但是非常的冗余,每次扩展一个方法,都要写一次原型对象,我们可以把原型对象prototype当做一个字面量对象,所有的方法都在字面

量对象中扩展,可以达到同样的效果:

 1         CreateObj.prototype = {2             showUserAge : function(){3                 return this.userAge;4             },5             showUserName : function(){6                 return this.userName;7             },8         }9         var obj1 = new CreateObj( 'ghostwu', 22 );
10         var obj2 = new CreateObj( '卫庄', 24 );
11         console.log( obj1.showUserName(), obj1.showUserAge() ); //ghostwu 22
12         console.log( obj2.showUserName(), obj2.showUserAge() ); //卫庄 24

但是这种原型(prototype)对象的写法,属于重写了CreateObj的默认原型对象,造成的第一个问题就是constructor不再指向CreateObj.

没有重写之前,constructor指向CreateObj

 1         function CreateObj( uName, uAge ) {2             this.userName = uName;3             this.userAge = uAge;4         }5         CreateObj.prototype.showUserName = function () {6             return this.userName;7         }8         CreateObj.prototype.showUserAge = function () {9             return this.userAge;
10         }
11         console.log( CreateObj.prototype.constructor === CreateObj ); //true

重写之后,constructor指向Object

 1         CreateObj.prototype = {2             showUserAge : function(){3                 return this.userAge;4             },5             showUserName : function(){6                 return this.userName;7             },8         }9         console.log( CreateObj.prototype.constructor === CreateObj ); //false
10         console.log( CreateObj.prototype.constructor === Object ); //true

所以说,constructor不能准确的标识对象,因为他会被修改

我们之前写的程序,基本都是在原型对象(prototype)上扩展完了方法之后,再实例化对象,我们看下,先实例化对象,再在原型对象(prototype)上扩展函数,

实例对象是否能正常的调用到扩展的方法?

1         function CreateObj( uName, uAge ) {
2             this.userName = uName;
3             this.userAge = uAge;
4         }
5         var obj1 = new CreateObj( 'ghostwu', 22 );
6         CreateObj.prototype.showUserName = function(){
7             return this.userName;
8         }
9         console.log( obj1.showUserName() ); //ghostwu

可以正常调用,但是,如果原型对象是重写的,就调用不到了

 1         function CreateObj( uName, uAge ) {2             this.userName = uName;3             this.userAge = uAge;4         }5         var obj1 = new CreateObj( 'ghostwu', 22 );6         CreateObj.prototype = {7             showUserName : function(){8                 return this.userName;9             }
10         }
11         console.log( obj1.showUserName() ); //报错

因为重写了原型对象之后,同时实例化又是在重写之前发生的,所以实例的隐式原型__proto__不会指向重写的原型对象,所以就调用不到

另一个问题,如果在原型对象(prototype)上有引用类型,千万小心,因为多个实例共用原型对象,只要有一个实例改变了引用类型的值,其他实例全部会收到

改变之后的结果。

1         function CreateObj(){}
2         CreateObj.prototype = {
3             name : 'ghostwu',
4             skills : [ 'php', 'javascript', 'linux' ]
5         };
6         var obj1 = new CreateObj();
7         obj1.skills.push( 'python' );
8         var obj2 = new CreateObj();
9         console.log( obj2.skills ); //'php', 'javascript', 'linux', 'python'

原型对象(prototype)的共享特性,可以很方便的为一些内置的对象扩展一些方法,比如,数组去重复

 1         Array.prototype.unique = function(){2             var res = [];3             for( var i = 0, len = this.length; i < len; i++ ){4                 if( res.indexOf( this[i] ) == -1 ) {5                    res.push( this[i] ); 6                 }7             }8             return res;9         }
10         var arr = [ 10, 20, 30, 20, 30, 20, 40, 20 ];
11         console.log( arr.unique() ); //10, 20, 30, 40

但是,不要随便往内置的对象上面扩展方法,在多人协作开发,很容易产生覆盖,以及污染.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288178.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AirTest 基本使用及框架浅剖析——五分钟上手制作游戏辅助

简介 Airtest Project 是为编写自动化脚本&#xff0c;达到提升测试效率的一整套解决方案。它可以轻松的扩展到多平台、多引擎上&#xff1b;如基础的 Android和IOS手机应用、App&#xff1b;Windows上的应用等。 学习使用 Airtest Project 很容易&#xff0c;由于 Airtest P…

计算机组成原理xchg,8088数据传送指令-计算机组成原理与汇编语言-电子发烧友网站...

3.2.1 数据传送指令1. MOVOPRD1,OPRD2MOV是操作码&#xff0c;OPRD1和OPRD2分别是目的操作数和源操作数。该指令可把一个字节或一个字操作数从源地址传送到目的地址。源操作数可以是累加器、寄存器、存贮器以及立即操作数&#xff0c;而目的操作数可以是累加器、寄存器和存贮器…

Facebook用户遭遇千年虫:瞬间有了46年老友

一些Facebook用户今天碰到了一个有趣的bug&#xff0c;系统提示他们与好友有了46年长的好友关系。要知道&#xff0c;Facebook还不到15岁&#xff0c;很多用户也没有46岁的高龄。Facebook一直没有透露产生这个bug的原因&#xff0c;但它说已经意识到该问题。“我们已经确定了这…

(上)python3 selenium3 从框架实现代码学习selenium让你事半功倍

本文感谢以下文档或说明提供的参考。 Selenium-Python中文文档 Selenium Documentation Webdriver 参考 如有错误欢迎在评论区指出&#xff0c;作者将即时更改。 环境说明 操作系统&#xff1a;Windows7 SP1 64python 版本&#xff1a;3.7.7浏览器&#xff1a;谷歌浏览器浏览…

.NET 7 中的 HostApplicationBuilder

.NET 7 Preview 3 引入的 HostApplicationBuilderIntro在 .NET 6 中&#xff0c;ASP.NET Core 引入了 Minimal API&#xff0c;对于简单的应用使用 Minimal API 我们可以使用非常精简的代码来实现我们的 API&#xff0c;在 .NET 7 Preview 3 中&#xff0c;引入了一个 HostAppl…

SQL Server 2008 R2 Developer Edition图文安装教程

本文主要以截图的方式,详细说明SQL Server 2008 R2 Developer Edition的安装过程。 1、双击安装包中的setup.exe,如下图,点击“安装”→“全新安装或现有安装添加功能”。 2、点击“确定”。 3、点击“下一步”。

新款ATM恶意软件Alice 可对抗动态分析 但目前需要物理接触主机

趋势科技&#xff08;Trend Micro&#xff09;安全公司的研究人员警告称&#xff0c;新发现的恶意软件家族主要针对ATM机&#xff08;自动取款机&#xff09;&#xff0c;唯一目的就是要掏空ATM机保险箱里的现金。 alice软件是什么 这款恶意软件被称为“Alice”&#xff0c;是迄…

(下)python3 selenium3 从框架实现代码学习selenium让你事半功倍

上一篇博文简要 在上一篇博文中已得知&#xff1a;使用 execute 向远程服务器发送请求会通过 webdriver 与浏览器交互&#xff0c;且发送已定义的命令常量可获得一些相关信息。 其中 execute 方法实现已经在上一篇博文中有实现说明。并且在我们已经知道 webdriver基类&#x…

【空间数据库技术】ArcSDE 10.1安装配置与企业级地理空间数据库的建立及连接

1、工具: (1)ArcGIS Desktop 10.1 (2)SQL Server 2008 R2 (3)ArcSDE 10.1 2、安装过程 (1)ArcGIS Desktop 10.1的安装 请参照:ArcGIS 10.2 Desktop完全破解图文安装教程 (2)SQL Server 2008 R2的安装 请参照:SQL Server 2008 R2 Developer Edition图文安装教…

点对点 客户端-服务器 聊天程序

服务器&#xff0c;客户端都是父进程、子进程分别负责发送、接收字符串。 另外使用了信号函数来发送和接收处理信号&#xff0c;比如当子进程结束时&#xff0c;传递一个信号给父进程&#xff0c;然后父进程会执行信号处理函数。 服务器端&#xff1a; 1 #include<stdio.h&g…

C# 使用压缩流和 Brotli

如前所述&#xff0c;流的一个特性是可以将它们链接起来。为了压缩流&#xff0c;只需要创建 DeflateStream&#xff0c;并给构造函数传递另一个流(在这个例子中&#xff0c;是写入文件的outputStream)&#xff0c;使用 CompressionMode. Compress 表示压缩。使用 Write方法或其…

高考610考哪个计算机学校,2019年高考成绩610分_615分左右能报考上什么学校 文科理科大学名单推荐...

一眨眼&#xff0c;高考已经结束一段时间了&#xff1b;早晨猛地一睁眼&#xff0c;还在抱怨妈妈怎么不叫你起床&#xff0c;才突然发现今天你已经不用去学校了,这场全国性的考试高考已经结束了&#xff1b;高考这个城门攻破之后&#xff0c;还有大把壁垒再等你去攻克&#xff…

Power的力量

ZD至顶网服务器频道 08月26日 新闻消息&#xff08;文/董培欣&#xff09;&#xff1a;谈到企业级服务器市场&#xff0c;人们首先想到的会是x86 E5、E7系列的CPU产品&#xff0c;IBM在企业级市场推出的Power Systems服务器产品很少会被用户了解。可是在今年春天举行的OpenPOWE…

C#语法糖系列 —— 第三篇:聊聊闭包的底层玩法

有朋友好奇为什么将 闭包 归于语法糖&#xff0c;这里简单声明下&#xff0c;C# 中的所有闭包最终都会归结于 类 和 方法&#xff0c;为什么这么说&#xff0c;因为 C# 的基因就已经决定了&#xff0c;如果大家了解 CLR 的话应该知道&#xff0c; C#中的类最终都会用 MethodTab…

空间数据库Spatial Tools的使用

工具下载:http://www.sharpgis.net/page/SQL-Server-2008-Spatial-Tools 该工具为绿色版,点击即可使用。 1、导入Shapefile数据 双击“Shape2Sql.exe”,打开界面如下: 2、查询空间数据 双击打开“SqlSpatial.exe”

自定义View 进度条

1.在values下面新建一个attrs.xml&#xff0c;现在里面定义我们的自定义属性&#xff0c; <?xml version"1.0" encoding"utf-8"?> <resources><declare-styleable name"RoundProgressBar"><attr name"roundColor&qu…

python图形绘制库turtle中文开发文档及示例大全【最详细、连结果图都有,gif格式的!】

前言 本文参考&#xff1a;Python库官方文档 本文例子摘抄自Python库官方文档&#xff0c;为了方便讲解&#xff0c;个人进行了修改&#xff0c;并且相关函数说明不完全参照文档&#xff0c;在结果处贴出了执行结果&#xff0c;不方便用jpg等图片作为展示的用了gif格式图片进行…

oracle 事务_从Oracle到PG-PostgreSQL的MVCC机制简介

作者&#xff1a;甘植恳-AkenPostgreSQL和Oracle、MySQL等RDBMS一样&#xff0c;都有自己的并发控制机制。而并发控制的目的是为了在多个事务同时运行时保持事务ACID属性。MVCC即Multi-version concurrence control首字母缩写&#xff0c;MVCC会为每个数据更改操作创建数据块或…

【Microstation】不能从对话框中装载/创建类型为 ‘HTML‘,id =41510001 的对话框条目,该对话框为: “文本编辑器 - 字处理器“,GCSDIALOG 已装载。

在Win7上安装MicroStation V8i简体中文版,在添加文字图层的时候,点击出现提示“不能从对话框中装载/创建类型为 HTML,id =41510001 的对话框条目,该对话框为: "文本编辑器 - 字处理器",GCSDIALOG 已装载。”,问题出在Win7对该软件的兼容性上。 MS软件提供了三种…

fastdfs 一个group内实现按照不同的项目,指定路径存储.

为什么80%的码农都做不了架构师&#xff1f;>>> 环境介绍: 1: 公司目前有5个项目 A B C D E 日后可能会有所增加. 2: 使用fastdfs存储这5各项目的文件,要求各各项目的文件分开存储,也就是每个项目的文件存储到一个固定的位置. 3: 三台机器ip地址分配如下 tracker…