浅谈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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
web打印小结
2017/01/11 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python协程用法实例分析
2015/06/04 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
Python简单读取json文件功能示例
2017/11/30 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python requests使用socks5的例子
2019/07/25 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
python中if及if-else如何使用
2020/06/02 Python
浅谈Python 参数与变量
2020/06/20 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
城建学院毕业生自荐信
2014/01/31 职场文书
八项规定整改措施
2014/02/12 职场文书
大班幼儿评语大全
2014/04/30 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
js Proxy的原理详解
2021/05/25 Javascript
《废话连篇——致新手》——chinapizza
2022/04/05 无线电