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 内置对象属性及方法集合
Jul 04 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
Jun 17 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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
phpQuery占用内存过多的处理方法
2013/11/13 PHP
CentOS安装php v8js教程
2015/02/26 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
python网络编程实例简析
2014/09/26 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
python获取list下标及其值的简单方法
2016/09/12 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
项目开发计划书
2014/01/09 职场文书
大专生自我评价
2014/01/28 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
客房领班岗位职责
2015/02/11 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
升学宴来宾致辞
2015/07/27 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL