JavaScript从原型到原型链深入理解


Posted in Javascript onJune 03, 2019

构造函数创建对象

我们先使用构造函数创建一个对象:

function Person() {
}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

在这个例子中,Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person。

很简单吧,接下来进入正题:

prototype

每个函数都有一个 prototype 属性,就是我们经常在各种例子中看到的那个 prototype ,比如:

function Person() {
}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那这个函数的 prototype 属性到底指向的是什么呢?是这个函数的原型吗?

其实,函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的 person1 和 person2 的原型。

那什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型"继承"属性。

让我们用一张图表示构造函数和实例原型之间的关系:

JavaScript从原型到原型链深入理解

在这张图中我们用 Object.prototype 表示实例原型。

那么我们该怎么表示实例与实例原型,也就是 person 和 Person.prototype 之间的关系呢,这时候我们就要讲到第二个属性:

__proto__

这是每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

为了证明这一点,我们可以在火狐或者谷歌中输入:

function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

于是我们更新下关系图:

JavaScript从原型到原型链深入理解

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:constructor,每个原型都有一个 constructor 属性指向关联的构造函数。

为了验证这一点,我们可以尝试:

function Person() {
}
console.log(Person === Person.prototype.constructor); // true

所以再更新下关系图:

JavaScript从原型到原型链深入理解

综上我们已经得出:

function Person() {
}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

了解了构造函数、实例原型、和实例之间的关系,接下来我们讲讲实例和原型的关系:

实例与原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

举个例子:

function Person() {
}
Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';
console.log(person.name) // Daisy
delete person.name;
console.log(person.name) // Kevin

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__ ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

但是万一还没有找到呢?原型的原型又是什么呢?

原型的原型

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

所以原型对象是通过 Object 构造函数生成的,结合之前所讲,实例的 __proto__ 指向构造函数的 prototype ,所以我们再更新下关系图:

JavaScript从原型到原型链深入理解

原型链

那 Object.prototype 的原型呢?

null,不信我们可以打印:

console.log(Object.prototype.__proto__ === null) // true

所以查到属性的时候查到 Object.prototype 就可以停止查找了。

所以最后一张关系图就是

JavaScript从原型到原型链深入理解

顺便还要说一下,图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

补充

最后,补充三点大家可能不会注意的地方:

constructor

首先是 constructor 属性,我们看个例子:

function Person() {
}
var person = new Person();
console.log(person.constructor === Person); // true

当获取 person.constructor 时,其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时,会从 person 的原型也就是 Person.prototype 中读取,正好原型中有该属性,所以:

person.constructor === Person.prototype.constructor

__proto__

其次是 __proto__ ,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于 Person.prototype 中,实际上,它是来自于 Object.prototype ,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.__proto__ 时,可以理解成返回了 Object.getPrototypeOf(obj)。

真的是继承吗?

最后是关于继承,前面我们讲到“每一个对象都会从原型‘继承'属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:

继承意味着复制操作,然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
Nov 28 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
生产制造追溯系统之再说条码打印
Jun 03 #Javascript
VUE安装使用教程详解
Jun 03 #Javascript
教你完全理解ReentrantLock重入锁
Jun 03 #Javascript
生产制造追溯系统之在线打印功能
Jun 03 #Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 #Javascript
深入理解 JS 垃圾回收
Jun 03 #Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
Javascript window对象详解
2014/11/12 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JavaScript中this详解
2015/09/01 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python 实现链表实例代码
2017/04/07 Python
python opencv实现证件照换底功能
2019/08/19 Python
python爬虫中多线程的使用详解
2019/09/23 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
你对IPv6了解程度
2016/02/09 面试题
幼教毕业生自我鉴定
2014/01/12 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
预备党员政审材料
2014/02/04 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
python - asyncio异步编程
2021/04/06 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL