call和apply的区别还有bind

本文详细解析了JavaScript中call、apply与bind方法的区别及其实现原理,通过具体示例帮助读者理解如何改变函数内部this的指向。

call和apply的区别还有bind

之前我一直都不是很了解和清楚这玩意,在实际的开发中,在翻阅前辈的代码中,看见他们中有所用用到,但一直不是很理解bind的意思,我的印象中他们都是就是改变this的指向,react中用bind改变this的指向,去指向函数。
func.call(this.Arg,arg1,arg2,…):第一个参数都是this的指向的对象,第二个参数是数组或类数组。
func.apply(thisArg, [argsArray]):第一个参数是 this 指向的对象,第二个参数是数组或类数组。
call的实现原理:
函数都可以调用call,说明call是函数原型上的方法,所有的实例都可以调用即:Function.prototype.call;
其次如果第一个参数没有传的情况下,this应该是指向window这个全局对象。
传入call的第一个参数是this指向的对象,根据隐式绑定规则,foo()中的this指向obj,因此可以这样调用函数thisArgs.func(…args),所以相对应的func中的this就指向了thisArgs,然后再返回结果。

Function.prototype.ca_ll = function() {
    // 剩余运算符,得到的是一个数组,包含除了this值的其他参数
    let [thisArgs, ...args] = arguments;
    if(!thisArgs) {
        thisArgs = typeof window === 'undefined' ? global : window;
    }
    thisArgs.func = this;
    let result = thisArgs.func(...args);
    delete thisArgs.func;  // thisArgs上并没有func属性,所以执行结果之后需要移除
    return result;
}

// 测试用例
var foo = {
    name: 'zl'
}
function func(job, age) {
    console.log(this.name);
    console.log(job, age);
}

func.ca_ll(foo, 'coder', 45);  //zl coder 45

apply的实现过程和call的实现过程类似,只是对于参数的处理有些不同。
·原理实现

Function.prototype.app_ly = function() {
    let [thisArgs, args] = arguments;
    let result;  // 函数返回结果
    if(!thisArgs) {
        thisArgs = typeof window === 'undefined' ? global : window;
    }
    thisArgs.func = this;
    if(!args) {
        // 第二个参数为null或者是undefined
        result = thisArgs.func();
    } else {
        result = thisArgs.func(...args);
    }
    delete thisArgs.func;
    return result;
}

// 测试用例
let foo = {
    name: 'zl'
}

function func(job, age) {
    console.log(this.name);
    console.log(job, age);
}

func.app_ly(foo, ['coder', 45]);  //zl coder 45

至于bind和call/apply就有一个很重要的区别, 一个函数被call/apply的时候,会直接调用,但是bind会创建一个新函数。当这个新函数bind()的第一个参数将作为它运行时的this,之后的一序列参数将会在传递的实参前传入作为它的参数。
柯里化什么的,我去看看呀,闭包函数的应用中,有一个重要的场景就是柯里化。
柯里化是指这样一个函数(假设叫createCurry),它接受函数A作为参数,运行后能返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。

文章转载:https://blog.youkuaiyun.com/zl13015214442/article/details/93886205?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=1332041.23976.16193406008363059&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

一、基础信息 数据集名称:Bottle Fin实例分割数据集 图片数量: 训练集:4418张图片 验证集:1104张图片 总计:5522张图片 分类类别: - 类别0: 数字0 - 类别1: 数字1 - 类别2: 数字2 - 类别3: 数字3 - 类别4: 数字4 - 类别5: 数字5 - 类别6: Bottle Fin 标注格式:YOLO格式,包含多边形坐标,适用于实例分割任务。 数据格式:图片格式常见如JPEG或PNG,具体未指定。 二、适用场景 实例分割AI模型开发:数据集支持实例分割任务,帮助构建能够精确识别分割图像中多个对象的AI模型,适用于对象检测分割应用。 工业自动化质量控制:可能应用于制造、物流或零售领域,用于自动化检测分类物体,提升生产效率。 计算机视觉研究:支持实例分割算法的学术研究,促进目标检测分割技术的创新。 教育实践培训:可用于高校或培训机构的计算机视觉课程,作为实例分割任务的实践资源,帮助学生理解多类别分割。 三、数据集优势 多类别设计:包含7个不同类别,涵盖数字Bottle Fin对象,增强模型对多样对象的识别分割能力。 高质量标注:标注采用YOLO格式的多边形坐标,确保分割边界的精确性,提升模型训练效果。 数据规模适中:拥有超过5500张图片,提供充足的样本用于模型训练验证,支持稳健的AI开发。 即插即用兼容性:标注格式直接兼容主流深度学习框架(如YOLO),便于快速集成到各种实例分割项目中。
### Function.prototype.call、Function.prototype.apply Function.prototype.bind区别 在 JavaScript 中,`call`、`apply` `bind` 是函数对象的原型方法,它们都用于控制函数执行时的 `this` 上下文。尽管它们的功能相似,但在使用方式行为上存在关键差异。 #### 1. Function.prototype.call `call` 方法允许调用一个函数,并指定其运行时的 `this` 值以及一系列参数列表。这些参数是以逗号分隔的形式传入的。 例如: ```javascript function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const person = { name: 'Alice' }; greet.call(person, 'Hello', '!'); // 输出 "Hello, Alice!" ``` 这里 `greet` 函数通过 `call` 被调用,`this` 指向了 `person` 对象,并且传递了 `'Hello'` `'!'` 作为参数[^4]。 #### 2. Function.prototype.apply `apply` 方法 `call` 类似,也用于调用函数并设置 `this` 值,但它的参数是一个数组(或类数组对象)。这意味着你可以将参数以数组形式传递给 `apply`。 例如: ```javascript function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const person = { name: 'Alice' }; const args = ['Hello', '!']; greet.apply(person, args); // 输出 "Hello, Alice!" ``` 在这个例子中,`args` 数组包含了所有要传递给 `greet` 函数的参数[^4]。 #### 3. Function.prototype.bind 不同于 `call` `apply`,`bind` 不会立即调用函数,而是创建一个新的函数实例,这个新函数的 `this` 值被永久绑定到提供的值,并且可以预设一些参数。 例如: ```javascript function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const person = { name: 'Alice' }; const boundGreet = greet.bind(person, 'Hello'); boundGreet('!'); // 输出 "Hello, Alice!" ``` 这里 `greet` 函数通过 `bind` 创建了一个新的函数 `boundGreet`,其中 `this` 被绑定到了 `person`,并且 `'Hello'` 被预设为第一个参数。 #### 总结 - **`call`**:调用函数并指定 `this`,参数以逗号分隔。 - **`apply`**:调用函数并指定 `this`,参数以数组形式提供。 - **`bind`**:返回一个新函数,该函数的 `this` 被绑定,并且可以预设参数。 每种方法都有其适用场景。当你需要立即调用函数并且知道参数时,可以选择 `call` 或 `apply`;而当你想要创建一个具有固定上下文的新函数时,则应选择 `bind`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值