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 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
js函数和this用法实例分析
Mar 13 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
生产制造追溯系统之再说条码打印
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
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
python抓取最新博客内容并生成Rss
2015/05/17 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
公司委托书怎么写
2014/08/02 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
销售2014年度工作总结
2014/12/08 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书