7、call、apply、bind方法

简介: 7、call、apply、bind方法

1、call、apply、bind


  • 都是函数的方法,改变函数内部this的指向


函数内部 this的指向
1、谁调用方法 this指向谁
2、构造函数中的this 指向new创建的对象
3、全局函数的this 指向全局对象window
4、箭头函数的this 指向上下文的this



2、call方法(改变this的指向)

    // 1、指向window
    function fun() { console.log(this); }
    fun();
    // 2、指向person 
    let person = { name: "jasmine" };
    fun.call(person);
    // 3、指向person 
    let user = {
      name: "jasmine_qiqi",
      getName() { console.log(this.name); }
    }
    user.getName.call(person);


3、call方法(实现多种继承)

    // ES6(extends)
    // ES5(原型链)
    // 4、利用call实现继承(多重)
    function Person5() {
      this.login = function () {
        console.log("登陆功能");
      }
    }
    function User() {
      this.crudContent = function () {
        console.log("增删改查信息");
      }
    }
    function Admin() {
      // call:继承
      Person5.call(this);
      User.call(this);
    }
    var admin = new Admin();
    admin.login();        // 输出结果:登陆功能
    admin.crudContent();    // 输出结果:增删改查信息

4、call、apply、bind方法(实现多种继承)

    // 4、利用call实现继承(多重)
    function Person5() {
      this.name = "jasmine",
        this.login = function () {
          console.log("登陆功能");
        }
    }
    function User() {
      this.crudContent = function () {
        console.log("增删改查信息");
      }
    }
    function Admin() {
      // call:继承
      Person5.call(this);
      User.call(this);
      this.getName = function (age) {
        console.log(`我的姓名:${this.name},我的年龄${age}`);
      }
    }
    var admin = new Admin();
    admin.login();              // 输出结果:登陆功能
    admin.crudContent();          // 输出结果:增删改查信息
    let person6 = new Person5();
    admin.getName.call(person6, 18);    // 我的姓名:jasmine,我的年龄18
    admin.getName.apply(person6, [18]);   // 我的姓名:jasmine,我的年龄18
    admin.getName.bind(person6, 18)();  // 我的姓名:jasmine,我的年龄18

5、总结


call 会调用函数,通过参数列表依次传参
apply 会调用函数,通过数组传参
bind 不会调用函数,将新的重新绑定this的函数作为返回值,通过参数列表传参


目录
打赏
0
0
0
0
2
分享
相关文章
|
9月前
|
软件测试区分:条件组合覆盖、语句覆盖、判定覆盖、条件覆盖、路径覆盖
本文解释了软件测试中的不同覆盖标准,包括语句覆盖、判定覆盖、条件覆盖、条件组合覆盖和路径覆盖,并讨论了每种覆盖标准的特点、优点和缺点。
2239 62
kde
|
14天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
9275 76
|
12天前
typora免费版,激活方法,Typora使用教程
Typora是一款简洁高效的Markdown编辑器,支持即时渲染。本教程涵盖安装方法、文件操作、视图控制、格式排版、字体样式及Markdown语法,助你快速上手使用Typora进行高效写作。
2384 6
Dify MCP 保姆级教程来了!
大语言模型,例如 DeepSeek,如果不能联网、不能操作外部工具,只能是聊天机器人。除了聊天没什么可做的。
2251 34
Windows安装Claude Code
Claude Code 是 Anthropic 推出的代码助手,支持在 Windows 通过 WSL(Windows Subsystem for Linux)运行。本文介绍如何在 Windows 系统中启用 WSL、安装 Ubuntu 子系统、配置 Python 与 Node.js 环境,并最终安装和运行 Claude Code。内容涵盖 WSL 设置、开发工具安装、依赖配置及常见问题解决方法,助你顺利在本地环境中使用 Claude Code 提升编码效率。
591 1
Windows安装Claude Code
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
1249 6
【保姆级图文详解】大模型、Spring AI编程调用大模型
【保姆级图文详解】大模型、Spring AI编程调用大模型
869 11
【保姆级图文详解】大模型、Spring AI编程调用大模型
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等