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 相关文章推荐
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
vue实现全选和反选功能
Aug 31 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
django 模型字段设置默认值代码
2020/07/15 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
新电JAVA笔试题目
2014/08/31 面试题
端午节活动策划方案
2014/03/09 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年村官工作总结
2014/11/24 职场文书
同意离婚答辩状
2015/05/22 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript