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)
相关文章
|
2月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
206 4
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
3月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
37 0
|
28天前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
10 1
|
1月前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
16 1
|
1月前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
35 6
|
1月前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
176 4
|
2月前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
1月前
|
JavaScript 前端开发
js 中call()和apply()
js 中call()和apply()
28 1
|
2月前
|
JavaScript 前端开发
JavaScript用法
JavaScript用法
|
2月前
|
自然语言处理 JavaScript 前端开发
JS中this的应用场景,再了解下apply、call和bind!
该文章深入探讨了JavaScript中`this`关键字的多种应用场景,并详细解释了`apply`、`call`和`bind`这三个函数方法的使用技巧和差异。