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的文件是什么文件
Dec 06 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
JavaScript链式调用实例浅析
Dec 19 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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 getsiteurl()函数
2009/09/05 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
小程序实现分类页
2019/07/12 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python3标准库总结
2019/02/19 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python tkinter实现屏保程序
2019/07/30 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
大专生找工作自荐书
2014/06/10 职场文书
物业保安岗位职责
2014/07/02 职场文书
教师先进个人材料
2014/12/17 职场文书
2015中秋祝酒词
2015/08/12 职场文书
2016七夕情人节感言
2015/12/09 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers