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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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中的超全局变量
2006/10/09 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
JavaScript手风琴页面制作
2017/05/17 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Cython 三分钟入门教程
2009/09/17 Python
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python实现的端口扫描功能示例
2018/04/08 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
董事长岗位职责
2013/11/30 职场文书
英文自荐信
2013/12/15 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
十佳青年事迹材料
2014/08/21 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
实习报告范文
2019/07/30 职场文书
Go语言 详解net的tcp服务
2022/04/14 Golang
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android