首页 > 编程语言 >javaScript/js 【call,apply,bind】

javaScript/js 【call,apply,bind】

时间:2023-12-09 10:56:41浏览次数:34  
标签:name bind javaScript am person call apply

在JavaScript中,callapplybind都是用于改变函数执行上下文(this的值)的方法。它们在不同的情境下有不同的用途。

  1. call方法:

    call方法允许你调用一个函数,并指定该函数内部的this值,以及将参数以单独的参数传递给函数。

    function greet(name) {
      console.log(`Hello, ${name}! I am ${this.name}`);
    }
    
    const person = { name: 'John' };
    
    greet.call(person, 'Alice');
    // 输出: Hello, Alice! I am John
    

    在这个例子中,call方法将greet函数的执行上下文设置为person对象,因此this指向了person对象。

  2. apply方法:

    apply方法与call类似,但是它接受一个包含函数参数的数组。

    function greet(name, age) {
      console.log(`Hello, ${name}! I am ${this.name} and I am ${age} years old`);
    }
    
    const person = { name: 'John' };
    const args = ['Alice', 25];
    
    greet.apply(person, args);
    // 输出: Hello, Alice! I am John and I am 25 years old
    

    在这个例子中,apply方法接受一个包含两个参数的数组,并将它们分别传递给greet函数。

  3. bind方法:

    bind方法返回一个新的函数,该函数的this值被绑定到传递给bind的值,而不会立即执行。

    function greet(name) {
      console.log(`Hello, ${name}! I am ${this.name}`);
    }
    
    const person = { name: 'John' };
    const greetPerson = greet.bind(person);
    
    greetPerson('Alice');
    // 输出: Hello, Alice! I am John
    

    bind方法创建了一个新的函数greetPerson,并将this绑定到person对象。然后,你可以像调用普通函数一样调用greetPerson,而它仍然会保持this绑定到person

总结:

  • callapply是立即调用函数的方法,而bind是创建一个新函数的方法。
  • callapply的区别在于参数的传递方式,call接受一系列单独的参数,而apply接受一个参数数组。
  • bind返回一个新函数,不会立即执行,而是返回一个新函数供以后调用。

标签:name,bind,javaScript,am,person,call,apply
From: https://www.cnblogs.com/code3/p/17890620.html

相关文章

  • JavaScript笔记
    JavaScript的组成:     1.数据类型:JavaScript有8种基本数据类型,包括Undefined、Null、Boolean、Number、String、BigInt、Symbol和Object。变量:在JavaScript中,可以使用var、let或const关键字声明变量。函数:JavaScript中的函数是一种可重用的代码块,可以使用fun......
  • nerdctl run -d 报"failed to call cni.Setup: plugin type=\"bridge\" failed (ad
    背景:执行 nerdctl run-d --namenginx-p8080:80nginx时,报如下错误FATA[0000]failedtocreateshimtask:OCIruntimecreatefailed:runccreatefailed:unabletostartcontainerprocess:errorduringcontainerinit:errorrunninghook#0:errorrunningh......
  • JetBrains WebStorm 2023.3 (macOS, Linux, Windows) - 最智能的 JavaScript IDE
    JetBrainsWebStorm2023.3(macOS,Linux,Windows)-最智能的JavaScriptIDE请访问原文链接:https://sysin.org/blog/jb-webstorm-2023/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgJetBrainsWebStorm-最智能的JavaScriptIDEWebStorm是一个适用于JavaSc......
  • 2023最新中级难度JavaScript面试题,包含答案。刷题必备!记录一下。
    好记性不如烂笔头内容来自面试宝典-中级难度JavaScript面试题合集问:如何实现在JavaScript中的操作settimeout/setinterval?在JavaScript中,setTimeout()和setInterval()是两个非常重要的函数,它们分别用于设置一次性延时执行的函数和周期性重复执行的函数。setTi......
  • 2023最新高级难度JavaScript面试题,包含答案。刷题必备!记录一下。
    好记性不如烂笔头内容来自面试宝典-高级难度JavaScript面试题合集问:请问你如何使用装饰器模式?装饰器模式是一种设计模式,它允许我们在不修改原有类的基础上,动态地添加新的功能或者行为。装饰器模式通过创建一个新的对象来包装原始对象,并提供与原始对象相同的方法接口,但是......
  • 前端学习-JavaScript学习-js基础-API02
    学习视频:黑马程序员视频链接事件监听三要素:事件源、事件类型、事件处理程序随机点名案例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"&......
  • JS(JavaScript)-函数(方法)
      1.介绍:JS中的函数是一种通过调用来完成具体业务的一段代码块。最核心的目的是将可重复执行的操作进行封装,然后供调用方无限制的调用。 基本作用: 方法(函数)是由事件驱动的或者当他被调用时被执行的可重复使用的代码块。Jav......
  • 如何在Web应用中添加一个JavaScript Excel查看器
    前言在现代的Web应用开发中,Excel文件的处理和展示是一项常见的需求。为了提供更好的用户体验和功能,经常需要在Web应用中添加一个JavaScriptExcel查看器,小编今天将为大家展示如何借助葡萄城公司的纯前端表格控件——SpreadJS来创建一个Excel查看器。项目结构本项目将由三个文件......
  • 【JavaScript高级程序设计】-3语言基础
    3.1语法.........................................................213.1.1区分大小写..................................213.1.2标识符..........................................213.1.3注释..............................................223.1.4严格模式......
  • Data is Null. This method or property cannot be called on Null values.
    升级到abp.io7.4EF报错System.Data.SqlTypes.SqlNullValueException:DataisNull.ThismethodorpropertycannotbecalledonNullvalues.atMicrosoft.Data.SqlClient.SqlBuffer.ThrowIfNull()atMicrosoft.Data.SqlClient.SqlBuffer.get_String()atMicroso......