本系列文章针对目前常见的面试题,仅提供了相应的核心原理及思路,部分边界细节未处理。后续会持续更新,希望对你有所帮助。
在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就 ok 了。
本文由图雀社区认证作者 婧婧 写作而成,点击阅读原文查看作者的掘金链接,感谢作者的优质输出,让我们的技术世界变得更加美好? 欢迎阅读阿里浩兄弟作品,头条刚的《你不知道的 Event Loop》: 《你
面试官出很多考题,基本都会变着方式来考察this指向,看候选人对JS基础知识是否扎实。读者可以先拉到底部看总结,再谷歌(或各技术平台)搜索几篇类似文章,看笔者写的文章和别人有什么不同(欢迎在评论区评论不同之处),对比来看,验证与自己现有知识是否有盲点,多看几篇,自然就会完善自身知识。
先看一下bind是什么。从上面的React代码中,可以看出bind执行后是函数,并且每个函数都可以执行调用它。眼见为实,耳听为虚。读者可以在控制台一步步点开例子1中的obj:
记得差不多在两年多之前写过一篇文章 两句话理解js中的this[1],当时总结的两句话原话是这样的:
JS 中的this关键字对于初学者来说是一个谜,对于经验丰富的开发人员来说则是一个永恒的难题。this 实际上是一个移动的目标,在代码执行过程中可能会发生变化,而没有任何明显的原因。首先,看一下this关键字在其他编程语言中是什么样子的。 以下是 JS 中的一个 Person 类:
函数中this指向对于一些开发者来说一直是一个比较头疼的问题,this在js中比较灵活,不同的情况指向不同,小shy总结出了函数调用的this指向的一些情况,供大家参考。
有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能
this是面向对象编程中的一个概念,一般指向当前方法调用所在的对象,但在JS中灵活很多,为什么这么说呢?那是因为:
关于this,之前说过,this的指向取决于函数调用位置而非函数定义位置。谁调用函数,则函数上下文中的this就指向谁。
this是一个比较迷惑人的东西,尽管你对this有很多的了解,但是面试题里面考察this指向,总会让你有种猜谜的感觉,知道一些,但是还是会出错,或许你猜对了,但是又好像解释不太清楚。
任何情况下,this 都不会默认指向函数自己,除非使用 bind 绑定的方式修改 this 为函数自己。
在JavaScript中,this 这个特殊的变量是相对比较复杂的,因为this不仅仅用在面向对象环境中,在其他任何地方也是可用的。
this 关键字在大部分语言中都是一个重要的存在,JS中自然不例外,其表达的意义丰富多样甚至有些复杂,深刻理解this是学习JS、面向对象编程非常重要的一环。
记得差不多在两年多之前写过一篇文章 两句话理解js中的this,当时总结的两句话原话是这样的:
绑定一:默认绑定 PS: 没有绑定到任何对象时 & 函数定义在对象中但是被独立调用 对象也是 window
一直以来本人认为想深入了解一门语言,不光是让自己变成撸sir,更需要时间的锤炼。能经得起时间考验的东西更值得拥有。学习和使用Javascript一晃都7年了,最近才感觉自己对他才有顿悟,不知道是否来得有点迟。本文归纳了我对 JS中作用的理解,希望得学习有所帮助。 特别说明:这是从另一个侧面(函数域的覆盖范围)来解释和说明执行上下文。 一、作用域的理论理解 从入门Javascript时,无论是学校老师,还是你工作的老司机,都会很认真的考虑你,Js中有一个全局作用域,然后他包含很多的子域(
1. 面试会问啊!总有一些面试官喜欢问你一段不可能这么写的代码。看一道经典且古老的面试题(学完本文后,文末会有一道更复杂的面试题等着你哦!)
这个时候,我马老师就坐不住了,我不服气,我就去复习了一下 bind,发现太久不写基础代码,还是会需要一点时间复习,这一次我得写一个有深度的 bind,深得马老师的真传,给他分成了五层速记法。
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。
本来有三部分内容,关于 Bind, Call, Apply。但是我们先拆解成三部分分开写,今天就先讲讲 Bind 方法。
首先创造空的对象,再让this指向这个对象,通过this.name进行赋值,最终返回this,这其实也是new 一个对象的过程。
本篇文章比较适合 3 年以上的前端工作者,JS 三座大山分别指:原型与原型链,作用域及闭包,异步和单线程。
在标准函数中,this 指向的是把函数当成方法调用的上下文对象。也就是说在哪里调用的这个函数,那这个this只会指向它外面最靠近它的对象。
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕不开这些基础常用的API,这次让我们来彻底掌握它们吧!
例1中得到的结果是 3,而例2中是 Uncaught TypeError: add is not a function。
下面来看一道例题 a = { b:function(){ console.log(this); }, c:()=>{ console.log(this); } } 问: a.b a.c e= a.b f=a.c 主要是考察普通函数和匿名函数的this指向。下面来回顾一下this的指向。
前端开发中,每天和我们见面最多的也许就是 this 关键字了,一直想总结一篇 this 的文章,然后看到了 Gentle Explanation of "this" in JavaScript ,总结的太好了,这里就翻译一下吧。
JS中的this是一个老生常谈的问题了,因为它并不是一个确定的值,在不同情况下有不同的指向,所以也经常使人困惑。本篇文章会谈谈我自己对this的理解。
无论是学习react还是vue,它们都是js的应用框架。剥去他们的壳子看到的始终是js,所以作为一个前端大厨必须要熟练掌握好js这个大勺,才能烧出一顿好菜
this可以说是前端开发中比较常见的一个关键字,由于其指向是在运行时才确定,所以大家在开发中判断其方向时也会很模糊,今天就把this的指向问题拆开了,揉碎了,好好讲一讲。
JavaScript作用域为静态作用域static scope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及在何处声明的,只关心它们从何处调用,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,当然实际上this的最终指向的是那个调用它的对象。
就是因为你的left写在了click回调函数里面。因为每点击一次就会创建一块function空间,里面left变量去定时改变style,每改变一次style.left就会导致一次回流从而再渲染一次。每次点击left初始值为1,上一次的已经为+了很多次,上上次的已经为+了非常多次。渲染的时候你就会看到一会1px一会很多px的鬼畜情况,也就是动画抖动(渲染一次抖动一次)。
在之前的学习中,我发现在学习了很多JS方法后,却没有真正的应用起来或者是理解什么时候需要使用这些方法,导致自己很快就遗忘自己所学过的知识。
通过下面的思维导图,我们先对JavaScript的this关键字有一些基本的了解。
1.函数声明有预解析,而且函数声明的优先级高于变量; 2.使用Function构造函数定义函数的方式是一个函数表达式,这种方式会导致解析两次代码,影响性能。第一次解析常规的JavaScript代码,第二次解析传入构造函数的字符串
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
7种。分别是boolean、number、string、object、undefined、null、symbol。
onclick和addEventerListener中 this 默认指向绑定事件的元素。
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 特性为这个子组件赋予一个 ID 引用。ref可以用在普通的Dom元素上,也可以用在父级组件上,还可以用在子组件上,通过this.$refs对象访问,
JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。
this总是指向调用方法的对象,this的方向与方法的调用位置有关,与方法的声明位置无关(箭头函数特殊);
注:此原型图解可对照[JS基础—原型和原型链](https://blog.csdn.net/qq_37215621/article/details/126790301)中class 实现继承定义的类理解
之前在看《You Don’t Know JS - 1st Edition》这本书的时候,它对this的解释是针对各个this在哪里被调用分为四种情况。
领取专属 10元无门槛券
手把手带您无忧上云