JS call()及apply()方法使用实例汇总

2024-08-01 04:30:24

最近又遇到了JacvaScript中的call()方法和apply()方法，而在某些时候这两个方法还确实是十分重要的，那么就让我总结这两个方法的使用和区别吧。

每个函数都包含两个非继承而来的方法：call()方法和apply()方法。

相同点：这两个方法的作用是一样的。

都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。

call()方法使用示例：

  //例1
  <script>
    window.color = 'red';
    document.color = 'yellow';

    var s1 = {color: 'blue' };
    function changeColor(){
      console.log(this.color);
    }

    changeColor.call();     //red (默认传递参数)
    changeColor.call(window);  //red
    changeColor.call(document); //yellow
    changeColor.call(this);   //red
    changeColor.call(s1);    //blue

  </script>

  //例2
  var Pet = {
    words : '...',
    speak : function (say) {
      console.log(say + ''+ this.words)
    }
  }
  Pet.speak('Speak'); // 结果：Speak...

  var Dog = {
    words:'Wang'
  }

  //将this的指向改变成了Dog
  Pet.speak.call(Dog, 'Speak'); //结果： SpeakWang

apply()方法使用示例：

  //例1
  <script>
    window.number = 'one';
    document.number = 'two';

    var s1 = {number: 'three' };
    function changeColor(){
      console.log(this.number);
    }

    changeColor.apply();     //one (默认传参)
    changeColor.apply(window);  //one
    changeColor.apply(document); //two
    changeColor.apply(this);   //one
    changeColor.apply(s1);    //three

  </script>

  //例2
  function Pet(words){
    this.words = words;
    this.speak = function () {
      console.log( this.words)
    }
  }
  function Dog(words){
    //Pet.call(this, words); //结果： Wang
    Pet.apply(this, arguments); //结果： Wang
  }
  var dog = new Dog('Wang');
  dog.speak();

不同点：接收参数的方式不同。

apply()方法接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
语法：apply([thisObj [,argArray] ]);，调用一个对象的一个方法，2另一个对象替换当前对象。

说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个
TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。

call()方法第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。
语法：call([thisObject[,arg1 [,arg2 [,...,argn]]]]);，应用某一对象的一个方法，用另一个对象替换当前对象。

说明： call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于thisObj。

使用示例1：

  function add(c,d){
    return this.a + this.b + c + d;
  }

  var s = {a:1, b:2};
  console.log(add.call(s,3,4)); // 1+2+3+4 = 10
  console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14

使用示例2：

  <script>
    window.firstName = "Cynthia";
    window.lastName = "_xie";

    var myObject = {firstName:'my', lastName:'Object'};

    function getName(){
      console.log(this.firstName + this.lastName);
    }

    function getMessage(sex,age){
      console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
    }

    getName.call(window); // Cynthia_xie
    getName.call(myObject); // myObject

    getName.apply(window); // Cynthia_xie
    getName.apply(myObject);// myObject

    getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21
    getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21

    getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
    getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22

  </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

彻底搞懂JavaScript中的apply和call方法(必看)

call和apply都是为了改变某个函数运行的context上下文而存在的,即为了改变函数体内部this的指向.因为JavaScript的函数存在定义上下文和运行时上下文以及上下文是可以改变的概念. 回到目录定义 fun.apply(thisArg, [argsArray]) fun.call(thisArg, arg1,arg2, ...) 其中thisArg可以为null或undefined,此时表示全局对象,更详细见MDN:apply().call() 二者的作用完全一样,只是接受参数的方
js中apply与call简单用法详解

你可以直接看例子,也可以先读一下介绍: call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作. call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方
详解JS中的this、apply、call、bind(经典面试题)

这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个,在 ES6 中可能会极大避免 this 产生的错误,但是为了一些老代码的维护,最好还是了解一下 this 的指向和 call.apply.bind 三者的区别. this 的指向在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象.记住这句话
js中call()和apply()改变指针问题的讲解

1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法.(天生的) 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. 一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向. call有两个妙用: 1: 继承. 2: 修改函数运行时的this指针. 区别:call和apply的区别在于call的第二个参数可以是任意类型,而appl
JS中call()和apply()的功能及用法实例分析

本文实例讲述了JS中call()和apply()的功能及用法.分享给大家供大家参考,具体如下: 1.call()和apply()的作用首先引出问题:用call()和apply()的目的是什么? 来看个例子,在javascript OOP中,我们经常会这样定义: function cat(){ } cat.prototype={ food:"fish", say: function(){ alert("I love "+this.food); } } var bla
详解js中的apply与call的用法

前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向. call 和 apply二者的作用完全一样,只是接受参数的方式不太一样. 方法定义 apply Function.apply(obj,args)方法能接收两个参数: obj:这个对象将代替Function类里this对象 args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数. call call方法与apply方
js中apply()和call()的区别与用法实例分析

本文实例讲述了js中apply()和call()的区别与用法.分享给大家供大家参考,具体如下: 每个函数都包括两个非继承而来的方法:apply()和call().两者用途都是在特定的作用域中调用函数,等于重新设置了函数体内this对象的值. 两者区别仅在于接收参数方式不同,apply()第一个参数是调用apply的函数运行的作用域,的第二个参数可以是Array的实例(数组),也可以是arguments对象,call()第一个参数是this的值没有变化,而其余参数都直接传递给函数(也就是逐个列举出
JS中改变this指向的方法(call和apply、bind)

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);
JS call()及apply()方法使用实例汇总

最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. 一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向. call()方法使
JS中使用apply方法通过不同数量的参数调用函数的方法

apply()方法定义函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同. apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数的作用域示例: var color='red'; var o={color:'blue'}; function sayColor(){ console.log(this.color); } sayColor();//"red" sayColor.apply(o);//"blu
mysqldump命令导入导出数据库方法与实例汇总

mysqldump命令的用法 1.导出所有库系统命令行 mysqldump -uusername -ppassword --all-databases > all.sql 2.导入所有库 mysql命令行 mysql>source all.sql; 3.导出某些库系统命令行 mysqldump -uusername -ppassword --databases db1 db2 > db1db2.sql 4.导入某些库 mysql命令行 mysql>source db1db2.s
使用JS简单实现apply、call和bind方法的实例代码

目录 1.方法介绍 2.apply.call和bind方法的实现 2.1.apply的实现 2.2.call的实现 2.3.bind的实现总结 1.方法介绍 apply.call和bind都是系统提供给我们的内置方法,每个函数都可以使用这三种方法,是因为apply.call和bind都实现在了Function的原型上(Function.prototype),而他们的作用都是给我们函数调用时显式绑定上this.下面先介绍一下它们的基本用法: apply方法:调用一个具有给定this值的函数,以及
JS瀑布流实现方法实例分析

本文实例分析了JS瀑布流实现方法.分享给大家供大家参考,具体如下: 描述: 1.每个图片宽度都一样,高度不一样思路: 1.算出一共有几列(通过视窗总宽度/单个图片宽度得出) 2.根据一共几列*单个图片宽度,设置外围总宽度并水平居中(注:这个宽度应该是计算出来的,而不是定死,因为窗口大小会改变) 3.将第一行图片高度按顺序填充进数组 4.算出第一行图片里高度最短的那个,将第二行的第一张图片添加到其后(绝对定位),添加完第二行第一张,更新他的高度,然后重新计算最短,再开始之前的过程 5.鼠标在滑动
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】

本文实例讲述了JS获取日期的方法.分享给大家供大家参考,具体如下: 原理很简单,一天的时间的毫秒数是1000*60*60*24, 前n天的日期就是现在日期换成毫秒-n*1000*60*60*24. 再把这个值换成日期即可(通过setTime方法) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l
js继承call()和apply()方法总结

1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,argArray]])
实例分析javascript中的call()和apply()方法

1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,argArray]])
JS实现点击生成UUID的方法完整实例【基于jQuery】

本文实例讲述了JS实现点击生成UUID的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 用JS生成UUID的方法实例</title> <script src="http://libs.baidu.com/jquery/2.0
JavaScript中call和apply方法的区别实例分析

本文实例分析了JavaScript中call和apply方法的区别.分享给大家供大家参考,具体如下: 这两个方法不经常用,但是在某些特殊场合中是非常有用的,下面主要说下它们的区别: 1.首先,JavaScript是一门面向对象的语言,也就是说它有this的概念.而且JavaScript是一门动态类型语言,为什么说它是动态类型语言呢?因为JavaScript在编译时没有类型检查的过程,不会去检查创建的对象类型,也不会去检查传递的参数类型,所以它的变量类型在运行期间是可以改变的. 2.要知道call

JS call()及apply()方法使用实例汇总

相关推荐

随机推荐