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

简介: 什么是原型链和作用域链?

1.作用域链


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

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


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


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


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

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

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

  • 栈最底部为全局可执行上下文
  • 全局可执行上下文 之上有多个 函数可执行上下文
  • 每个可执行上下文中包含了指向外部其他可执行上下文的引用,直到 全局可执行上下文 时它指向 null

image.png

image.png

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

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

=> 就形成了作用域链

2.原型链


要讲清楚这个问题,主要着重这几个方面:

  • 什么是原型对象
  • 构造函数, 原型对象, 实例的三角关系图
  • 原型链如何形成

image.png

原型对象

在 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__,因此这样就串联形成一个链式结构,也就是我们称为的原型链。

image.png


相关文章
|
JavaScript
vue3的7种路由守卫使用大全
vue3的7种路由守卫使用大全
1823 0
|
缓存 前端开发 JavaScript
如何优化前端性能:7个实用技巧
在当今互联网高速发展的时代,前端性能优化成为了每个开发者必须面对的挑战之一。本文将介绍7个实用的技巧,帮助前端开发者提升网站性能,提升用户体验。
|
9月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
264 8
|
搜索推荐 JavaScript 前端开发
单页面应用和多页面应用区别及优缺点
单页面应用和多页面应用区别及优缺点
485 1
|
前端开发 JavaScript UED
深入理解 JavaScript 同步和异步,让网页灵动起来!
深入理解 JavaScript 同步和异步,让网页灵动起来!
|
存储 JavaScript 前端开发
学习vuex和localstorage . cookie的作用与区别
探讨Vuex、LocalStorage与Cookie:三种关键技术在现代Web开发中的角色。Vuex作为Vue的状态管理工具,提供集中、响应式且可预测的状态变更机制,适用于复杂应用。LocalStorage为客户端提供大容量、持久化的数据存储方案,适合保存用户偏好等静态信息。Cookie则擅长会话跟踪与认证管理,数据虽小却能在客户端与服务器间传递。每种技术针对不同场景各有优势,合理选用是关键。
|
前端开发 API UED
qiankun 微应用的使用
【10月更文挑战第4天】
|
网络协议 安全 网络安全
常见的网络传输协议有几种
常见的网络传输协议涵盖多个层次,包括传输层(如TCP、UDP、SCTP)、应用层(如HTTP/HTTPS、FTP、SMTP、DNS、SSH)、网络层(如IP、ICMP、ARP)、数据链路层(如Ethernet、PPP、Wi-Fi)及安全协议(如SSL/TLS、IPSec)。这些协议各具特色,适用于不同场景,如TCP用于可靠传输,UDP适合实时应用,而HTTP/HTTPS则服务于网页浏览和数据交换。通过这些协议的协同工作,现代互联网和局域网得以实现多样化的应用和服务。
|
缓存 JavaScript 前端开发
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
该文章提供了八种解决Vue项目创建时遇到的`command failed: npm install --loglevel error`错误的方法,包括清理缓存、更换npm源、重新安装Node.js等措施。
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
|
人工智能 Android开发 C++
Harmony中的HAP、HAR、HSP区别
Harmony中的HAP、HAR、HSP区别
551 0