浅谈JS原型对象和原型链


Posted in Javascript onMarch 02, 2016

在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function)。

一般而言,通过new Function产生的对象是函数对象,其他对象都是普通对象。

举例说明:

function f1(){
  //todo
}
var f2 = function(){
  //todo
};
var f3 = new Function('x','console.log(x)');
 
var o1 = {};
var o2 = new Object();
var o3 = new f1();
 
console.log(
  typeof f1,//function
  typeof f2,//function
  typeof f3,//function
  typeof o1,//object
  typeof o2,//object
  typeof o3 //object
);
>> function function function object object object

f1属于函数的声明,最常见的函数定义方式,f2实际上是一个匿名函数,把这个匿名函数赋值给了f2,属于函数表达式,f3不常见,但也是一种函数对象。

Function是JS自带的对象,f1,f2在创建的时候,JS会自动通过new Function()的方式来构建这些对象,因此,这三个对象都是通过new Function()创建的。

在Javascript中创建对象有两种方式:对象字面量和使用new表达式,o1和o2的创建恰好对应了这两种方式,重点讲一下o3, 如果用Java和C#的思路来理解的话,o3是f1的实例对象,o3和f1是同一类型,至少我以前这么认为,其实不然…

那么怎么理解呢? 很简单,看o3是不是通过new Function产生的, 显然不是,既然不是函数对象,那就是普通对象 。

通过对函数对象和普通对象的简单理解之后,我们再来了解一下Javascript中的原型和原型链:

在JS中,每当创建一个函数对象f1 时,该对象中都会内置一些属性,其中包括prototype和__proto__,  prototype即原型对象,它记录着f1的一些属性和方法。

需要注意的是,prototype 对f1是不可见的,也就是说,f1不会查找prototype中的属性和方法。

function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

那么,prototype有什么用呢? 其实prototype的主要作用就是继承。 通俗一点讲,prototype中定义的属性和方法都是留给自己的“后代”用的,因此,子类完全可以访问prototype中的属性和方法。

想要知道f1是如何把prototype留给“后代”,我们需要了解一下JS中的原型链,此时,JS中的 __proto__ 入场了,这哥们长的很奇特,隐藏的也很深,以致于你经常见不到它,但它在普通对象和函数对象中都存在, 它的作用就是保存父类的prototype对象,JS在通过new 表达式创建一个对象的时候,通常会把父类的prototype赋值给新对象的__proto__属性,这样,就形成了一代代传承…

function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc

现在我们知道,obj中__proto__保存的是f的prototype, 那么f的prototype中的__proto__中保存的是什么呢? 看下图:

浅谈JS原型对象和原型链

如图所示,f.prototype的__proto__中保存的是Object.prototype,Object.prototype对象中也有__proto__,而从输出结果看,Object.prototype.__proto__ 是null,表示obj对象原型链的终结。如下图所示:

浅谈JS原型对象和原型链

obj对象拥有这样一个原型链以后,当obj.foo执行时,obj会先查找自身是否有该属性,但不会查找自己的prototype,当找不到foo时,obj就沿着原型链依次去查找…

在上面的例子中,我们在f的prototype上定义了foo属性,这时obj就会在原型链上找到这个属性并执行。 

最后,用几句话总结一下本文中涉及到的重点:

  • 原型链的形成真正是靠__proto__ 而非prototype,当JS引擎执行对象的方法时,先查找对象本身是否存在该方法,如果不存在,会在原型链上查找,但不会查找自身的prototype。
  • 一个对象的__proto__记录着自己的原型链,决定了自身的数据类型,改变__proto__就等于改变对象的数据类型。
  • 函数的prototype不属于自身的原型链,它是子类创建的核心,决定了子类的数据类型,是连接子类原型链的桥梁。
  • 在原型对象上定义方法和属性的目的是为了被子类继承和使用。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS 获取滚动条高度示例代码
Oct 24 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
jquery单击事件和双击事件冲突解决方案
Mar 02 #Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 #Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 #Javascript
javascript求日期差的方法
Mar 02 #Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 #Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 #Javascript
js实现不重复导入的方法
Mar 02 #Javascript
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python实现ssh批量登录并执行命令
2016/10/25 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
2016高考感言
2015/08/01 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书