前端学习笔记之js中apply()和call()方法详解

moven_j 发布于2019-08-20 16:20 / 1200人阅读

摘要：第二行将函数的指向一个字符串第三行将函数的指向一个数字以此类推。再举一个例子实现对象继承继承了的属性和方法陈安东男姓名年龄性别输出姓名陈安东年龄性别男这样用就实现了继承用也类似

这里排版不是太好，详情看我的简书

经过网上的大量搜索，渐渐明白了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：这个是一个参数列表

相同点与不同点

相同点

作用是一样的，call 和 apply 都是为了改变函数体内部 this 的指向，也就是把Function(即this)绑定到obj，这时候obj具备了Function的属性和方法，说白一点就是obj继承了Function的属性和方法。

不同点

相信大家也已经发现了，他们唯一区别就是接受参数的方式不太一样，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+"
"+"年龄:"+student.age+"
"+"性别:"+student.gender);

输出

姓名:陈安东
年龄:20
性别:男

这样用call就实现了继承（用apply也类似）

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

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

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

javasscript - 收藏集 - 掘金

摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

Rango 2019-08-20 17:15 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

snowLu 2019-08-29 14:05 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 评论0 收藏0