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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
Prototype Array对象 学习
Jul 19 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php创建多级目录的方法
2015/03/24 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP钩子实现方法解析
2019/05/21 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
python字典与json转换的方法总结
2020/12/28 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
简历里的自我评价
2014/01/31 职场文书
颁奖典礼主持词
2014/03/25 职场文书
优秀家长事迹材料
2014/05/17 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
任命书标准格式
2015/03/02 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP