前端进修笔记之js中apply()和call()要领详解

这里排版不是太好,概况看我的简书

经由网上的大批搜刮,逐渐邃晓了apply()和call要领的运用,为此写一篇文章纪录一下。

定义

  • apply()要领

Function.apply(obj,args)
obj:这个对象将替代Function类里this对象

args:这个是数组,它将作为参数传给Function(args–>arguments)

  • call()要领

Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj:这个对象将替代Function类里this对象

params:这个是一个参数列表

相同点与不同点

  1. 相同点

    作用是一样的,call 和 apply 都是为了转变函数体内部 this 的指向,也就是把Function(即this)绑定到obj,这时候obj具有了Function的属性和要领,说白一点就是obj继续了Function的属性和要领。
    
  2. 不同点

    置信人人也已发现了,他们唯一区分就是接收参数的体式格局不太一样,apply接收的是数组参数,call接收的是一连参数。
    

要领运用

我们来看下面一个例子:

定义一个函数mul

function mul(a,b){
    return this+(a*b);
}

接着我们在掌握台上打印出

console.log(mul.call(null,2,3));
console.log(mul.call('s',2,3));
console.log(mul.call(3,2,3));
console.log(mul.apply(null,[2,5]));
console.log(mul.apply(2,[2,5]));

分别为:

[object Window]6
s6
9
[object Window]10
12

能够你会发现到,第一行 console.log(mul.call(null,2,3)) 没什么变化,call()的第一个参数就是转变的 this 指向,假如为 null 则函数的 this 稳定,注重,假如在严厉形式下(函数体或全局的开首有这句话:’use strict’),this 会变成 null。假如函数自身有参数,则从 call 的第二个参数最先写起。
第二行 console.log(mul.call(‘s’,2,3)) 将函数的 this 指向一个字符串 ‘s’. ===>> ‘s’+2 * 3=s6
第三行 console.log(mul.call(3,2,3)) 将函数的this指向一个数字3

 ===>>   3+2 \* 3=9

以此类推。

再举一个例子

学js的都晓得 Math.max() 要领,比方有三个参数2,3,4那末我们要找出最大值能够这么写 Math.max(2,3,4) 那如果有 100 个或更多参数呢?这时候就能够连系 apply 和数组轻松完成了。

比方定义一个数组

var arr=[2,3,4,5,6,7,8,9,10,23,45,66,22,11];

接着我们打印出

console.log(Math.max.apply(null,arr));

如许一来就很简洁明了。

再举一个例子完成对象继续

function Person(name,age) {
    this.name=name;
    this.age=age;
}

var Student=function(name,age,gender) {
    Person.call(this,name,age);//this继续了person的属性和要领
    this.gender=gender;
}
var student=new Student("陈安东", 20, "男");
alert("姓名:"+student.name+"\n"+"岁数:"+student.age+"\n"+"性别:"+student.gender);

输出

姓名:陈安东
岁数:20
性别:男

如许用call就完成了继续(用apply也相似)

    原文作者:Moorez
    原文地址: https://segmentfault.com/a/1190000009319707
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞