Javascript中this指向丢失原因及解决办法详解

大家都知道JS中的this关键字通常出现在函数或者方法中,用来指向调用该函数或者方法的对象。但是在很多时候this的指向却并不总是如我们所愿,这一篇文章就一起来看看到底该如何判断this所指向的对象,同时在this指向丢失情况下如何恢复。

this指向丢失

相信有过面向对象编程经验的朋友对于this的使用不会陌生,来看两个例子

这里的this指向的是构造函数生成的对象zhangsan,对象调用自身的方法sayHello(),其中的this自然不会有什么指向问题。

这里只是把构造函数换成了class语法的方式,this指向的是类实例xiaofu,实例调用自身的方法,其中的this也不会有什么指向问题。

但是再看下面这个例子

注意 setTimeout 的第一个参数是一个函数名,而并不是具体的函数调用。所以这里并不能直接传递zhangsan,sayHello(),不然会马上执行

本意是想等待2秒之后再打印,结果打印完发现this.name并没有打印出来,this指向丢失了。按照this指向调用函数的对象的逻辑,说明2秒后调用sayHello()这个方法的已经不是zhangsan这个对象了。

如果在方法中打印一下this,就会发现此时this指向的是Window。也就是说最后一句可以像如下改写

执行异步操作的时候是将一个函数丢给浏览器,2秒以后,浏览器去直接执行该函数。

这时候可以引出一个重要的结论:包含this的函数无法在定义的时候,而只有在被真正执行的时候才能知道this指向哪个对象。

再看下面的例子就很容易理解了

因为sayHello这个方法真正执行的时候是被lisi这个对象调用,所以this指向的是lisi这个对象,this.name打印了出来也是lisi。

多重调用以及箭头函数

可能有朋友又要问了,那我直接执行zhangsan.sayHello()不也是相当于在Window中去执行这个函数吗?

让我们再看下面这个例子

这里调用的sayHello函数是info对象下的,可以看到函数中的this指向的是info对象,而并不是zhangsan对象。这里又可以引出另外一个重要的结论:多重调用下,函数中的this只会指向函数的上一级对象。这里函数的上一级对象是info,所以虽然zhangsan中也有一个name,但是并不会被引用。

但是这里需要注意的是箭头函数。

箭头函数在ES6中被引入,写起来简洁明了,但是有一个特点需要注意,就是箭头函数没有独立的this,其中的this会自动从上一级继承。

所以如果改写下上面的代码

可以看出,箭头函数中使用this就和直接在info中使用this效果一样,都是指向zhangsan对象。

this指向丢失解决办法

再把话题回到this丢失上面来。

想要恢复this指向,根本逻辑就是想办法还是让this定义时候的对象来调用this所在的函数,回到上面的例子就是让zhangsan来调用sayHello()。

有两种方式可以来实现,第一种是多添加一层函数调用

这里的最后一句相当于Window.zhangsan,sayHello(),根据上面的规则,this指向的是上一级对象,也就是zhangsan,所以可以成功打印出来。

并且这里使用箭头函数同样有效果,因为这里的函数只是起到多加一层包装的作用,并没有实际作用。

第二种方式是利用函数的bind方法,使用语法如下

这里就是将函数func绑定到了context这个上下文上,返回一个新的函数。不管被谁调用,这个新的函数里面的this永远指向context。

这里就是将sayHello()这个方法绑定到了zhangsan这个对象上,以后不管这个返回的新函数被谁调用,都可以成功返回zhangsan中的this.name。

但是这里要注意的是,只能绑定到构造函数返回的具体对象上,而不能直接绑定到类名Student上。

同时要注意bind并不支持级联操作

这里首先将函数f绑定到一个对象,然后马上级联操作绑定到另一个对象,可以看出只有第一个bind起了效果。

同时这里也可以看到只有在函数执行的时候才会将this指向具体的对象

bind传递函数参数

这里再提一个bind方法的进阶用法,就是固定函数传递的一部分参数值,有一点类似python中的partial函数。因为bind方法除了第一个参数是上下文,后面还可以接函数的默认参数值

这里修改了sayHello()方法,必须要传递一个参数,如果想以后每次执行该方法的时候都是传递参数99就可以像上面那样。

下面来一个更通用的例子。

有一个需要传递两个参数的函数如下

通过bind方法将第一个参数值默认为99,并返回一个新函数。这里因为没有context需要传递,所以第一个参数放null,不能省略

注意这里只能是按照参数的先后顺序进行默认值传递,例如这里就不能跨过age给name传递默认值。

总结

JS中的this使用起来并不像其他OOP语言中的类似关键字方便(例如python中的self),因为有指代丢失的问题出现,只能是在实际使用的时候多多练习,熟能生巧了。

参考链接


Javascript中this指向丢失原因及解决办法详解

Compare Arrays in JavaScript

HarmonyOS NEXT 系统推荐使用 Lodash 库,更符合开发直觉。

Arrays are objects in JavaScript, so the triple equals operator === only returns true if the arrays are the same reference.

How do you compare whether two arrays are equal? Equality is a tricky subject: the JavaScript spec defines 4 different ways of checking if two values are "equal", and that doesn't take into account deep equality between objects.

In cases like this, it helps to be as explicit as possible about what you mean by "equal." In software engineering, asking a question in the right way often makes the answer obvious.

With that in mind, here's 3 definitions of equality for arrays and how to check them.

Same Length, Each Value Equal

One approach for comparing a and b is checking if each value of a is strictly equal to the corresponding value of b. This works well if all the elements of the arrays are primitives as opposed to objects.

Deep Equality With POJOs

The previous arrayEquals() function works great for primitive values, but falls short if you want to compare objects by value.

One neat way to take into account object values is comparing arrays by their JSON.stringify() output.

This approach is handy because it requires minimal code and no outside libraries. However, comparing JSON.stringify() output has an unfortunate edge case that may be a problem depending on your use case. Since undefined isn't a valid JSON value, the below arrays have the same JSON.stringify() output, because JSON.stringify() converts undefined to null.

Using Lodash's isEqual()

In addition to the null vs undefined quirk, comparing JSON.stringify() output also doesn't take into account object types. As far as JSON.stringify() is concerned, an object with a toJSON() function that returns 42 is the same as the number 42.

Similarly, a custom object is the same as a POJO:

Lodash's isEqual() function, on the other hand, takes all this into account.

Lodash's isEqual() function is the way to go if you need all the bells and whistles of checking that objects have the same class. The JSON.stringify() approach works well for POJOs, just make sure you take into account null and only use it with trusted data - toJSON() can be a security vulnerability.

参考链接


Compare Arrays in JavaScript

vue3的provide和inject

浅析

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

定义说明:这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

通俗的说就是:组件得引入层次过多,我们的子孙组件想要获取祖先组件得资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱。这个就是这对选项要干的事情。

provide:是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。

inject:一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值。

一句话介绍:provide可以向所有子孙组件提供数据以及提供修改数据的方法,子孙组件用inject使用数据。

在组合式API中的用法

基本用法

似乎,组合式API的provide没有提供批量方法, 只能每个变量写一句。

顶级组件:

子组件:

孙组件:

官方说:

inject() can only be used inside setup() or functional components.

这个意思是说,inject()只能放在setup()生命周期里运行,不能放在别的周期里运行,也不能放在事件周期里运行。所以你可以先在setup()周期取值。

例一:这是允许的,因为console.log是setup()生命周期里的同步代码

例三:让例一的xx函数作为鼠标事件回调,也是禁止的,原因也一样。

例四:放在Promise.then()也是禁止的,比如:

一级组件修改数据,孙子组件监听变更

provide的变量必须是响应式变量,孙子组件监听的变量也必须是响应式变量。

一级组件:

孙子组件:

孙子组件修改数据,一级组件监听变更

一级组件除了提供数据,还要提供一个修改数据的方法,孙子组件要接收并使用这个方法,这样修改的就是一级组件的数据,修改之后又会影响孙子组件的数据。

一级组件:

孙子组件:

禁止孙子组件修改一级组件的数据

禁止的话,一级组件传递的变量必须是只读的,可以是readonly,也可以是shallowRef。这样孙子组件修改数据的话,一级组件不会有反应。

一级组件:

在配置项式API中的用法

跟Vue 2差不多,简单说一下。

provide

provide语法比在组合式API里要灵活,毕竟可以用对象。比如:

如果要把data里的数据provide,说白了就是打算用this,provide要写成函数:

如果要提供计算属性,也是一样的道理,不过,如果不打算用配置项式计算属性,而是想用vue的computed方法

可以写成:

inject

inject的用法更简单,比如inject: ['user', 'updateUser']

双向修改而且响应 想要双向修改而且响应,就必须借助reactive或者ref家族方法和computed方法。provide的数据必须是computed返回的数据,才能保证数据有变化时刷新孙子组件的数据。孙子组件要用computed + unref来解包装且计算属性,才能得到真正需要的数据。

可以看到,由于孙子组件的injectcomputed的属性不能重名,所以我造出一个abcabc变量名,这就比较麻烦了。我们再看组合式API,就没有abcabc这种中间变量,原因是ref: abc = inject("abc");让接收和加响应式一气呵成,这也是组合式API的优势之一。

一级组件:

孙子组件:

参考链接


vue3的provide和inject

vue3 -- @vue/compiler-sfc 单文件转换工具

@vue/compiler-sfc

"version": "3.2.37"

SFC是vue中重要的一环,也是vue3中对于静态节点进行缓存提升的重要位置

SFC -- single file Component 单文件组件,以 .vue 进行结尾,这个文件浏览器也不会识别,最终也是要被转换成js代码

SFC中包含三块,template、script、style等三块代码,分别表示模版、脚本、样式三块

@vue/compiler-sfc的作用就是把单文件组件编译成为js代码

parse

下面就看一看具体的使用

新建一个Foo.vue组件

组件同时包括templatescriptstyle三块

新建一个nodejs脚本

用fs读取到文件的内容后,使用parse解析, 最终会返回一个对象

setup脚本改造foo.vue

setup语法编译后的结果

唯一的不同就是编译后的结果从原来的script上迁移到scriptSetup

compileTemplate

拿到之前parse后的结果后,需要对template进行进一步的转换,把template结果进一步编译成对应的js vnode函数

其中code的值就是最终模版编译的结果

我们把结果单独拿出来看下

最终返回了一个render函数,这里也就符合预期,vue组件中如果使用js的方式写,可以写一个render函数去渲染组件

compilerScript

根据parsed的结果来解析脚本部分,compileScript接收2个参数,第一个就是之前parse的结果, 然后再传入相应的option

编译后的结果,content就是最终编译出的代码

content格式化之后的结果, 所以说setup只是语法糖,最终还是以defineComponent去包裹一个对象进行返回的形式

compileStyle

compileStyle 即解析SFC style模块的入口函数

由于sfc中style块是可以写多个的,所以parse最终的结果styles其实是个数组

由变量签名也可以看出

这里我们取第一个块打印出来看一下,实际情况下应该是去循环的

编译结果

其中code即是最终的css结果

参考链接


vue3 -- @vue/compiler-sfc 单文件转换工具 -- 学习笔记

从Vue 2到Vue 3组织代码的思维转变

到了Vue 3,当我们看完组合式 API相关文档,蠢蠢欲动立马上手把业务代码挪到setup内时,竟发现无法在setup()内部通过 this 获取当前组件实例了(this 是 undefined)!

其实想要变相获取“this”可以用 getCurrentInstance ,比如像这样访问全局属性:

真正属于组件的内容是ctxproxyproxy就是对ctx包装了一层 Proxy。目前看来属实没用,就不展开来说了。

getCurrentInstance 只能setup生命周期钩子中调用。不仅使用起来麻烦,且只适用于开发环境。官方都告知我们日常开发中不要用:

貌似到头来this的问题还是无解。Vue 3 Composition API 的设计初衷也是为了减少对组件实例的依赖,避免this指向的困扰。包括一些全局方法也可以提取到 composables 组合函数中,无需再通过当前组件的原型链获得。我们动不动就通过this获取组件实例的思想该转变了

怎么个直接使用法?我们先看一眼简易版 选项式 API组合式 API 的对比。再用例子来捋:

API 对比

1. 读写数据

Vue 2的做法,或者说Option API更准确 (后面就简写成Vue 2)

data中定义,this.xxx获取
<template>模版中不需要用this

Vue 3 的 Composition API (后面就简写成 Vue 3)

ref reactive定义。
通过ref方法定义的属性在 setup 函数内需要通过.value去访问它的值 (template 模版内不用), reactive则不用。我们可以简单地把 ref(obj) 理解为 reactive({ value: obj })
详细请看 ➡️ 【Vue 3 之:弄清 ref reactive toRef toRefs】

如何选择 refreactive?建议:

  1. 基础类型值(StringNumberBoolean等) 或单值对象(类似{ count: 3 }这样只有一个属性值的对象) 使用 ref
  2. 引用类型值(ObjectArray)使用 reactive
  3. 对于 ref 对象可以使用 unref 语法糖来免去.value访问的困扰

2. 定义/调用方法

Vue 2:methods

继续上面的例子,我们把请求列表数据的操作提取成一个方法。(略去重复的代码)

Vue 3

3. 获取模版DOM元素/或组件实例的引用

Vue 2

直接整上 element-plus Form 表单 的的例子,<el-form>是我们写的DemoForm组件的一个子组件,通过为它添加一个refattribute,就能使用使用this.$refs[ref值]直接访问子组件以及它的所有属性/方法了。
这边只放相对实际的场景用例,给 DOM 元素添加 ref 引用的例子看这里:【模板引用】

Vue 3

我们来修改成 Composition API 版本:
别忘了 ref 创建的变量要用.value获取值
详细文档请阅:【在组合式 API 中使用 template refs】

4. 父组件向子组件传值

文档:Props
使用 DOM 模板时,camelCase (驼峰命名法) 的 props 需要使用等价的 kebab-case (短横线分隔命名) 命名。

说明:第 4-8 点 都会结合同一个 Tabs 标签页的例子,循序渐进梳理这几个属性或方法。依然用了element-plus 的组件(TabsTabPane)。

Vue 2

父组件:📃src/views/design/indexV2.vue

子组件 DesignTabs:📃src/views/design/components/DesignTabsV2.vue

Vue 3

转化成 Composition API 后的子组件:(一贯省略重复代码)
📃src/views/design/components/DesignTabsV3.vue

5. 计算属性computed

比如我们现在希望在点击 tab 标签的时候能获得 tab 的序号(index):

Vue 2

组件 DesignTabs:📃src/views/design/components/DesignTabsV2.vue

Vue 3

这里就比较不一样了,props 的值是不允许在子组件直接修改的。子组件的activeName状态初始值为传入的activeTab,如果activeTabtabOptions一样通过 toRefstoRef 包装,那么activeName的修改是和activeTab深度响应的,这样会报错;
如果要同步修改父组件的值,可以通过emit事件(后面会说)

组件 DesignTabs:📃src/views/design/components/DesignTabsV3.vue

这里想额外提一嘴computed可以包在reactive内使用,在组件数据比较简单的情况下甚至可以直接用reactive包起组件全部数据,就好像 Option Api 的 data 选项那样。这样做的目的是在setup()访问不用再带上.value
但这同时会带来一个问题,在模版需要使用state.xx去渲染,而且如果我们 return 的时候把state解构,包含的状态会失去响应性,那就得不偿失了。需要用toRefs包裹再传递,即可维持其响应性。

6. 侦听器watch

获取这个tabIndex有什么用呢,目的是在当前标签变化时根据index刷新对应TabPane的子组件的数据。但是如果在标签点击事件触发数据刷新也不合适,因为我们不希望重复点击相同tab时也去刷新。那么这个时候watch或者watchEffect就登场了。

Vue 2

组件 DesignTabs:📃src/views/design/components/DesignTabsV2.vue

Vue 3

这个写法可能不是很直观,可以看下 ➡️ 组合式 API 模板引用在 v-for 中的用法
组件 DesignTabs:📃src/views/design/components/DesignTabsV3.vue

watchwatchEffect 的功能是等效的,都是侦听其依赖,并在依赖值变更时重新运行定义的函数。两者区别:

watch

  • 必须在第一个参数明确指定跟踪的依赖
    侦听器数据源只能是getter/effect函数、refreactive对象,或者包含这些类型(的数据)的数组
    换句话说,只要侦听数据不是refreactive对象,就必须传入一个箭头函数
    打个比方,若要侦听reactive对象的某个属性(例:const state = reactive({ count: 0 })count),便不能像侦听单个ref或整个reactive对象那样直接传一个变量,而是必须在第一个参数传入一个回调函数,如() => state.count
  • 第二个参数是依赖值变更时执行的回调,函数内能访问被侦听状态的当前值和前一个值;
  • 组件初始化时不会执行回调。如果需要可在第三个参数(Object)中设置immediate: true
  • 如果要对多层嵌套状态深度侦听,在第三个参数中设置deep: true

watchEffect

  • 无需手动传入依赖项;
  • 只有一个参数,即侦听数据变更的回调函数,会自动跟踪所有函数中用到的变量;
  • 组件初始化时即会执行一次。

7. 子组件向父组件通信(触发父组件方法)

Vue 2

父组件:📃src/views/design/indexV2.vue

子组件 DesignTabs:📃src/views/design/components/DesignTabsV2.vue

Vue 3

子组件 DesignTabs:📃src/views/design/components/DesignTabsV3.vue

8. 使用 Vue Router

Vue 2

📃src/views/design/components/DesignTabsV2.vue

Vue 3

📃src/views/design/components/DesignTabsV3.vue

9. 获取 Vuex 对象

Vue 2

Vue 3

参考链接


从 Vue 2 到 Vue 3 组织代码的思维转变(一)- 获取组件实例

ubuntu 16.04/macOS Big Sur(11.4)编译Quasar

注意,目前(2020/07/05)发现,在macOS Big Sur(11.4)版本上,dev 分支没办法编译通过。

目前(2020/07/20)发现,在macOS Big Sur(11.4)系统,quasar 2.0.3/1.15.23 版本已经可以编译通过,开发分支经常编译不通过,这部分经常发生较大变动。

参考链接


macOS Big Sur(11.4)安装指定版本Node

参考链接


macOS Big Sur(11.4)编译vuelidate 2.x适配Vue 3.x

目前,vuelidate 2.x暂时还没发布正式版本,而如果需要适配Vue 3.x,则需要自己编译,编译过程如下:

移动端 JS 引擎哪家强

在一般的移动端开发场景中,每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的。但是市场瞬息万变,Native 语言在开发效率上存在一定不足,并且从APP版本更新应用市场审核发布再到用户下载更新,总会存在一定的时间差,这样就导致新的功能无法及时覆盖全量用户。

为了解决这个问题,开发者们一般会在项目里引入一门脚本语言,提速APP的研发流程。在移动端应用比较广泛的脚本语言有 LuaJavaScript,前者在游戏领域用的比较多,后者在应用领域用的比较多。本篇文章主要是想探讨一下移动双端(iOS & Android)的JavaScript引擎选型。由于个人水平有限,文章总会有遗漏和不足的地方,还请各位大佬多多指教。

JS 引擎选型要点

JavaScript作为世界上最热门的脚本语言,有着非常多的引擎实现:有Apple御用的 JavaScriptCore,有性能最强劲的V8,还有最近热度很高的QuickJS......如何从这些JS引擎里选出最适合的?我个人认为要有几个考量:

  • 性能:这个没话说,肯定是越快越好
  • 体积JS引擎会增加一定的包体积
  • 内存占用:内存占用越少越好
  • JavaScript 语法支持程度:支持的新语法越多越好
  • 调试的便捷性:是否直接支持debug?还是需要自己编译实现调试工具链
  • 应用市场平台规范:主要是iOS平台,平台禁止应用集成带JIT功能的虚拟机

比较麻烦的是,上面的几个点都不是互相独立的,比如说开启JITV8引擎,性能肯定是最好的,但它引擎体积就很大,内存占用也很高;在包体积上很占优势的QuickJS,由于没有JIT加持,和有JIT的引擎比起来平均会有5-10倍的性能差距。

下面我会综合刚刚提到的几个点,并选择了JavaScriptCoreV8HermesQuickJS4JSVM,说说它们的优点和特点,再谈谈他们的不足。

继续阅读移动端 JS 引擎哪家强

Qussar QScrollArea动态适配View高度

我们在使用Qussar QScrollArea等控件的时候,很多情况下,必须给出一个固定的高度,否则控件的高度会变成 0,导致无法显示出来。如何动态适配View高度呢? 参考如下:

或者类似下面的情况:

参考链接