js apply()用法详解

简介: js apply()用法详解

目录

apply作用

改变this指向

将数组入参变为一般入参

把arguments改为真正的数组


apply作用


作用有两个,跟它的入参有关。

  1. 改变this指向。
  2. 将数组入参变为一般入参。

改变this指向


这是网上一个常见的例子:

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

如何理解?可以这么理解,person有个方法fullName调用this.firstName和this.lastName这两个变量,this指向person这个对象,但它是没有这两个变量的。


apply可以改变调用apply方法的函数(这里指的就是person.fullName这个函数)的this指向,现在person.fullName.apply(person1)就让this指向person1了,fullName方法就可以访问到这两个值,就成功输出。


这样不好记怎么办?


可以这么记,当apply调用时,调用apply的函数是谁?(person.fullName),把这个函数分享给person1,让person1去调用。


image.png

如果是这样你就能理解了吧,这个就跟上文的代码一个意思,以后你碰到apply修改代码指向就这么理解代码就行。(可以这么理解,不要这么写哈,本质不一样)

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person1.fullName = person.fullName
person1.fullName();  // 将返回 "Bill Gates"

将数组入参变为一般入参



这里说一点,就是这个作用就是apply和call的最大区别了。


就是apply的第二个参数接受的是数组,call不是。


接收数组有什么用?


比如当一个函数入参是非数组,而你目前拥有的是数组,你不想处理数组再进行入参的输入,你就可以使用apply。


文字看的麻烦就直接看例子:

Math.max(1,2,3)//3
Math.max([1,2,3])//报错
Math.max.apply(null,[1,2,3])//3

需要注意的是这里的第一个值为null时,


在 “JavaScript 严格模式”下则它将成为被调用函数的所有者(对象)也就是没改变指向,在“非严格”模式下,它成为全局对象。


因为我们只是测试第二个入参作用,因此,第一个入参null就用来占位,就算改变了指向我们也没有用到它。


以下的例子可以加深一下你对apply和call区别的理解。


apply:

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

call:

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");

把arguments改为真正的数组


可以用来把arguments改为数组

arguments作为函数自带的某个属性,可以用来访问函数的入参,它长得是数组的样子却没有数组的方法,例如concat()什么的都没有


因此我们可以用Array原型上的slice方法将arguments变成一个真正的数组。

(function fun(){
    console.log(arguments.concat([3]))//报错
  const arr = Array.prototype.slice.apply(arguments);
  console.log(arr.concat([3]))//[1,2,3]
})(1,2)

修改过程也很好理解,arguments没有slice方法,我们可以通过apply,等于把Array的slice给arguments用了

等于调用了( 可以这么理解但是不要这么写哈):

(function fun(){
    console.log(arguments.concat([3]))//报错
    //const arr = Array.prototype.slice.apply(arguments);
  arguments.slice = Array.prototype.slice
    const arr = arguments.slice()
  console.log(arr.concat([3]))//[1,2,3]
})(1,2)
相关文章
|
9月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
570 56
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
223 1
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
260 1
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
145 1
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
431 6
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
1057 4
|
JavaScript 前端开发
js 中call()和apply()
js 中call()和apply()
102 1
|
JavaScript 前端开发
JavaScript用法
JavaScript用法
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
1077 0