深入分析js中的constructor和prototype


Posted in Javascript onApril 07, 2012

我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子,来说明这个

function a(c){ 
this.b = c; 
this.d =function(){ 
alert(this.b); 
} 
} 
var obj = new a('test'); 
alert(typeof obj.prototype);//undefine 
alert(typeof a.prototype);//object

从上面的例子可以看出函数的prototype 属性又指向了一个对象,这个对象就是prototype对象,请看下图

深入分析js中的constructor和prototype

a.prototype 包含了2个属性,一个是constructor ,另外一个是__proto__

这个constructor  就是我们的构造函数a,这个也很容易理解。

那么__proto__ 是什么呢?

这个就涉及到了原型链的概念:

每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去。

请看mozzlia 对它对它的描述

When an object is created, its __proto__ property is set to constructing function's prototype property. For example var fred = new Employee(); will cause fred.__proto__ = Employee.prototype;.

This is used at runtime to look up properties which are not declared in the object directly. E.g. when fred.doSomething() is executed and fred does not contain adoSomethingfred.__proto__ is checked, which points to Employee.prototype, which contains a doSomething, i.e. fred.__proto__.doSomething() is invoked.

Note that __proto__ is a property of the instances, whereas prototype is a property of their constructor functions.

不管你信不信,我们来看图

深入分析js中的constructor和prototype
在后面如果加上 alert(obj.__proto__ === a.prototype) //true

同理,在这里我们来分析出new 运算符做了那些事情

  1.  var obj={}; 也就是说,初始化一个对象obj。
  2. obj.__proto__=a.prototype;
  3.  a.call(obj);也就是说构造obj,也可以称之为初始化obj。

我们将这个例子改造一些,变得复杂一点。

function a(c){ 
this.b = c; 
this.d =function(){ 
alert(this.b); 
} 
} 
a.prototype.test = function(){ 
alert(this.b); 
} 
var obj = function (){} 
obj.prototype = new a('test'); 
obj.prototype.test1 =function(){ 
alert(22222); 
} 
var t = new obj('test'); 
t.test();//alert('test');

我们来分析下这个过程

由 var t = new obj('test'); 我们可以得到 t.__proto__ = obj.prototype,但是上面指定obj.prototype =new a('test'); 可以这样来看下

obj.prototype = p, p = new a('test'); p.__proto__ = a.prototype;

那么obj.prototype.__proto__ = a.prototype,由 t.__proto__ = obj.prototype 可以得出 t.__proto__.__proto__ = a.prototype,

所以对象t先去找本身是的prototype 是否有test函数,发现没有,结果再往上级找,即 t.__proto__ ,亦即obj.prototype 寻找test函数 ,但是obj.prototype 也没有这个函数,然后再往上找。即

t.__proto__.__proto__ 找,由于t.__proto__.__proto__ = a.prototype 在 a.prototype 中找到了这个方法,输出了alert('test')

从这里可以分析得出一个结论,js中原形链的本质在于 __proto__

再看看一个列子

function a(c){ 
this.b = c; 
this.d =function(){ 
alert(this.b); 
} 
} 
var obj = new a('test'); 
alert(obj.constructor);//function a(){} 
alert(a.prototype.constructor);//function a(){}

根据上面讲到的__proto__ 我们来分析下,首先obj是没有constructor 这个属性的,但是 obj.__proto__ = a.prototype;就从

a.prototype中寻找,而 a.prototype.constructor 是就a,所有两者的结果是一一样的.

Javascript 相关文章推荐
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
浅谈javascript中的作用域
Apr 07 #Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 #Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 #Javascript
JavaScript 高级篇之函数 (四)
Apr 07 #Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 #Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 #Javascript
为原生js Array增加each方法
Apr 07 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
JS 网站性能优化笔记
2011/05/24 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
vue组件生命周期详解
2017/11/07 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
ES6关于Promise的用法详解
2018/05/07 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python 定时修改数据库的示例代码
2018/04/08 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
志愿者宣传口号
2014/06/17 职场文书
目标责任书格式
2014/07/28 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
上课说话检讨书500字
2014/11/01 职场文书
实习单位指导教师评语
2014/12/30 职场文书
水电施工员岗位职责
2015/04/11 职场文书
上诉答辩状范文
2015/05/22 职场文书
班委竞选稿范文
2015/11/21 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js