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的对话框详解与参数
Mar 08 Javascript
JTrackBar水平拖动效果
Jul 15 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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变量内存分配问题记录整理
2013/11/27 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
python去除扩展名的实例讲解
2018/04/23 Python
python matlibplot绘制3D图形
2018/07/02 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
艺术用品:Arteza
2018/11/25 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
文秘专业应届生求职信
2014/05/26 职场文书
会计毕业生自荐书
2014/06/12 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2016年春节问候语
2015/11/11 职场文书