返回顶部
首页 > 资讯 > 精选 >JavaScript的call与apply怎么定义使用
  • 746
分享到

JavaScript的call与apply怎么定义使用

2023-06-30 02:06:38 746人浏览 八月长安
摘要

这篇文章主要介绍“javascript的call与apply怎么定义使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript的call与apply怎么定义使用”文章能帮助大家解决问题。

这篇文章主要介绍“javascript的call与apply怎么定义使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript的call与apply怎么定义使用”文章能帮助大家解决问题。

    定义

    call和apply:函数调动call()方法在执行的时候,函数的里面的this会指向第一个参数值,除第一个参数值后面的若干支都是传进该函数,简而言之就是改变函数运行时的this指向。

    使用示例: fn.call(obj, args1, args2...), fn.apply(obj, [arg1, arg2 ...]), call与apply调用除了第二个传参方式不一样,其余一样。

    举个例子1:

    var  obj = {    name: '程序员米粉'};function fn() {    console.log(this.name)}fn() // this.name => undefinedfn.call(obj) // this.name => '程序员米粉'

    总结

    fn函数调动call方法执行时候,函数的this指向了obj
    2、call方法和fn函数都执行了。

    如果还看不明白,fn.call(obj)执行的时候,可以看作在obj对象里面有个fn函数执行。那么fn函数里面的this指向就是obj

    再举个例子2:

    var  obj = {    name: '程序员米粉',    fn: function() {        console.log(this.name)    }};obj.fn(); // this.name => '程序员米粉'

    总结:

    例子1中的 fn.call(obj)执行的时候,相当于例子2 obj.fn(); call方法被调用的时候,会改变当前调用函数的执行上下文(就是改变this指向)。

    模拟步骤1

    例子1:

    var  obj = {    name: '程序员米粉'};function fn() {    console.log(this.name)}fn.call(obj) // this.name => '程序员米粉'

    例子2:

    var  obj = {    name: '程序员米粉',    fn: function() {        console.log(this.name)    }};obj.fn(); // this.name => '程序员米粉'

    要实现自己的myCall方法,首先观察例子1和例子2中测 obj对象,有什么不一样。

    不一样:

    例子2中obj添加了fn函数方法。
    2、例子2执行方法是obj.fn()执行,而例子1中执行方法是 fn.call(obj)。

    这就好办了,我们如何把例子1改造成例子2呢?

    我们总结一下步骤:

    把fn函数设置为对象的一个属性
    2、调用fn函数执行。
    3、调用完毕之后,从对象中删除fn属性(函数)。 (给对象增加了属性,我们调用完就可以删掉)

    思路有了,那代码我们可以写成这样:

    ```jsobj.fn = fn;obj.fn();delete obj.fn; // 删除属性```

    根据上述思路,那按照这个思路,写一个我们自己的myCall方法:

    ```jsFunction.prototype.myCall = function(context) {    context.fn = this;    context.fn();    delete context.fn;};var  obj = {    name: '程序员米粉'};function fn() {    console.log(this.name);}fn.myCall(obj) // this.name => '程序员米粉' ````

    执行一下myCall方法,可以得出来,this指向obj对象,并打印了期望的值,所以这个方法第一步完成了!

    模拟步骤2

    继续完善一下myCall方法,把fn方法改一下,增加2个参数, 再执行一下方法。

    function fn(index, value) {console.log(this.name);    console.log(index, value);}fn.myCall(obj, 111, '我是一个值');// this.name => '程序员米粉'// undefined, undefined

    执行一个fn函数,只打印一个值出来,传进入的参数,没有打印出来。那需要改造一下方法,使参数也能打印出来。我们可以从arguments对象中取值,arguments对像代表函数传进来的对象,打印看看就知道了。

    Function.prototype.myCall = function(context) {    console.log(arguments);context.fn = this;context.fn();delete context.fn;};

    打印出来的 arguments对象:

    JavaScript的call与apply怎么定义使用

    我们可以看到 arguments 对象结构是:

    {     '0': { name: '程序员米粉' },     '1': 111,     '2': '我是一个值' }

    0代表传进来的第1个参数,1代表第2个参数,以此类推。我们看到arguments是一个类数组,那就可以用数组方法,存储起来, 由于我们只是获取参数,所以从1开始取值。

    var args = [];for (var i = 1; i < arguments.length; i++) {    args.push('arguments[' + i + ']');}// args为 ["arguments[1]", "arguments[2]", "arguments[3]"]

    取值的参数的问题解决了,我们下一步解决一下,如何把这些参数传给函数执行。

    // 思考一下,怎样才能这样传参给fn函数执行context.fn(arguments[1], arguments[2]);

    可能有人想到如下方法:

    // 把数组里的元素通过join方法,传进函数的形参里context.fn(args.join(','))// 这样的话,其实 context.fn(args.join(','))执行变成:context.fn("arguments[1]", "arguments[2]");// 变成了一个字符串,变成了一个死值了,无论传什么,都变成字符串 "arguments[1]", "arguments[2]" 。。。。

    可以有人又想到用es6方法来解决。这个call是ES3的方法,所以还是不用ES6方法解决。

    其实我们可以用 eval方法来解决。查文档得知 eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。这到底是什么意思?

    eval() 的参数是一个字符串。如果字符串表示的是表达式,eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句,那么eval() 就会执行这些语句。

    举个例子:

    console.log(eval('2 + 2')); // 2 + 2 => 4, 最后输出是2console.log(eval('context.fn(' + args +')')) // 相当于运行 context.fn(arguments[1], arguments[2], ...),使用eval执行一串 JavaScript 语句。
    • eval更详细链接;

    args 会自动调用 Array.toString() 这个方法。通过eval自动执行变成context.fn(arguments[1], arguments[2])这样执行。

    代码如下:

    var  obj = {name: '程序员米粉'};function fn(index, value) {console.log(this.name); // 程序员米粉console.log(index, value); // 111 我是一个值}Function.prototype.myCall = function(context) {context.fn = this;var args = [];for (var i = 1; i < arguments.length; i++) {args.push('arguments[' + i + ']');}eval('context.fn(' + args + ')');delete context.fn;};fn.myCall(obj, 111, '我是一个值'); // this.name => '程序员米粉'

    执行一下方法,输入完全符合我们的预期,我们终于搞定了!

    模拟步骤3

    第一个参数传null或undefined,this指向为window

    举个例子:

    var name = '程序员米粉'function fn() {console.log(this.name); // 程序员米粉}fn.call(null); // this.name => '程序员米粉'

    fn执行的时候,还是输出 this.name = '程序员米粉',说明了什么,只要第一个参数传 null或者undefined,那函数调用call方法,this指向window

    函数执行call方法,有返回值,那就返回。

    举个例子:

    var name = '程序员米粉'function fn() {console.log(this.name); // 程序员米粉    return {        name: this.name    }}fn.call(null); // this.name => '程序员米粉'// 执行fn函数直接返回对象// {//    name: '程序员米粉'// }

    最终版实现call代码

    var obj = {name: '程序员米粉'};function fn(index, value) {console.log(this.name); // 程序员米粉console.log(index, value); // 111 我是一个值return {name: this.name,index: index,value: value};}Function.prototype.myCall = function(context) {var context = context || window;context.fn = this;var args = [];for (var i = 1; i < arguments.length; i++) {args.push('arguments[' + i + ']');}var result = eval('context.fn(' + args + ')');delete context.fn;return result;};fn.myCall(obj, 111, '我是一个值'); // this.name => '程序员米粉'// 最终输出// {//     name: "程序员米粉"//     index: 111//     value: "我是一个值"// }

    实现apply代码

    由于apply与call实现原理基本一样,那就不详细叙述了,直接上代码:

    Function.prototype.myApply = function(context, arr) {var context = context || window;context.fn = this;var result;if (!arr) {result = context.fn();} else {var args = [];for (var i = 0; i < arr.length; i++) {args.push('arr[' + i + ']');}result = eval('context.fn(' + args + ')');}delete context.fn;return result;};

    关于“JavaScript的call与apply怎么定义使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网精选频道,小编每天都会为大家更新不同的知识点。

    --结束END--

    本文标题: JavaScript的call与apply怎么定义使用

    本文链接: https://www.lsjlt.com/news/327204.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    猜你喜欢
    • JavaScript的call与apply怎么定义使用
      这篇文章主要介绍“JavaScript的call与apply怎么定义使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript的call与apply怎么定义使用”文章能帮助大家解决问题。...
      99+
      2023-06-30
    • Javascript 的caller,callee,call,apply怎么使用
      本篇内容主要讲解“Javascript 的caller,callee,call,apply怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Javascript 的caller,callee...
      99+
      2023-06-03
    • 怎么使用Javascript中apply、call、bind
      本篇内容介绍了“怎么使用Javascript中apply、call、bind”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读...
      99+
      2024-04-02
    • JavaScript中bind、call、apply方法怎么使用
      这篇文章主要讲解了“JavaScript中bind、call、apply方法怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中bind、call、apply方法怎么...
      99+
      2023-06-30
    • JavaScript中call,apply,bind的区别与实现
      目录区别call实现apply实现bind实现bind 返回的函数 作为普通函数调用 代码实现bind 返回的函数 作为构造函数调用bind代码最终实现区别 call、apply、b...
      99+
      2024-04-02
    • 一文了解JavaScript中call/apply/bind的使用
      目录前言1. call1.1 语法1.2 流程图1.3 代码实现2. apply2.1 语法2.2 流程图2.3 代码实现3. bind3.1 语法3.2 流程图3.3 代码实现4....
      99+
      2024-04-02
    • Javascript实现call,bind,apply的代码怎么写
      这篇文章主要介绍了Javascript实现call,bind,apply的代码怎么写的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Javascript实现call,bind,apply的代码怎么写文章都会有所收...
      99+
      2023-06-29
    • javascript怎么实现call、apply和bind方法
      本篇内容介绍了“javascript怎么实现call、apply和bind方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅...
      99+
      2024-04-02
    • 怎么使用javascript apply
      本篇内容主要讲解“怎么使用javascript apply”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用javascript apply”吧! ...
      99+
      2024-04-02
    • 再谈JavaScript中bind、call、apply三个方法的区别与使用方式
      call的基本使用 var ary = [12, 23, 34]; ary.slice(); 以上两行简单的代码的执行过程为:ary这个实例通过原型链的查找机制找到Array.pro...
      99+
      2024-04-02
    • JS中call()、apply()和bind()函数怎么使用
      今天小编给大家分享一下JS中call()、apply()和bind()函数怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
      99+
      2023-07-04
    • JavaScript的constructor怎么定义使用
      本篇内容介绍了“JavaScript的constructor怎么定义使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!定义和用法constr...
      99+
      2023-07-04
    • JavaScript的call()方法怎么用
      这篇文章主要讲解了“JavaScript的call()方法怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript的call()方法怎么用”...
      99+
      2024-04-02
    • JS中call(),apply(),bind()函数的区别与用法详解
      call() 介绍 通过提供一个新的this值给当前调用的函数/方法,从而改变this指向。 语法 fn.call(this.Arg, arg1, arg2,...) thisAr...
      99+
      2022-12-10
      JS中call() apply() bind()函数的区别与使用方法 call() apply() bind()的区别 JS中call()使用方法 JS中apply()使用方法 JS中bind()使用
    • JavaScript函数怎么定义和使用
      本文小编为大家详细介绍“JavaScript函数怎么定义和使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript函数怎么定义和使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.用函数语句定义...
      99+
      2023-07-02
    • c++类怎么定义与使用
      在C++中,可以使用class关键字来定义一个类。类定义包括类的成员变量和成员函数。以下是一个简单的C++类的定义和使用的示例:``...
      99+
      2023-09-26
      c++
    • JavaScript函数的定义与基本使用方法
      本篇内容介绍了“JavaScript函数的定义与基本使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
      99+
      2024-04-02
    • Python枚举怎么定义与使用
      这篇文章主要介绍了Python枚举怎么定义与使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Python枚举怎么定义与使用文章都会有所收获,下面我们一起来看看吧。1. 枚举的定义首先,定义枚举要导入enum模...
      99+
      2023-07-06
    • sqlserver游标怎么定义与使用
      在 SQL Server 中,游标用于逐行处理结果集。游标的定义和使用如下: 定义游标: DECLARE cursor_name...
      99+
      2024-04-09
      sqlserver
    • Mysql触发器怎么定义与使用
      这篇“Mysql触发器怎么定义与使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Mysql触发器怎么定义与使用”文章吧。一...
      99+
      2023-07-04
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作