什么是原型链和作用域链？

1.作用域链

2.原型链

1.作用域链

JavaScript 在执⾏过程中会创建一个个的可执⾏上下⽂。 (每个函数执行都会创建这么一个可执行上下文)

每个可执⾏上下⽂的词法环境中包含了对外部词法环境的引⽤，可通过该引⽤来获取外部词法环境中的变量和声明等。

这些引⽤串联起来，⼀直指向全局的词法环境，形成一个链式结构，被称为作⽤域链。

简而言之: 函数内部可以访问到函数外部作用域的变量, 而外部函数还可以访问到全局作用域的变量,

这样的变量作用域访问的链式结构, 被称之为作用域链

let num = 1

function fn () {let a = 100function inner () {console.log(a)console.log(num)}inner()
}
fn()

下图为由多个可执行上下文组成的调用栈：

栈最底部为全局可执行上下文

全局可执行上下文 之上有多个 函数可执行上下文

每个可执行上下文中包含了指向外部其他可执行上下文的引用，直到 全局可执行上下文 时它指向 null

js全局有全局可执行上下文, 每个函数调用时, 有着函数的可执行上下文, 会入js调用栈

每个可执行上下文, 都有者对于外部上下文词法作用域的引用, 外部上下文也有着对于再外部的上下文词法作用域的引用

=> 就形成了作用域链

2.原型链

要讲清楚这个问题，主要着重这几个方面：

什么是原型对象

构造函数, 原型对象, 实例的三角关系图

原型链如何形成

原型对象

在 JavaScript 中，除去一部分内建函数，绝大多数的函数都会包含有一个叫做 prototype 的属性，指向原型对象，

基于构造函数创建出来的实例, 都可以共享访问原型对象的属性。

例如我们的 hasOwnProperty, toString ⽅法等其实是 Obejct 原型对象的方法，它可以被任何对象当做⾃⼰的⽅法来使⽤。

hasOwnProperty 用于判断, 某个属性, 是不是自己的 (还是原型链上的)

来看一段代码：

let person = { name: "Tom", age: 18, job: "student"
}

console.log(person.hasOwnProperty("name")) // true
console.log(person.hasOwnProperty("hasOwnProperty")) // false
console.log(Object.prototype.hasOwnProperty("hasOwnProperty")) // true

可以看到，hasOwnProperty 并不是 person 对象的属性，但是 person 却能调用它。

那么 person 对象是如何找到 Object 原型中的 hasOwnProperty 的呢？这就要靠原型链的能力了。

原型链

在 JavaScript 中，每个对象中都有一个 __proto__ 属性，这个属性指向了当前对象的构造函数的原型。

对象可以通过自身的 __proto__属性与它的构造函数的原型对象连接起来，

而因为它的原型对象也有 __proto__，因此这样就串联形成一个链式结构，也就是我们称为的原型链。

什么是原型链和作用域链？相关推荐

JavaScript中的链（作用域链、原型链）
JavaScript中的链(作用域链.原型链) Js中存在两种链,作用域链和原型链.作用域链是为了访问变量而存在的链,原型链是访问对象的属性而存在的链. 作用域链说到作用域链,首先来说下作用域的概念 ...
【JS】原始值与引用值、执行上下文与作用域链、作用域链增强、变量声明、标识符查找
1.原始值与引用值 EcmaScript变量可以包含两种不同类型的数据:原始值.引用值原始值:最简单的数据引用值:由多个值构成的对象六种原始值: Undefined Null Boolean N ...
学习面向对象的Javascript的第一步就是要搞清楚两个东西：原型链和作用域链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...
JavaScript执行环境及作用域（一）——执行环境栈和作用域链机制
2019独角兽企业重金招聘Python工程师标准>>> 执行环境是JavaScript中最为重要的一个概念,每个执行环境都有一个与之关联的变量对象,执行环境中所有的变量和函数都保存在 ...
JS 总结之函数、作用域链
在 JavaScript 中,函数实际上是一个对象. ? 声明 JavaScript 用 function 关键字来声明一个函数: function fn () {} 复制代码变体:函数表达式: v ...
js原型、原型链、作用链、闭包全解
https://www.2cto.com/kf/201711/698876.html [对象.变量] 一个对象就是一个类,可以理解为一个物体的标准化定义.它不是一个具体的实物,只是一个标准.而通过对象 ...
你还要我怎样的JS系列（4） -- 作用域链
前言上一章节我们讲了VO. 我们回顾一下之前的内容. 进入执行上下文会创建VO对象.建立作用域链.确定this指向.执行上下文的数据(函数形参.变量声明.函数声明)是作为属性存储在VO中的. 我们也 ...
使用变量对象引出作用域链
<script type="text/javascript"> var name="xm"; //全局变量,window.name===name; ...
对javascript作用域链的理解
这几天学习了一下javascript作用域链,感到这个挺重要的,所以写一篇文章分享一下: 1. 作用域链: 当代码在一个环境中执行时,会创建由变量对象构成的一个作用域链.作用域链的用途是:保证对执行环 ...

什么是原型链和作用域链？

1.作用域链

2.原型链

什么是原型链和作用域链？相关推荐

最新文章

热门文章