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实现 在光标处插入指定内容
May 25 Javascript
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
js函数调用的方式
May 06 Javascript
javascript变量声明实例分析
Apr 25 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
js指定日期增加指定月份的实现方法
Dec 19 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python中decorator使用实例
2015/04/14 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python字典改变value值方法总结
2019/06/21 Python
python3使用GUI统计代码量
2019/09/18 Python
python学生信息管理系统实现代码
2019/12/17 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python常用数据分析模块原理解析
2020/07/20 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
匡威英国官网:Converse英国
2018/12/02 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
大学学习计划书范文
2014/05/02 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
PL350与SW11的比较
2021/04/22 无线电
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
python lambda 表达式形式分析
2022/04/03 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android