实例化一个对象

function Person() {} // 构造函数
var p = new Person() // 实例化
p.name = 'ppy'        // 添加属性

原型

原型是 function 对象的一个属性，它定义了构造函数构造出对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。 — 原型也是对象

prototype

Person.prototype // 查看构造函数的原型

如此我们就可以查看这个构造函数的原型，用下图可以描述从构造函数出发两者的关系，那么怎么描述从实例对象出发的与原型关系呢？

proto

p.__proto__ // 查看实例对象的原型

使用上述语句我们可以查看实例对象的原型，并且我们可以发现，这个原型与该实例对象的构造函数的原型是完全相等的。由此，我们可以更新关系图
这个图中我们描述了构造函数到原型、实例到原型、构造函数与实例的关系，那么我们怎么描述原型到构造函数的关系呢？

constructor

Person.prototype.constructor // 调用 Person 原型的构造函数

从以上测试我们可以发现，Person 构造函数，其实是 Person 原型中的一个方法。或者说，原型中的 constructor 与构造函数相关联。
不存在从原型到实例的属性，因为一个原型可以构建出无穷个不同的实例
自此我们得到了构造函数、原型以及实例的关系

原型链

当我们尝试去查看实例的某个属性时，若该实例不存在该属性，就会在其原型的属性中查找，若原型中也没有该属性，就会继续向原型的原型发起查找，直到不存在原型
这个查找过程构成一条从实例到原型，再从原型到原型到链，称为原型链

// 在 Object 构造函数的原型中，添加 age 属性
Object.prototype.age = 3
// 在 Person 构造函数的原型中，添加 sex 属性
Person.prototype.sex = 'MALE'
// 构建一个 Person 实例，并为其添加 name 属性
var p = new Person()
p.name = 'PPY'

接下来开始测试
我们先查找 name 属性，在查找 sex 属性，最后查找 age 属性

可见，当 p 中存在 name 时，读取它可正确打印；
当 p 中不存在 sex ，将会到 p 的原型也就是 p._proto_ 去查找，结果能正确打印
当 p 及其原型都没有要读取得属性 age 时，将再往上查找，即 Person.prototype._proto_ 上查找，结果能正确打印

其中，Person.prototype.__proto__ 就是 Object 构建出的实例
三者的关系如下

Object 的原型是 null，往上再无原型，在查找原型链过程中，当查找到 null 时，停止查找

面试题准备（一）：原型、原型链相关推荐

JS难点剖析-原型原型链
2019独角兽企业重金招聘Python工程师标准>>> js的原型&原型链&闭包,在很多人看来是区分JS程序员水平的关键知识点,当然对这句话我不是十分赞同.但是掌握这 ...
JavaScript——原型/原型链中的顶层对象（图解）
本篇需要提前了解的知识储备:原型和原型链,以下仅概要介绍,不作详细讲解. 详细学习可参考: JavaScript--面向对象(封装):https://blog.csdn.net/qq_29493173 ...
js原型和原型链_初识JS原型/原型链/原型继承
本文思路: 原型->原型链->原型继承->基于原型的继承/ES6中的继承->__proto__与prototype 首先我们知道JS中有对象,比如: var 但是在我们没有对这 ...
我所理解的原型原型链
一.题目我们先看一道题目 var F = function() {}; Object.prototype.a = function() {console.log('a');};Function.pr ...
我所理解的原型原型链 1
一.题目我们先看一道题目 var F = function() {}; Object.prototype.a = function() {console.log('a');};Function.pr ...
如何更加简单的理解JS中的原型原型链概念
前面写了很多关于前端经验之谈,今天就来点干货吧.这篇文章将会介绍原型这个概念原型是整个Javascript中比较重要的概念,如果面向对象想要学好,那么这个东西你必须要了解,不然后面的原型链,继承,多 ...
原型原型链 call / apply
原型定义: 原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先.通过该构造函数产生的对象,可以继承原型的属性和方法.原型也是对象. 利用原型特点和概念,可以提取共有属性. 对 ...
深拷贝和原型原型链和web api 和 this指向等(中初级前端面事题)持续更新中，建议收藏
深拷贝值类型的赋值就是深拷贝:变量赋值时,拷贝的不是内存地址,而是将数据完整的在内存中复制了一份 const a = 10const b = aconsole.log(b); 浅拷贝引用类型(nu ...
JavaScript 原型原型链
JavaScript 原型本文讲介绍JavaScript原型以及JavaScript的原型链 JS中的原型和原型链所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外) 所有的函数 ...
原型,原型链,原型的继承
原型的作用? 1.节省内存空间 2.实现数据共享(继承) 什么是原型? 任何一个函数都有propotype属性,它本身是一个对象,我们称之为原型构造函数,实例化对象与原型之间的关系? 1.任何一个函 ...

面试题准备（一）：原型、原型链

文章目录

实例化一个对象

原型

prototype

proto

constructor

原型链

面试题准备（一）：原型、原型链相关推荐

最新文章

热门文章