javascript函数方法中bind、call、apply的使用和区别

news/2025/2/12 19:40:00/

一,this的指向

this.name = 'pink'
const obj = {name: 'coderkey',way(age,sex) {console.log(`姓名:${this.name} 年龄:${age} 性别:${sex}`);}
}
obj.way(24,'男')  // 姓名:coderkey 年龄:24 性别:男   对象obj的方法
let fn = obj.way
fn(24,'男')  // 姓名:pink 年龄:24 性别:男      全局window 

二,call( )方法的使用

(1)语法:

function.call(thisArg, arg1, arg2, ...)

(2)参数:

thisArg

可选的。在 function 函数运行时使用的 this 值。

arg1, arg2, ...

指定的参数列表。

(3)返回值:

使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined

(4)用法:

this.name = 'pink'
const obj = {name: 'coderkey',way(age,sex) {console.log(`姓名:${this.name} 年龄:${age} 性别:${sex}`);}
}
const newObj = {name: 'why'
}
let fn = obj.way
fn.call(obj,17,'女')  // 姓名:coderkey 年龄:17 性别:女
fn.call(newObj,17,'女')  // 姓名:why 年龄:17 性别:女 

三,apply( )方法的使用

(1)语法:

apply(thisArg)
apply(thisArg, argsArray)

(2)参数:

thisArg

function 函数运行时使用的 this 值。

argsArray 可选

一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 function 函数

(3)返回值:

调用有指定 this 值和参数的函数的结果。

(4)用法:

this.name = 'pink'
const obj = {name: 'coderkey',way(age,sex) {console.log(`姓名:${this.name} 年龄:${age} 性别:${sex}`);}
}
const newObj = {name: 'why'
}
let fn = obj.way
fn.apply(obj,[18,'女'])   // 姓名:coderkey 年龄:18 性别:女
fn.apply(newObj,[18,'女'])   // 姓名:why 年龄:18 性别:女

四,bind( )方法的使用

(1)语法:

function.bind(thisArg[, arg1[, arg2[, ...]]])     // 创建一个新的函数

(2)参数:

thisArg

调用绑定函数时作为 this 参数传递给目标函数的值。

arg1, arg2, ...

当目标函数被调用时,被预置入绑定函数的参数列表中的参数。

(3)返回值:

返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。

(4)用法:

this.name = 'pink'
const obj = {name: 'coderkey',way(age,sex) {console.log(`姓名:${this.name} 年龄:${age} 性别:${sex}`);}
}
const newObj = {name: 'why'
}
let fn = obj.way
fn.bind(obj,19,'女')()  // 姓名:coderkey 年龄:19 性别:女
fn.bind(newObj,19,'女')()  // 姓名:why 年龄:19 性别:女

五、bind、call、apply的区别

相同点:

三个都是用于改变this指向;
接收的第一个参数都是this要指向的对象;

不同点:

call( )bind( )传参相同,多个参数依次传入的;
apply( )只有两个参数,第二个参数为数组;
call( )apply( )都是对函数进行直接调用,而bind( )方法不会立即调用函数,而是返回一个修改this后的函数;



http://www.ppmy.cn/news/3677.html

相关文章

分布式光伏发电计及气象因子及出力预测方法研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

frp内网穿透详细安装步骤以及使用

frp是一款内网穿透工具,首先要一台服务器用作服务端(Linux),将自己的(WIN10)电脑用作客户端,我将通俗的讲解详细的安装以及使用过程,废话不多直接开始。 Linux要开放 7000 7500 9600端口,一…

QsciScintilla编辑器从任意坐标拿到正确的行号

QSci官方API函数是: //! Returns the line which is at \a point pixel coordinates or -1 if there //! is no line at that point. int lineAt(const QPoint &point) const; 然而,当鼠标位置为空行的位置,此时拿到的行号总是…

MobSDK引进相关问题

1、进入全球领先的数据智能科技平台-MobTech袤博mob官网 首先注册帐号、核验身份、选择开发者平台 2、创建项目的appkey和对应的appSecret 进入开发者模式后,对应以下几个选项模块(以短信验证模块为例),点击开始使用 跳转到个人…

《自己动手写CPU》学习记录(9)——第7章/Part 2

目录 引言 致谢 流水线暂停 指令说明 madd、maddu、msub、msubu 设计 宏定义文件 程序计数器模块 译码模块 执行模块 访存模块 HI LO 寄存器模块 通用寄存器模块 流水线控制模块 程序ROM MIPS32顶层 MIPS32 SOPC 仿真 仿真程序 TESTBENCH 仿真结果 引言 …

ELK (一)部署ELK+Filebeat日志收集分析系统

说明:此安装流程只适用于8.0.0以下的版本 1. ElasticSearch 部署 1.1 下载ElasticSearch的wget指令: wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.13.4-linux-x86_64.tar.gz1.2 解压安装包到指定目录 指定解压缩到 …

第4篇:嵌入式Linux应用开发基础知识

嵌入式Linux应用开发基础知识一、GCC编译过程二、MakefileMakefile的引入及规则Makefile的语法a. 通配符b. 假想目标: .PHONYC. 变量Makefile函数函数foreach函数filter/filter-outWildcardpatsubst函数Makefile实例通用MakefikeMakefikeMakefile.build说明.txt三、TCPserver.c…

[附源码]Python计算机毕业设计Django架构的博客平台设计

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,我…