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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 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函数utf8转gb2312编码
2006/12/21 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
php 操作调试的方法
2012/07/12 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python MD5文件生成码
2009/01/12 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
keras 多gpu并行运行案例
2020/06/10 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
闭幕式主持词
2014/04/02 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书