call()与apply()的作用与区别

简介: call()与apply()的作用与区别

概念

每个函数都包含两个非继承而来的方法:apply()和call()。 call与apply都属于Function.prototype的一个方法,所以每个function实例都有call、apply属性;

作用

call()方法和apply()方法的作用相同:改变this指向

区别

他们的区别在于接收参数的方式不同: call():第一个参数是this值没有变化,变化的是其余参数都直接传递给函数。在使用call()方法时,传递给函数的参数必须逐个列举出来。 apply():传递给函数的是参数数组

应用

  var name = "Evan";
  var age = 20;
 
  var person = {
    name: "Hillary",
    age: 19,
    sayIntroduce: function () {
      return (
        "Hello, My name is " + this.name +" and I'm " +this.age +" years old."
      );
    },
    sayHobby: function (val1, val2) {
        return "I'm " + this.name + ", I like " + val1 + " and " + val2 + ".";
    }
  };
 
  
  var person1 = {
    name: "Coy",
  };
 
  
  console.log(person.sayIntroduce()); 
  // Hello, My name is Hillary and I'm 19 years old.
  
  // 当我们通过 call 和 apply 来this的指向时,不传任何参数,则默认为将this指向修改为 windows
  console.log(person.sayIntroduce.call()); 
  // Hello, My name is Evan and I'm 20 years old.
  console.log(person.sayIntroduce.apply()); 
  // Hello, My name is Evan and I'm 20 years old.
  
  // 有参数时,this 指向第一个参数:将this指向 person1,由于person1中没有age属性,因此为 undefined
  console.log(person.sayIntroduce.call(person1)); 
  // Hello, My name is Coy and I'm undefined years old.
  console.log(person.sayIntroduce.apply(person1)); 
  // Hello, My name is Coy and I'm undefined years old.
  
  // 当需要传递参数时,call可以直接写多个参数,apply需要用数组方式传递:
  console.log(person.sayHobby.call(person1, 'swimming', 'hiking')); 
  // I'm Coy, I like swimming and hiking. 
  console.log(person.sayHobby.apply(person1, ['swimming', 'hiking'])); 
  // I'm Coy, I like swimming and hiking. 


目录
相关文章
|
7月前
|
Python
apply函数的用法
apply是pandas处理数据经常用到的函数。我们可以用DataFrame的apply函数实现对多列、多行的操作。可通过axis设置参数,设为1是对列进行操作,参数axis设为0是对行操作。apply经常跟lambda一起使用,非常方便,大大提高了效率。
|
4天前
|
JavaScript 前端开发
call函数和apply函数的区别
call函数和apply函数的区别
24 0
|
9月前
|
JavaScript 前端开发
call和apply与this的关系
call和apply与this的关系
30 0
|
9月前
bind、call、apply 区别
bind、call、apply 区别
54 0
|
11月前
|
JavaScript 前端开发
关于 this 指向、如何实现 new call apply bind 我所知道的
关于 this 指向、如何实现 new call apply bind 我所知道的
60 0
|
12月前
|
JavaScript 算法
js中函数内部属性arguments和this以及方法apply()和call()
js中函数内部属性arguments和this以及方法apply()和call()
|
前端开发
前端小案例1-call和apply的重写1 原
前端小案例1-call和apply的重写1 原
57 0
前端小案例1-call和apply的重写1 原