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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
vue环境搭建简单教程
Nov 07 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
微信小程序实现日历签到
Sep 21 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检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
python生成密码字典的方法
2018/07/06 Python
Linux下python3.7.0安装教程
2018/07/30 Python
Python底层封装实现方法详解
2020/01/22 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
期中考试反思800字
2014/05/01 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
答辩状格式范本
2015/05/22 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle