[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,一经查实,立即删除!

相关文章

python 虚拟环境原理_Python 虚拟环境

建议在开发环境和生产环境下都使用虚拟环境来管理项目的依赖。 - Flask背景Python 应用通常会使用一些第三方的软件包和模块。不同的应用可能会依赖不同版本的同一个软件包&#xff0c;或者依赖不同的 Python 版本。设想这样的场景:小白之前有一个 Flask 0.10 做的网站并且一直…

pullToRefresh下拉刷新上拉加载

PullToRefresh 是一个第三方的工程。 之前的自定义下拉刷新控件貌似不太好用&#xff0c;于是网上找了这个。 参考&#xff1a;http://www.cnblogs.com/summers/p/4343964.html 主要是一些功能都提供了接口&#xff0c;不需要自己再写了。 废话不多说&#xff0c;上干货。 1、布…

ArcGIS删除地图投影坐标,只保留地理坐标

今天突发奇想,在ArcGIS中进行投影转换很容易,那么如何删除投影坐标,只保留地理坐标呢? 一开始想着从投影文件(.prj)入手,删除其投影信息,结构不尽如人意。 如果从定义地理坐标(Define Projection)的角度入手,重新定义地理坐标,如WGS84呢?经过尝试之…

RHEL5U8配置Centos yum源

由于RHEL的yum在线更新是收费的&#xff0c;如果没有注册的话是不能使用的&#xff0c;即不能在线安装软件。在这种情况下&#xff0c;如果我们使用的机器安装的是RHEL系统要是每次安装软件先挂载本地光盘会很繁琐&#xff0c;而且有些软件也是老版本的&#xff0c;这种情况下我…

剑指offer之圆圈最后剩下的数

1 问题 求圆圈最后剩下的数&#xff0c;比如数组0, 1, 2 ,3 ,4围城一个环&#xff0c;我们每次去掉第三个数字&#xff0c;删除的前4个数字依次是2, 0, 4, 1&#xff0c;最后剩下的数字是3 04 13 2 2 思路 我们用list,我们要支持环就这样,如果发现当…

如何获取 Linq 查询结果集合中的索引?

咨询区 Guy我有下面一段伪代码&#xff1a;string[] s {"zero", "one", "two", "three", "four", "five"};var x s .Select((a,i) > new {Value a, Index i}) .Where(b > b.Value.StartsWith("t&…

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;而目的操作数可以是累加器、寄存器和存贮器…

Chrome浏览器常见问题及解决方案集锦

Chrome是一款非常优秀的浏览器,尤其在网页调试方面出类拔萃,深得本人的喜欢。但是在使用的过程中,总有一些问题会困扰大家,现将一些常见问题及解决方案列举出来,供参考。 1. Chrome下遇到该网页已屏蔽插件adobe flash player的解决办法 适合以下情形: (1)确定在电…

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

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

ASP.Net 验证正则表达式

整数或者小数&#xff1a;^[0-9]\.{0,1}[0-9]{0,2}$ 只能输入数字&#xff1a;"^[0-9]*$"。只能输入n位的数字&#xff1a;"^\d{n}$"。只能输入至少n位的数字&#xff1a;"^\d{n,}$"。只能输入m~n位的数字&#xff1a;。"^\d{m,n}$"只…

python123输出hello world_Python基础:输入与输出

输出print()函数&#xff1a;print()函数示例如下&#xff1a;>>>print(1)1>>> print(Hello World)Hello World>>> a 1>>> b a>>> print(a,b)1 a扩展部分&#xff1a;(初学不看)回过头来看print()函数的语法&#xff1a;print(…

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

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

剑指offer之滑动窗口的最大值

1 问题 给定一个数组和滑动窗口的大小&#xff0c;请找出所有滑动窗口里的最大值&#xff0c;列如&#xff0c;数组&#xff5b;2,3,4,2,6,2,5,1&#xff5d;的滑动窗口大小是3&#xff0c;一起6个滑动窗口&#xff0c;分别是{4&#xff0c;4&#xff0c;6&#xff0c;6&#…

.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、点击“下一步”。

计算机应用基础851,最新2020秋广东开放大学计算机应用基础本科上传资料作业2文档(2页)-原创力文档...

Sheet2sheet1姓名迟春艳宋灵辉任慧霞张玉鹏李卫东付祖荣焦中明杨丹妍张积盛王继锋王永隆陶春光刘炳光吕秀涛赵业绵齐晓鹏王晶晶张秀双姜殿琴车延波闫少林李安娜盖玉艳王建东于玲云周琳娜王瑞欣学生成绩表期中成绩期末成绩总成绩籍贯陕西江西河北山东湖南广东上海辽宁北京湖北山…

复利计算评价博客

评价&#xff1a; 201406114202 蔡彩虹&#xff08;1&#xff09; http://www.cnblogs.com/caicaihong/p/5393335.html 201406114207 甘佳萍&#xff08;2&#xff09; http://www.cnblogs.com/gjpg/p/5393501.html 201406114239 赖文亮&#xff08;3&#xff09; http://www.c…

地理模块化施工的优点_模块化建筑适合学校的6个原因

原标题&#xff1a;模块化建筑适合学校的6个原因我们正处于模块化建筑的新时代&#xff0c;学校建筑能从这种创新和有效的建筑方法中受益。最先进的工厂制造——减少制造时间; 提高施工质量; 更具环境可持续性; 减少现场工作和干扰学校的正常作息; 同时在项目期间提供更好的健康…

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

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