首页 web前端 js教程 从JQuery源码分析JavaScript函数的apply方法与call方法_javascript技巧

从JQuery源码分析JavaScript函数的apply方法与call方法_javascript技巧

May 16, 2016 pm 04:35 PM
javascript函数

最近在使用jQuery的$.each方法时很,突然想到$.each($(‘div'),function(index,entity){});中的这个index和entity是哪冒出来的,而且可有可无的,而且这么高大上的能告诉我们当前遍历的下标和实例。所以看了一下jQuery源代码,是这么写的:

调试的时候走的是标红的这段代码,然后用到了callback.call这个函数,于是翻看了一下《js高级程序设计》,其中有比较深的解释。

首先,function是一个指向Function对象,函数名是一个指向函数的指针。那么在函数体内,就会有一个作用域,即this关键字。

this关键字指的是函数运行的作用域,举个例子来说:

复制代码 代码如下:


上面这段代码中的函数funcA定义在全局环境中,那么函数体内的this即window对象。

下面该到call和apply的说明了。以call函数为例,call的第一个参数,就是改变函数的作用域,后面的参数为传入函数的所需的参数,必须与原函数的参数一直,举例说明:

复制代码 代码如下:


我们定义funcB函数的中,调用了funcA的call函数,这个时候我们改变了funcA中this的指向,原本指向window的,现在指向了call的第一个参数testO这个对象。而且调用call时,因为funcA函数有两个参数,所以如果要想funcA传递参数,必须一一指出参数,即后面的两个参数a和b,或者可以只穿第一个参数

即:funcA.call(testO);或者只传a,即:funcA.call(testO,a);

而apply与call的区别仅在于,apply的第二个参数可以是数组形式,而且不必一一指出参数,funcA.apply(testO,[a,b])

介绍完call与apply的基本用法,该说说他哥俩真正的用武之地了,扩充函数赖以运行的作用域。

复制代码 代码如下:


上面这段代码演示了call的作用。第一个函数调用,this指向了window,所以弹出了window的color属性。

第二个函数可能有些朋友以为也会弹出透明,但是请先确定我们的函数运行在$(function(){});中,这个jQuery的函数,了解jQuery的朋友都很清楚,在

$(function(){});中this的作用域指向的是document,然后我们调用testFunc,要弹出document的color,当然是未定义的。

第三个函数将testFunc的this指向了document的亲爹window,弹出window的color当然也是没有问题的。

第四个函数就更加直白了,把window传进去了

第五个函数,将testFunc的this指向了testObj,弹出了红色。

讲到这里,用法大家应该都有所了解了,但是具体怎么去理解怎么去使用还是看自己的套路。

我是这么理解的,可以把这种用法看成是C#或者java中的泛型方法。比如一个C#方法的定义

复制代码 代码如下:

public void Test(T a, T b) { }

这样我们就可以实现对方法的扩展,实现通用的目的。

以上都是本人自己的看法和观点,有什么不对之处还请大家指出来共同学习。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1670
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1274
29
C# 教程
1256
24
JavaScript函数异步编程:处理复杂任务的必备技巧 JavaScript函数异步编程:处理复杂任务的必备技巧 Nov 18, 2023 am 10:06 AM

JavaScript函数异步编程:处理复杂任务的必备技巧引言:在现代前端开发中,处理复杂任务已经成为了必不可少的一部分。而JavaScript函数异步编程技巧则是解决这些复杂任务的关键。本文将介绍JavaScript函数异步编程的基本概念和常用的实践方法,并提供具体的代码示例,帮助读者更好地理解和使用这些技巧。一、异步编程的基本概念在传统的同步编程中,代码按

使用JavaScript函数实现网页导航和路由 使用JavaScript函数实现网页导航和路由 Nov 04, 2023 am 09:46 AM

在现代Web应用程序中,实现网页导航和路由是十分重要的一环。利用JavaScript的函数来实现这个功能,可以使我们的Web应用程序更加灵活、可扩展和用户友好。本文将介绍如何使用JavaScript函数来实现网页导航和路由,并提供具体的代码示例。实现网页导航对于一个Web应用程序而言,网页导航是用户操作最频繁的一个部分。当用户点击页面上的

使用JavaScript函数实现数据可视化的实时更新 使用JavaScript函数实现数据可视化的实时更新 Nov 04, 2023 pm 03:30 PM

使用JavaScript函数实现数据可视化的实时更新随着数据科学和人工智能的发展,数据可视化已经成为了一种重要的数据分析和展示工具。通过可视化数据,我们可以更直观地理解数据之间的关系和趋势。在Web开发中,JavaScript是一种常用的脚本语言,具备强大的数据处理和动态交互功能。本文将介绍如何使用JavaScript函数实现数据可视化的实时更新,并展示具体

使用JavaScript函数实现图片轮播和幻灯片效果 使用JavaScript函数实现图片轮播和幻灯片效果 Nov 04, 2023 am 08:59 AM

JavaScript是一种脚本语言,可以用来为网页添加交互效果。其中,图片轮播和幻灯片效果是常见的网页动画效果,本文将介绍如何使用JavaScript函数实现这两种效果,并提供具体代码示例。图片轮播图片轮播是一种将多张图片按照一定的方式轮流播放的效果。在实现图片轮播时,需要用到JavaScript的定时器和CSS样式控制。(1)准备工作首先,在HTML文件中

使用JavaScript函数实现用户登录和权限验证 使用JavaScript函数实现用户登录和权限验证 Nov 04, 2023 am 10:10 AM

使用JavaScript函数实现用户登录和权限验证随着互联网的发展,用户登录和权限验证成为了很多网站和应用程序的必备功能。为了保护用户的数据安全和访问权限,我们需要使用一些技术和方法来验证用户的身份,并限制其访问的权限。JavaScript作为一种广泛使用的脚本语言,在前端开发中扮演着重要的角色。我们可以利用JavaScript函数来实现用户登录和权限验证功

使用JavaScript函数实现文件上传和下载 使用JavaScript函数实现文件上传和下载 Nov 04, 2023 am 08:30 AM

使用JavaScript函数实现文件上传和下载随着互联网的发展和普及,文件上传和下载成为了网页应用中常见的功能之一。本文将介绍如何使用JavaScript函数来实现文件上传和下载的功能,并提供具体的代码示例。文件上传文件上传指的是将本地的文件通过网页上传到服务器。HTML5中提供了FileAPI用于处理文件的选择和上传。我们可以利用FileAPI中的Fi

使用JavaScript函数实现用户交互和动态效果 使用JavaScript函数实现用户交互和动态效果 Nov 03, 2023 pm 07:02 PM

使用JavaScript函数实现用户交互和动态效果随着现代网页设计的发展,用户交互和动态效果成为了吸引用户眼球的关键。JavaScript作为一种常用的脚本语言,拥有强大的功能和灵活的特性,能够实现各种各样的用户交互和动态效果。本文将介绍一些常见的JavaScript函数,并给出具体的代码示例。改变元素样式(style)通过JavaScript函数能够轻松改

使用JavaScript函数实现数据可视化的动态更新 使用JavaScript函数实现数据可视化的动态更新 Nov 03, 2023 pm 04:56 PM

使用JavaScript函数实现数据可视化的动态更新数据可视化是大数据时代中非常重要的一环,它能够以直观的方式展示数据,帮助人们更好地理解和分析数据。而JavaScript作为一种客户端的脚本语言,能够通过函数的方式来实现数据可视化的动态更新。本文将介绍如何使用JavaScript函数来实现这一功能,并提供具体的代码示例。一、数据可视化基础在开始编写代码之前

See all articles