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 相关文章推荐
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
详解JavaScript中的this指向问题
Feb 05 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php的扩展写法总结
2019/05/14 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
JS的反射问题
2010/04/07 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
import的本质解析
2017/10/30 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
关于MySQL中的 like操作符详情
2021/11/17 MySQL