call()和apply()

zorro 发布于2019-08-20 10:29 / 1826人阅读

摘要：一语法定义在函数运行时指定的是值。在非严格模式下，为和的值会指向全局对象浏览器中就是对象，同时值为原始值数字，字符串，布尔值的会指向该原始值的自动包装对象一个数组或者类数组对象可为和方法描述与类似，只是传入参数的方式不同。

一. call() 语法定义

fun.call(thisArg[, arg1[, arg2[, ...]]])

thisArg
在fun函数运行时指定的是this值。在非严格模式下，thisArg为null和undefined的this值会指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象

arg1,arg2,……
指定的对象的参数列表

方法描述

在运行的函数中调用另一个Object的this

通过 call 方法，你可以在一个对象上继承另一个对象上的方法

应用 1.使用call连接对象的构造器（实现继承）

继承某个对象的方法，对于一些公用的方法可以采取这样的方式Object.apply(this,arguments)，没必要重复声明相同的方法。

function People(name, age) {
  this.name = name;
  this.age= age;
  this.sayName=function(){
    console.log("my Name is "+name);
   }
}

function one(name, age) {
   People.call(this, name, age);
}

function two(name, age) {
   People.call(this, name, age);
}

var one= new one("Jim", 25);
var two= new two("Tom", 40);
one.sayName(); //my Name is Jim
two.sayName(); //my Name is Tom

2.使用call引用一个函数且指定上下文环境

function showContent(){
    var content="这篇文章的标题是"+this.title+" 作者是"+this.author;
    console.log(content);
}
var article={
title:"hello world",
author:"coder"
}
showContent.call(article) //这篇文章的标题是hello world 作者是coder

二. apply() 语法定义

fun.apply(thisArg, [argsArray])

arg1,arg2,……
一个数组或者类数组对象,可为null和undefined

方法描述

与call()类似，只是传入参数的方式不同。

实际应用 1. 求出数组的中的最大值

function getMax(arr){
    return Math.max.apply(null,arr)
}

2. 实现继承

与call() 类似

3.确保this指向

可以看一下hoverdelay.js的源码(这段代码是解决hover事件重复触发的bug)，setTimeout会改变this的指向(具体可以看一下这篇文章)，可用that=this，保存之前的this指向，再用apply或者call重定向为原来的this环境。

(function($){
    $.fn.hoverDelay = function(options){
        var defaults = {
            hoverDuring: 200,
            outDuring: 200,
            hoverEvent: function(){
                $.noop();
            },
            outEvent: function(){
                $.noop();    
            }
        };
        var sets = $.extend(defaults,options || {});
        var hoverTimer, outTimer, that = this;
        return $(this).each(function(){
            $(this).hover(function(){
                clearTimeout(outTimer);
                //使用apply()
                hoverTimer = setTimeout(function(){sets.hoverEvent.apply(that)}, sets.hoverDuring);
            },function(){
                clearTimeout(hoverTimer);
                outTimer = setTimeout(function(){sets.outEvent.apply(that)}, sets.outDuring);
            });    
        });
    }      
})(jQuery);

4. Array.prototype.shift.call(arguments)

Array.prototype.shift.call(arguments)，arguments是一个类数组对象，虽然有下标，但不是真正的数组，没有shift方法，这时可以通过call或者apply方法调用Array.prototype中的shift方法。

三.区别

MDN原文：

While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

call()和apply()的用法几乎相同，不同之处在于call()接受的是一个参数列表，而apply()接受的是一个数组参数。(方便记忆的小技巧：A_pply for array and C_all for comma.)

function showContent(title,author){
    var content="这篇文章的标题是"+title+" 作者是"+author;
    console.log(content);
}
showContent.apply(undefined, ["hello", "Jim"]); //这篇文章的标题是hello 作者是Jim
showContent.call(undefined, "world", "Join"); //这篇文章的标题是world 作者是Join

四.参考资料

Function.prototype.call()

Function.prototype.apply()

What is the difference between call and apply?

GPU云服务器云服务器 js中的call和apply JS中bind、call和apply的作 apply与call的区别 apply()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80171.html

apply 与 call 详细深入理解

apply 与 call 介绍 function f1(x, y) { console.log(结果是： + (x + y) + this); } f1(10, 20); //函数的调用 // 结果是：30[object Window] // 此时的 f1 实际上是当作对象来使用的，对象可以调用方法 f1.apply(); // 结果是：NaN[object Window] f1.ca...

Hegel_Gu 2019-08-23 17:12 评论0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：输出的作用与和一样，都是可以改变函数运行时上下文，区别是和在调用函数之后会立即执行，而方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。这几个方法...

chaosx110 2019-08-26 12:23 评论0 收藏0
前端基础:call,apply,bind的的理解

摘要：和区别其实他们的作用是一样的，只是传递的参数不一样而已。接受个参数，第一个参数指定了函数体内对象的指向，第二个参数为数组或者一个类数组。看个栗子一个有意思的事在中，多次是无效的。而则会立即执行函数。背景前两天在做小程序的需求的时候用到bind的时候才想起自己对这三的东西的了解比较浅薄，这个时候用的时候就有点怕。时候还是要好好学习下，理解下怎么玩。正文先说call 和 apply...

netmou 2019-08-20 17:01 评论0 收藏0
call和apply的区别和用法

摘要：和的区别和作用都是把绑定到的作用，即改变的指向，然而唯一的区别就是传递的参数必须得是数组的形式传递，而则直接连续参数传递和在什么地方可以用到呢当一个对象需要调用另外一个对象里面的方法的时候就可以用到和，和可以理解成是继承另外一个对象的方法， call和apply的区别 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1...

ideaa 2019-08-21 17:44 评论0 收藏0
call和apply的区别和用法

摘要：和的区别和作用都是把绑定到的作用，即改变的指向，然而唯一的区别就是传递的参数必须得是数组的形式传递，而则直接连续参数传递和在什么地方可以用到呢当一个对象需要调用另外一个对象里面的方法的时候就可以用到和，和可以理解成是继承另外一个对象的方法， call和apply的区别 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1...

animabear 2019-08-01 18:02 评论0 收藏0