js中的bind,call,apply方法的区别以及用法

简介: JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。

在javascript语言中改变this指向的方法有三种分别是bind,call,apply,那么它们的共同点,不同点以及各自的用法都是什么呢?

目录

bind,call,apply的共同点

bind,call,apply的不同点

总结

bind,call,apply的共同点

都能改变this的指向。
都能够进行传参。

bind,call,apply的不同点

bind会返回一个新的函数,新函数的this指向以及参数都是跟bind对应。

function printName(a){
console.log(this.name + 'a')
}

var obj = {
name:'aa'
}

var newFunction = prinfName.bind(obj,'a')

newFunction () // 输出'aaa'

2.call的功能基本与bind一致,但call会在执行后立即调用改变了this指向的函数。

function printName(a){
console.log(this.name + 'a')
}

var obj = {
name:'aa'
}

// 此时newFunction 将不是一个函数,而是prinfName.bind(obj,a)函数执行后的返回值
// 因为printName函数没有返回任何东西所以newFunction等于undefined
var newFunction = prinfName.bind(obj,'a') // 输出'aaa'

3.apply跟call一致也会在执行后调用改变this指向的方法,但apply的传参是一个数组

function printName(a){
console.log(this.name + 'a')
}

var obj = {
name:'aa'
}

// 此时newFunction 将不是一个函数,而是prinfName.apply(obj,['a'])函数执行后的返回值
// 因为printName函数没有返回任何东西所以newFunction等于undefined
var newFunction = prinfName.apply(obj,['a']) // 输出'aaa'

总结

    这三个方法的功能都是可以改变this指向,区别是bind改变this指向后不会立即执行那个函数,call和apply则会立即执行,而apply的传参是用数组,以上就是bind,call,apply的区别和用法。

目录
相关文章
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
398 1
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
210 1
|
JavaScript 前端开发
JavaScript深入之bind的模拟实现
JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性
309 0
JavaScript深入之bind的模拟实现
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
392 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
304 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
190 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
538 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
357 4
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
562 4

热门文章

最新文章

下一篇
开通oss服务