One Artile to understand call/apply/bind

[Musing]
今天发生了一个小插曲,我有 5 件一样的短袖,突然有一件摸上去手感变得有些生硬,我想🤔了想原因,发现是我国庆住外面,把这件衣服放在太阳下晒了,这还真给我上了一课.我顺便又看了看很多有关材料方面的知识,输出一下巩固记忆
我的个人夏天的衣物需求是：透气,吸汗,凉感,尺寸合适
我有点选择狂,理工男买东西就喜欢横向对比,sku 一多就晕,最近发现蕉下这个品牌很不错,SKU 清晰,定位户外运动,然后很多细节都超棒,比如他的这个衣服标签可以简单的撕掉,logo 也没有特别的跳色,跟衣物基本融为一体,上身的凉感很到位,很像丝绸的感觉

🧵 锦纶 vs 涤纶 对比表

特性 锦纶（Nylon） 涤纶（Polyester）
通俗定义 尼龙拉成丝（聚酰胺纤维） 可乐瓶（PET 塑料）拉成丝（聚酯纤维）
主要特性 吸湿性较强、耐磨度极高、手感柔软、但不抗晒、快干速度中等 吸湿性极弱、抗晒性强、略硬挺、快干能力极佳
触感体验 柔滑、贴肤、有“冰感”，穿着舒适但易发黄 干爽、挺括，稍硬，轻盈不贴身
典型应用 登山裤、冲锋衣、风衣、背包布料 快干衣、运动外套、防晒服、帐篷布、睡袋外层
使用建议 / 场景 穿着体感更舒服,因为有冰凉感,丝绸感,适合户外裤、工装裤、防风衣；避免长时间暴晒,可烘干但易老化 适合运动服、防晒衣、T 恤；耐晒、轻薄、速干、好打理

我觉得主要差别就在穿着体会上,锦纶的体感更舒服,但是不防晒是个问题,容易老化.非贴身衣物其实涤纶的优势就更好了,因为吸水性极差,更适合做防水外层的衣物.总结就是锦纶适合贴身,涤纶适合外套

好了今天 topic 是手写 deepclone,肘起…好的写了半天的 deepclone 感觉没啥意思,主要是分清不同数据类型,然后挨个做处理,今天的话题就改成 call/apply 和 bind 的作用还有关系

在日常的开发中其实不常去使用这三个函数,主要的话在看这几个方法调用的过程中,理解下 this 和一些 ts 的语法关系依赖

先用表格来展示基本概念:

函数名 功能 是否立即执行 参数传递
call 调用函数,并指定 this 指针 是 ✅ a,b,c,d…
apply 调用函数,并指定 this 指针 是 ✅ [a,b,c,d,…]
bind 创建新函数,this 指针被永久绑定 否 ❌ a,b,c,d… 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Yun" };

greet.call(person, "Hello", "!");

greet.apply(person, ["Hi", "😊"]); // the same with apply function, but the parameter need to transfer as array

const sayHi = greet.bind(person, "Hey"); // bind will return with a new function which bind with this
sayHi("!!!");

//here is how call works
Function.prototype.call = function(thisArg, ...args) {
  // 1. 将函数作为 thisArg 的属性临时挂载
  const fn = Symbol(); 
  thisArg = thisArg ?? globalThis; // 若传入 null/undefined，则绑定到全局对象
  thisArg[fn] = this; // this 指向当前函数本身

  // 2. 执行函数
  const result = thisArg[fn](...args);

  // 3. 删除临时属性
  delete thisArg[fn];

  // 4. 返回结果
  return result;
}


//here is how apply works
Function.prototype.apply = function(thisArg, argsArray) {
  const fn = Symbol();
  thisArg = thisArg ?? globalThis;
  thisArg[fn] = this;
  
  const result = thisArg[fn](...(argsArray || []));
  
  delete thisArg[fn];
  return result;
}

//here is how bind works
Function.prototype.bind = function(thisArg, ...boundArgs) {
  const targetFn = this; // 原函数
  return function boundFunction(...args) {
    // 当 boundFunction 被调用时，再执行目标函数
    return targetFn.apply(thisArg, [...boundArgs, ...args]);
  }
}


Output:

总结:

  • call/apply：临时借用 this（立即用完就释放）
  • bind：提前固定 this（永久绑定，延迟使用）