【5】JavaScript 函数高级——原型与原型链深入理解（图解）

马龙驹发布于2019-08-23 17:17 / 1080人阅读

摘要：探索是如何判断的表达式如果函数的显式原型对象在对象的隐式原型链上，返回，否则返回是通过自己产生的实例案例案例重要注意的显示原型和隐式原型是一样的。面试题测试题测试题报错对照下图理解

原型与原型链深入理解（图解） 原型（prototype）

函数的 prototype 属性（图）

每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）

原型对象中有一个属性constructor，它指向函数对象

给原型对象添加属性（一般都是添加方法）

作用：函数的所有实例对象自动拥有原型中的属性（方法）

显式原型与隐式原型

每个函数 function 都有一个prototype属性，即显式原型

每个实例对象都有一个__proto__，可称为隐式原型

实例对象的隐式原型的值 === 其对应构造函数的显示原型的值

内存结构（图）

总结：

函数的 prototype 属性：在定义函数时自动添加的，默认值是一个空的Object对象

对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值

程序员能直接操作显示原型，但不能直接操作隐式原型（ES6之前）

原型链 原型链（图解）

访问一个对象的属性时，

先在自身属性中查找，找到返回

如果自身属性中没有，再沿着__proto__这条链向上查找，找到返回

如果最终没有找到，返回undefined

原型链的别名：隐式原型连

原型链的作用：查找对象的属性（方法）

构造函数/原型/实例对象的关系（图解）

var o1 = new Object()

var o2 = {}

构造函数/原型/实例对象的关系2（图解）

下面这个图需要仔细理解。

原型继承

构造函数的实例对象自动拥有构造函数原型对象的属性（方法）

利用的就是原型链

原型链——属性问题

读取对象的属性值时：会自动到原型链中查找

设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值

方法一般定义在原型中，属性一般通过构造函数定义在对象本身上。

探索 instanceof instanceof是如何判断的？

表达式：A instanceof B

如果B函数的显式原型对象在A对象的(隐式)原型链上，返回true，否则返回false

Function是通过new自己产生的实例 案例1

function Foo() {  }
var f1 = new Foo();
console.log(f1 instanceof Foo); // true
console.log(f1 instanceof Object); // true

案例2(重要)

console.log(Object instanceof Function); // true 
console.log(Object instanceof Object); // true
console.log(Function instanceof Function); // true
console.log(Function instanceof Object); // true

function Foo() {}
console.log(Object instanceof  Foo); // false

注意：Function的显示原型和隐式原型是一样的。

面试题 测试题1

var A = function() { }
A.prototype.n = 1
var b = new A()
A.prototype = {
  n: 2,
  m: 3
}
var c = new A()
console.log(b.n, b.m, c.n, c.m) // 1 undefined 2 3

测试题2

var F = function(){};
Object.prototype.a = function(){
  console.log("a()")
};
Function.prototype.b = function(){
  console.log("b()")
};
var f = new F();
f.a() // a()
f.b() // 报错  f.b is not a function
F.a() // a()
F.b() // b()

对照下图理解：

GPU云服务器云服务器原型原型链原型链 javascript原型原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104121.html

《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
【进阶2-1期】深入浅出图解作用域链和闭包

摘要：本期推荐文章从作用域链谈闭包，由于微信不能访问外链，点击阅读原文就可以啦。推荐理由这是一篇译文，深入浅出图解作用域链，一步步深入介绍闭包。作用域链的顶端是全局对象，在全局环境中定义的变量就会绑定到全局对象中。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周开始前端进阶的第二期，本周的主题是作用域闭包，今天是第6天。本...

levius 2019-08-23 13:47 评论0 收藏0
【进阶2-2期】JavaScript深入之从作用域链理解闭包

摘要：使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数，也不是局部变量，所以是自由变量。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第7天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计...

simpleapples 2019-08-23 13:47 评论0 收藏0
《你不知道的javascript》笔记_对象&原型

摘要：上一篇你不知道的笔记写在前面这是年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响年是向上的一年在新的城市稳定连续坚持健身三个月早睡早起游戏时间大大缩减，学会生活。上一篇：《你不知道的javascript》笔记_this 写在前面这是2019年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响2018年是向上的一年：在新的城市稳定、...

seasonley 2019-08-23 14:32 评论0 收藏0