javascript中 __proto__与prorotype的理解
我们先看看这样一段代码:
1 <script type="text/javascript"> 2 var Person = function () { }; 3 var p = new Person(); 4 </script>
我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:
<1> var p={}; 也就是说,初始化一个对象p。
<2> p.__proto__=Person.prototype;
<3> Person.call(p);也就是说构造p,也可以称之为初始化p。
关键在于第二步,我们来证明一下:
1 <script type="text/javascript"> 2 var Person = function () { }; 3 var p = new Person(); 4 alert(p.__proto__ === Person.prototype); 5 </script>
这段代码会返回true。说明我们步骤2的正确。
那么__proto__是什么?我们在这里简单地说下。每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。
按照标准,__proto__是不对外公开的,也就是说是个私有属性,但是Firefox的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。
好,概念说清了,让我们看一下下面这些代码:
1 <script type="text/javascript"> 2 var Person = function () { }; 3 Person.prototype.Say = function () { 4 alert("Person say"); 5 } 6 var p = new Person(); 7 p.Say(); 8 </script>
这段代码很简单,相信每个人都这样写过,那就让我们看下为什么p可以访问Person的Say。
首先var p=new Person();可以得出p.__proto__=Person.prototype。那么当我们调用p.Say()时,首先p中没有Say这个属性, 于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我们在上面定义了 Person.prototype.Say=function(){}; 于是,就找到了这个方法。
好,接下来,让我们看个更复杂的。
1 <script> 2 'use strict'; 3 var Person = function () {}; 4 Person.prototype.Say = function () { 5 alert("Person say"); 7 } 8 9 Person.prototype.Salary = 50000; 10 var Programmer = function () { 11 }; 12 Programmer.prototype = new Person(); 13 Programmer.prototype.WriteCode = function () { 14 15 alert("programmer writes code"); 16 17 }; 18 19 Programmer.prototype.Salary = 500; 20 21 var p = new Programmer(); 22 p.Say(); /*Person say*/ 23 p.WriteCode(); /*programmer writes code*/ 24 alert(p.Salary); /*500*/ 25 26 /* 27 * p.__proto__ = Programmer.prototype; 28 * Programmer.prototype = Person.prototype; 29 * p.__proto__.__proto__ = Person.prototype; 30 * */ 31 </script>
我们来做这样的推导:
var p=new Programmer()可以得出p.__proto__=Programmer.prototype;
而在上面我们指定了Programmer.prototype=new Person();我们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:
p1.__proto__=Person.prototype;
Programmer.prototype.__proto__=Person.prototype;
由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。
好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,于是就找到了alert(“Person say”)的方法。
其余的也都是同样的道理。
这也就是原型链的实现原理。
最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!
转载于:https://www.cnblogs.com/kakutian/p/7011470.html
javascript中 __proto__与prorotype的理解相关推荐
- javascript中浅拷贝和深拷贝的理解
javascript中浅拷贝和深拷贝的理解 什么是拷贝? 简单地说就是复制,对数据的复制 浅拷贝:改变拷贝者的值,被拷贝者的值也会变化 深拷贝:改变拷贝者的值,被拷贝者的值不会变化 由于基本数据类型是 ...
- JavaScript中call、apply个人理解
JavaScript中call.apply个人理解 一句话即通俗的说:call.apply 是为了改变this的状态而存在的 var lisi = {name:'李四',age:23};var zs ...
- 12.在JavaScript中的事件模型如何理解?
一.事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件.鼠标事件.自定义事件等 由于DOM是一个树结构,如果在 ...
- JavaScript中__proto__与prototype的关系
这里讨论下对象的内部原型(__proto__)和构造器的原型(prototype)的关系. 一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empt ...
- js(javascript)中__proto__和prototype解析
为什么80%的码农都做不了架构师?>>> __proto__是内部原型,prototype是构造器原型(构造器其实就是函数) 构造器的原型是一个对象 一.所有构造器/函数的__ ...
- JavaScript中__proto__、prototype和constructor的详细讲解【1】
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- 对javascript中的匿名函数的理解
(function(){//这里的所有变量和函数都属于局部对象 }()); 在javascript中以function开头的语句通常是函数声明.加上了外面的括号(黄色背景)后则创建的是函数表达式. 蓝 ...
- JavaScript中加号运算符+ 运算过程理解
在JavaScript中二元加法运算符"+"可以对两个数字或者字符串进行连接操作. 1+2=>3 "hello"+" "+" ...
- Vuejs和Javascript中的this变量的理解
文章目录 1 javascript 1.1 全局环境下 1.2 对象中this 1.3 函数中this 1.4 箭头函数 1.5 例子和总结 1.5.1 例一全局对象 1.5.2 例二对象调用 1.5 ...
最新文章
- Filter 字符编码Filter 一
- PHP — Cookie and Session篇
- HDFC的完整形式是什么?
- win7卸载java_Win7彻底卸载Oracle 11g图文步骤(靠谱)
- Win10系统浏览器字体乱码如何解决
- java开发乱码解决
- 奥鹏计算机基础2021,18春北语《计算机基础》作业3(参考答案)
- 并查集 路径压缩(具体解释)
- HPC:鱼与熊掌可以兼得
- #pragma comment (lib, ws2_32.lib) 调用报错
- re模块或正则表达式
- 【中等】迷你语法分析器
- 单U盘 clonezilla 克隆ubuntu16.04系统
- 游戏安全--手游安全技术入门笔记
- C语言动态开辟多维数组空间
- 成为阿里云大使的笔记
- 《人类简史》个人读书笔记
- 牛客网数据库SQL实战44—— 将id=5以及emp_no=10001的行数据替换成id=5以及emp_no=10005
- 【Mybatis】一个Mybatis程序
- 塔尔斯基是华沙学派的继承人
热门文章
- HTML布局是外边距咋表示,布局 页面设置百分比 子元素如何设置外边距?
- linux 编辑启动菜单,grub2的配置,linux启动菜单修改
- c语言是否继续运行,C语言是否有运行时?
- springboot+前端实现文件(图片)上传到指定目录
- html点击计数器的实现,点击计数器_Servlet 教程_w3cschool
- android标题栏添加按钮_几行代码实现Android通用标题栏(轻松向左右两侧添加Menu)...
- ai训练 样本大小_防止过拟合(三):数据增强(增加训练样本)
- 未定义标识符 stringc/c++(20)_天津港20款丰田塞纳四驱顶配现车价格优惠
- java 可插拔注解_20200311 8. 注解和可插拔性
- python获取未读邮箱数目_python imaplib 获取未读邮件,email解析并按照原名下载附件...