手写call函数

最新推荐文章于 2023-08-30 16:56:46 发布

白聿冉

最新推荐文章于 2023-08-30 16:56:46 发布

阅读量150

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Alone_Endeavor/article/details/128617984

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、为什么要用call函数:

1、让函数立执行；
2、可改变 this 的指向；
3、可实现继承问题；

2、call函数用法

fn.call(obj,1,2);

3.手写代码的实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>call函数</title>
</head>

<body>
  <script>
    Function.prototype.mycall = function (thisArg = window, ...args) {
      // 创建一个唯一的fn函数
      let fn = Symbol('thisFn')
      // 添加fn
      thisArg[fn] = this
      // 存储返回值
      let res = thisArg[fn](...args)
      // 删除返回值 避免污染环境变量
      delete thisArg[fn]
      return res
    }
    // 1. 普通函数
    let tiedan = {
      name: 'tiedan',
      fn() {
        console.log('tiedan.fn', 1)
      }
    }
    let xbl = {
      name: '小白龙',
      intr(...args) {
        console.log('hello my name is' + this.name)
        return Array.from(args).reduce((total, item) => total + item, 0)
      }
    }
    tiedan.fn()
    let res = xbl.intr.mycall(tiedan, 1, 2, 3, 4, 5)
    console.log(res)

    // 2. 构造函数
    let Animal = function (name) {
      this.name = name
    }
    let Cat = function (name, color) {
      Animal.mycall(this, name)
      this.color = color
    }
    let cat = new Cat('tom', 'red')
    console.log(cat)
  </script>
</body>

</html>