深入分析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 字符串连接[性能比较]
May 10 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
koa源码中promise的解读
Nov 13 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
stripos函数知识点实例分享
2019/02/11 PHP
PHP时间函数使用详解
2019/03/21 PHP
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
用python处理MS Word的实例讲解
2018/05/08 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
用python解压分析jar包实例
2020/01/16 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
网上蛋糕店创业计划书
2014/01/24 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
自查自纠整改报告
2014/11/06 职场文书
教师工作表现自我评价
2015/03/05 职场文书
商场营业员岗位职责
2015/04/14 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
windows安装python超详细图文教程
2021/05/21 Python
python中subplot大小的设置步骤
2021/06/28 Python