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编程起步(第四课)
Jan 10 Javascript
完整显示当前日期和时间的JS代码
Sep 17 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
AngularJS手动表单验证
Feb 01 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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实现mysql数据库备份类
2008/03/20 PHP
php 中文处理函数集合
2008/08/27 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
js实现简单的轮播图效果
2020/12/13 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
详解Django配置优化方法
2019/11/18 Python
详解python 中in 的 用法
2019/12/12 Python
python标准库os库的函数介绍
2020/02/12 Python
Python tcp传输代码实例解析
2020/03/18 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Python同时处理多个异常的方法
2020/07/28 Python
python爬取youtube视频的示例代码
2021/03/03 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
股权转让意向书
2014/04/01 职场文书
学校课外活动总结
2014/05/08 职场文书
商铺门前三包责任书
2014/07/25 职场文书
庐山导游词
2015/02/03 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python