javascript构造函数以及原型对象的理解


Posted in Javascript onJanuary 13, 2017

以下是一个构造函数的例子

如果是实例方法,不同的实例化,它们引用的地址是不一样的,是唯一的。

//定义一个构造函数
 function People(name,age){
  this.name=name;
  this.age=age;
  this.dothings=function(){
   retrun this.name+this.age;
   }
 }
 var people1 = new People("panda1",25);
 var people2 = new People("panda2",26);
 alert(people1.name==people2.name) //false

 另外一种编写原型对象的方法,通过字面量的方式创建原型对象,这里{}就是对象,是Object,new Object相对于{}

People.prototype={
 constructor:People //强制指向People
  name:"panda",
  age:25,
  dothings:function(){
   return this.name+this.age;
  }
}
var people = new People();
alert(people.constructor); //function People(){}

使用字面量的方式创新对象,使用constructor属性不会指向实例,而会指向Object。

创建的每一个函数都有一个prototype(原型)属性,也就是一个对象,原型的用途:包含由特定类型的所有实例共享的属性和方法。换句话说就是prototype通过调用构造函数而创建的那个对象的原型对象。

原型对象的好处:让所有对象实例共享它的所包含的属性与方法,不必在构造函数中定义对象信息,而是可以直接将这些添加到原型中。

//声明一个构造函数
 function People(){}
 //在原型添加属性
 People.prototype.name="panda";
 People.prototype.age=25;
 people.prototype.dothings=function(){
  return this.name+this.age;
 }  
 //实例化构造函数
 var people1 = new People();
 var people2 = new People();
 alert(people1.name==perople2.name) //true 因为都是原型里的方法,它们的地址是共享的,大家都来自同一地方。

使用对象实例无法访问到prototype,prototype属性是一个对象,需要访问prototype对象,通过people.__proto__来访问或者使用构造函数名(对象名)People.prototype,但是这个属性在IE浏览器不支持(undefind),__proto__是指向原型对象的一个指针,

另外还有一个constructor属性,这是一个构造属性,获取构造函数本身,作用是:被原型指针定位,得到构造函数本身,也就是对象实例对应原型对象的作用。

判读一个对象是否指向该构造函数的原型对象,可以使用isPrototypeOf方法来测试

People.prototype.isPrototypeOf(people1)  //true

如果实例与原型里同时存在相同的属性,比如例子中的People下的name属性,

var people = new People();
people.name="bear";
alert(people.name); //bear
alert(people1.name); //panda

实例属性并没有重新原型属性,实例的对象采用就近原则。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
vue.js开发环境搭建教程
May 04 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 #Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 #Javascript
微信小程序(三):网络请求
Jan 13 #Javascript
Javascript自定义事件详解
Jan 13 #Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 #Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 #Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
如何写php程序?
2006/12/08 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
python实现学生成绩测评系统
2020/06/22 Python
Python实现一个论文下载器的过程
2021/01/18 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
市场部规章制度
2014/01/24 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
自主招生英文自荐信
2015/03/25 职场文书
歌舞青春观后感
2015/06/10 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript