深度解析javascript中的this(三)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 深度解析javascript中的this(三)

前言

      上一章我们说到,this绑定的四种规则,默认绑定,隐式绑定,显式绑定和new绑定,并且我们抛出了一个问题,如果当这几个绑定一起使用的时候,优先级又是怎样的,这一章我们将就这个问题进一步展开解释

正文

优先级

      毫无疑问,默认绑定的优先级是四条规则中最低的,所以我们可以先不考虑它。我们先来比较一下隐式绑定和显式绑定的优先级,看一下下面的例子:

640.png

      可以看到,显式绑定优先级更高,也就是说在判断时应当先考虑是否可以应用显式绑定。然后我们再看一下new绑定和隐式绑定的优先级谁更高

640.png

      可以看到 new 绑定比隐式绑定优先级高。最后我们只需要比较一下new绑定和显式绑定就可以了,new 和 call/apply 无法一起使用,因此无法通过 new foo.call(obj1) 来直接进行测试。但是我们可以使用上一章说的硬绑定来测试它俩的优先级,也就是bind

640.png

      不难看出,这里采用了new的this绑定,也就是new的this绑定优先级是在bind之前的,总结下来就是new绑定 > 显式绑定 > 隐式绑定 > 默认绑定,不过其实new的绑定优先级


从bind源码看为什么new绑定优先级更高

      下面是 new 修改 this 的相关代码:

      简单来说,这段代码会判断硬绑定函数是否是被 new 调用,如果是的话就会使用新创建的 this 替换硬绑定的 this。所以这也是为什么new绑定的优先级在bind之上


new绑定和显式绑定在函数柯里化的应用

      那么,为什么要在 new 中使用硬绑定函数呢?直接使用普通函数不是更简单吗?之所以要在 new 中使用硬绑定函数,主要目的是预先设置函数的一些参数,这样在使用new 进行初始化时就可以只传入其余的参数。bind(…) 的功能之一就是可以把除了第一个参数(第一个参数用于绑定 this)之外的其他参数都传给下层的函数(这种技术称为“部分应用”,是“柯里化”的一种)。举例来说:

640.png


小结

      这一章我们介绍了this相关绑定的优先级关系,并且从源码层面阐述了new绑定的优先级在显式绑定之前,但是既是规则,总有例外,下一章我们将进一步分析this绑定规则之外的一些例外情况,谢谢学习


目录
相关文章
|
14天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
11天前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
92 59
|
3天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
9 0
|
18天前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
24 0
|
19天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
46 0
|
19天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
24 0
|
19天前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
29 0
|
JavaScript 前端开发
夏天到了,了解一下JS的this指向问题
夏天到了,了解一下JS的this指向问题
|
自然语言处理 JavaScript 前端开发
JavaScript 中 this 指向详解
JavaScript 中 this 指向详解
109 0
|
前端开发 JavaScript
web前端-JavaScript中的call、apply和bind方法(改变this指向)
文章目录 每日推荐 正文开始 call()和apply() bind()() call、apply和bind方法的区别 相同点 不同点 this指向的四种情况总结
web前端-JavaScript中的call、apply和bind方法(改变this指向)

推荐镜像

更多