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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
基于vue实现分页效果
Nov 06 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
JS使用H5实现图片预览功能
Sep 30 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/06/07 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
20个常用Python运维库和模块
2018/02/12 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
简单了解Python write writelines区别
2020/02/27 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
用python读取xlsx文件
2020/12/17 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
采购文员岗位职责
2013/11/20 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年度保密工作总结
2015/04/24 职场文书
母亲节感言
2015/08/03 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
k8s部署redis cluster集群的实现
2021/06/24 Redis