JS原型与原型链的深入理解


Posted in Javascript onFebruary 15, 2017

要了解原型和原型链,首先要理解普通对象和函数对象。

一、普通对象和函数对象的区别

在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码:

function f1(){};
var f2 = function(){};
var f3 = new function(){};

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object

在上面的代码中可以看出,f1、f2和f3都是函数对象,而o1,o2和o3都是object对象,也就是普通对象,函数对象本质就是由new function()构造而来,其他的都是普通对象;函数对象和普通对象理解之后,后文会说明两者的区别。

二、原型

在JavaScript中,原型也是一个对象,原型的作用,则是实现对象的继承。

在js的所有函数对象中,都存在一个属性prototype,该属性对应当前对象的原型。

而所有的JavaScript对象,都存在一个_proto_属性(由于_proto_是个非标准属性,因此只有ff和chrome两个浏览器支持,标准方法是Object.getPrototypeOf()),_proto_属性指向实例对象的构造函数的原型,理解起来就如下:

var p = new Person(); 
console.log(p._proto === Person.prototype)//true

从上面代码可以看出,p是实例对象,Person是p的构造函数,可以看出来p的_proto_属性指向构造函数Person的原型。

下面用代码来解释一下js是如何通过原型进行继承的:

var parent = function(name){
 this.name = name;
}
parent.prototype.getName = function(){
 return this.name;
}
var son = new parent("huahua");

console.log(son.getName());//'huahua'

显然,son继承了parent的原型中的函数属性getName。

三、原型链

除开Object的prototype的原型是null以外,所有的对象和原型都有自己的原型,对象的原型指向原型对象。

在层级多的关系中,多个原型层层相连则构成了原型链。

在查找一个对象的属性时,倘若在当前对象找不到该属性,则会沿着原型链一直往上查找,知道找到为止,如果到了原型链顶端,还没找到,则返回undefined。

JS原型与原型链的深入理解

四、constructor

constructor是构造函数创建的实例的属性,该属性的作用是指向创建当前对象的构造函数。

例如,son.constructor == parent;//true

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
php结合js实现多条件组合查询
May 28 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
JS如何生成随机验证码
Mar 02 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
js中数组插入、删除元素操作的方法
Feb 15 #Javascript
jQuery中on方法使用注意事项详解
Feb 15 #Javascript
防止重复发送 Ajax 请求
Feb 15 #Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 #Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 #Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 #Javascript
Canvas 绘制粒子动画背景
Feb 15 #Javascript
You might like
php的计数器程序
2006/10/09 PHP
php简单静态页生成过程
2008/03/27 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
Python greenlet实现原理和使用示例
2014/09/24 Python
Python smallseg分词用法实例分析
2015/05/28 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python实现的矩阵类实例
2017/08/22 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
资料员的岗位职责
2013/11/20 职场文书
会计个人实习计划书
2014/08/15 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
工作检讨书怎么写
2015/01/23 职场文书
入党转正介绍人意见
2015/06/03 职场文书
运动会宣传稿50字
2015/07/23 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL