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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
js计算页面刷新的次数
Jul 20 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
vue-swiper的使用教程
Aug 30 Javascript
node版本管理工具n包使用教程详解
Nov 09 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
jquery select操作的日期联动实现代码
2009/12/06 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python的print用法示例
2014/02/11 Python
使用python统计文件行数示例分享
2014/02/21 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
法律讲堂观后感
2015/06/11 职场文书