分类: JavaScript - 全栈潘哥

2024-03-01发表2024-04-21更新前端 / JavaScript

需要做如下两步配置。

1、让 vite 能识别 @ 路径别名

vite.config.js 增加：

import { resolve } from 'path';

export default defineConfig {
    // ...
    resolve: {
        alias: {
            "@": resolve(__dirname, 'src'), // vite 编译的路径别名
        },
        // extensions: ['.js', '.json', '.ts'], // 使用路径别名时省略后缀名编译时补全，默认值为 ['.js', '.json', '.ts']
    }
    // ...
}

2、让 IDE 能识别 @ 路径别名

用 @ 路径别名导入文件后，IDE （如 jetbrains 家的）要能识别导入路径，实现代码提示识别，点击导入变量或导入路径能跳转到文件。

在根目录下的 jsconfig.json 加入以下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2023-02-11发表2024-04-21更新前端 / JavaScript

JavaScript 原型方法：call、apply、bind

call、apply、bind 是 JavaScript 函数的原型方法，用于改变函数的 this 指向来执行函数。一般这种鬼操作能不用则不用，没得选的时候才有必要用。

apply() 调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象的形式提供的参数
call() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
bind() 创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用

const bar = {
    name: 'johnny'
};
function foo (age, hobby) {
    console.log(this.name, age, hobby);
}

// apply 和 call 作用相同，传参方式不同
foo.apply(bar, [28, 'sleep']); // johnny 28 sleep
foo.call(bar, 28, 'sleep'); // johnny 28 sleep

// 先绑定对象返回一个函数
const bindBar = foo.bind(bar);
bindBar(28, 'sleep'); // johnny 28 sleep

参考：深入理解JavaScript——call、apply、bind三大将

2023-02-11发表2024-04-21更新前端 / JavaScript

JavaScript 箭头函数与 function 函数的区别

见过箭头函数后，知道箭头函数是 function 定义函数的简写，然后还有一点是箭头函数中的 this 是上级代码的 this。
其实除了这两点外，箭头函数和 function 函数还有很多区别。

1、基本语法

// 没有参数时
() => {
    // code ...
}
// 有参数时
(param1, param2, ..., paramN) => {
    // code ...
}
// 只有1个参数时，圆括号可以省略
param => {
    // code ...
}

2、this 指向

在顶级代码中， this 指向 window 对象；
在 function 定义的函数中， this 指向该函数的对象；
在箭头函数中，箭头函数不会创建自己的 this，始终指向箭头函数所在作用域下的 this。

用原型方法 apply()、call()、bind() 不能改变箭头函数中 this 的指向。

const bar = {
    name: 'johnny'
};
function foo () {
    console.log(this.name);
}

const fa = () => {
    console.log(this.name);
};

// bar 作为 foo() 实例的 this
foo.call(bar); // johnny
fa.call(bar); // TypeError: Cannot read properties of undefined (reading 'name')

3、箭头函数不能做构造函数

2023-02-10发表2024-04-21更新前端 / JavaScript

用可变变量访问 JavaScript 类、对象的方法（动态访问 JS 类、对象的方法）

JavaScript中，用可变变量访问对象方法或类静态方法，如果访问的方法中 this，此时 this 将会是 undefined。
用对象解构赋值获得函数名（如：xxx）后，用函数名后面加括号（如：xxx()）执行函数，this 也是 undefined。

问题复现：

// 动态访问方法
class Cls1 {
    fn () {
        console.log(this);
    }
}

const obj = new Cls1();

// ❌ 错误方法
const fn1 = obj.fn;
fn1(); // this undefined

// 解构赋值取得
const { fn } = obj;

// ❌ 错误方法
fn(); // this undefined

2023-02-09发表2024-04-21更新前端 / JavaScript

彻底搞清 JavaScript Promise

基本用法

我们知道，一个 js Promise 对象，我们可以用 then()、catch()、finally() 进行链式操作，如：

promiseObj.then((res) => {
    // do something
}).catch((error) => {
    // do something
}).finally(() => {
    // do something
})

这是 js Promise 的基本使用，但是要用好 Promise，还有一下几个问题需要搞清楚。

怎样创建 `Promise` 对象

用 `Promise` 对象创建 `Promise` 实例

1、让 vite 能识别 @ 路径别名

2、让 IDE 能识别 @ 路径别名

1、基本语法

2、this 指向

3、箭头函数不能做构造函数

基本用法

怎样创建 `Promise` 对象

用 `Promise` 对象创建 `Promise` 实例

分类

归档

最新文章

标签

1、让 vite 能识别 @ 路径别名

2、让 IDE 能识别 @ 路径别名

1、基本语法

2、this 指向

3、箭头函数不能做构造函数

基本用法

怎样创建 Promise 对象

用 Promise 对象创建 Promise 实例

分类

归档

最新文章

标签

怎样创建 `Promise` 对象

用 `Promise` 对象创建 `Promise` 实例