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 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
一些实用性较高的js方法
Apr 19 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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实现用户在线时间统计详解
2011/10/08 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
jQuery ajaxForm()的应用
2016/10/14 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python字典快速保存于读取的方法
2018/03/23 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
python调用百度API实现人脸识别
2020/11/17 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
学生会竞选自荐信
2013/10/12 职场文书
最新计算机专业自荐信
2013/10/16 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
银行先进个人总结
2015/02/15 职场文书
初中同学会致辞
2015/08/01 职场文书