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源码学习javascript(三)
Dec 27 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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 代价太高
2016/04/26 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
微信小程序开发探究
2016/12/27 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
分享python数据统计的一些小技巧
2016/07/21 Python
详解如何使用Python编写vim插件
2017/11/28 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
自我鉴定范文300字
2013/10/01 职场文书
材料化学应届生求职信
2013/10/09 职场文书
临床医学系毕业生推荐信
2013/11/09 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Vue router配置与使用分析讲解
2022/12/24 Vue.js