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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
Validform表单验证总结篇
Oct 31 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
express express-session的使用小结
Dec 12 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
自动跳转中英文页面
2006/10/09 PHP
php查看session内容的函数
2008/08/27 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
利用php输出不同的心形图案
2016/04/22 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
JavaScript数组常用方法
2015/03/02 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
django使用xadmin的全局配置详解
2019/11/15 Python
tensorflow 环境变量设置方式
2020/02/06 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
《小小雨点》教学反思
2014/02/18 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
森林病虫害防治方案
2014/06/02 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
超市采购员岗位职责
2015/04/07 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
python获取对象信息的实例详解
2021/07/07 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
Django框架中表单的用法
2022/06/10 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android