基本作用:改变对象的执行上下文。

this指向执行上下文。(执行环境)

this指向的永远是调用该方法的对象

function func(){
this.a=1;
console.log(this.a);
}

代码中方法执行后控制台输出1,由于func是全局对象window下的一个方法,那么调用该方法的对象就应该是全局对象window,所以this理论上指向的对象就应该是window

如果理论成立,而this.a==1,也就是说变量a是一个全局变量。在控制台上直接输入awindow.a后回车,会发现输出了1,所以在func这个方法中,this的指向就是window。

eg:

var person = {
name: 'xiao ming',
age: 18,
who: function () {
console.log( 'my name is ' + this.name + ' , ' + this.age + ' years old' );
console.log( person === this);
}
} person.who();

上面这段代码中who方法是person对象的一个属性,被person对象调用,所以this的指向也就是person。

call和apply的基本使用

call()
function.call(obj, args1,args2,...)
  • 调用call的对象必须是个函数function
  • call的第一个参数将会是function改变上下文后指向的对象,如果不传,默认为全局对象window
  • 第二个参数开始可以接收任意个参数,这些参数将会作为function的参数传入function
  • 调用call的方法会立即执行

apply()

function.apply(obj,args[...])

  只接收两个参数,其中第二个参数必须是一个数组或者类数组,这也是这两个方法很重要的一个区别

数组与类数组小科普

数组我们都知道是什么,它的特征都有哪些呢?

  1. 可以通过角标调用,如 array[0]
  2. 具有长度属性length
  3. 可以通过 for 循环和forEach方法进行遍历

类数组顾名思义,具备的特征应该与数组基本相同,那么可以知道,一个形如下面这个对象的对象就是一个类数组

var arrayLike = {
0: 'item1',
1: 'item2',
2: 'item3',
length: 3
}

  类数组arrayLike可以通过角标进行调用,具有length属性,同时也可以通过 for 循环进行遍历

我们经常使用的获取dom节点的方法返回的就是一个类数组,在一个方法中使用 arguments关键字获取到的该方法的所有参数也是一个类数组

但是类数组却不能通过forEach进行遍历,因为forEach是数组原型链上的方法,类数组毕竟不是数组,所以无法使用。

异同

相同点

都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行

不同点

call方法从第二个参数开始可以接收任意个参数,每个参数会映射到相应位置的func的参数上,可以通过参数名调用,但是如果将所有的参数作为数组传入,它们会作为一个整体映射到func对应的第一个参数上,之后参数都为空

function func (a,b,c) {}

func.call(obj, 1,2,3)
// function接收到的参数实际上是 1,2,3 func.call(obj, [1,2,3])
// function接收到的参数实际上是 [1,2,3],undefined,undefined

  apply方法最多只有两个参数,第二个参数接收数组或者类数组,但是都会被转换成类数组传入func中,并且会被映射到func对应的参数上。

func.apply(obj, [1,2,3])
// function接收到的参数实际上是 1,2,3 func.apply(obj, {
0: 1,
1: 2,
2: 3,
length: 3
})
// function接收到的参数实际上是 1,2,3

  

两个方法该如何选择?

跟简单,根据你要传入的参数来做选择,不需要传参或者只有1个参数的时候,用call,当要传入多个对象时,用apply

或者,如果需要传入的参数已经是一个数组或者类数组了,就用apply,如果还是单独的需要逐个传入的,可以考虑使用call

【其他用途——对象继承】

由于可以改变this的指向,所以也就可以实现对象的继承。

function superClass () {
this.a = 1;
this.print = function () {
console.log(this.a);
}
} function subClass () {
superClass.call(this);
this.print();
} subClass();
// 1

  subClass通过call方法,继承了superClassprint方法和a变量,同时subClass还可以扩展自己的其他方法。

call和apply方法的异同的更多相关文章

  1. javascript中apply()方法解析-简单易懂!

    今天看到了js的call与apply的异同,想着整理一下知识点,发现了一篇好文章,分享过来给大家,写的非常好! 参考: http://www.cnblogs.com/delin/archive/201 ...

  2. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  3. JavaScript学习笔记(1))——————call,apply方法

    学习前端也有一段时间了,但是效果甚微.利用时间不够充分,虽然是利用工作之余来学习.但是这不能成为我的借口. 今天学习了(其实看了很多遍)call apply方法. function abc(a,b){ ...

  4. angularjs $scope.$apply 方法详解

    myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval ...

  5. 《ES6基础教程》之 Call 方法和 Apply 方法

    <script type="text/javascript"> // Call方法: // 语法:call(thisObj[,arg1,arg2,...,argN]) ...

  6. Js apply方法详解

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  7. JS中的call()和apply()方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  8. 优雅的数组降维——Javascript中apply方法的妙用

    将多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,除了使用朴素的循环转换以外,我们还可以利用Javascript的语言特性实现更为简洁优雅的转换.本文将从朴素的循环转换开始,逐一介绍三 ...

  9. js巧用apply方法实现数组最值以及合并

    尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...

随机推荐

  1. HDU5920【模拟】

    模拟题这种东西啊~就是自己读题,自己打,没有别的方法...贴份6000+b的code跑: #include <bits/stdc++.h> using namespace std; //t ...

  2. Unity5.0 EventSystem事件系统的详细说明

    http://www.manew.com/blog-56596-2917.html?_dsign=53b25d5d unity5.0开发了新的UI系统UGUI,附带的事件系统EventSystem不仅 ...

  3. ajax请求过程

    1.什么是ajax AJAX=Asynchronous JavaScript and XML  =====>异步的javascript和xml AJAX是在不重新加载整个页面的情况下与服务器交换 ...

  4. java 三大基本特征

    java中的面向对象的三大基本特征是:[封装].[继承].[多态] 封装:对象要有一个明确的边界:边界的划分(对象各司其职.对象的粒度.对象的可重用性) 属性(bean.pojo):私有的privat ...

  5. dosbox让DOSBox启动后自动执行命令——自动挂载

    学习汇编时. 每次启动DOSBox后,都要挂载.转盘符,于是有一个骚套路. 找到这个:bat文件 用记事本就可以编辑.  拉到最下面,找到[autoexec]部分,补充命令如下: mount c f: ...

  6. 从MySQL高可用引出对高可用架构设计的一些思考

    高可用HA(High Availability)是分布式系统架构设计中必须考虑的因素之一,它通常是指,通过设计减少系统不能提供服务的时间. 假设系统一直能够提供服务,我们说系统的可用性是100%.如果 ...

  7. flask_之参数传递

    参数篇 request接收数据 request对象 method:当前请求方法(POST,GET等) url:当前链接地址 path:当前链接的路径 environ:潜在的WSGI环境 headers ...

  8. Day2课后作业:sed替换程序

    #!/usr/bin/env python #_*_conding:utf-8_*_ import sys,os old_file = sys.argv[1] new_file = sys.argv[ ...

  9. bzoj 4318 || 洛谷P1654 OSU!

    https://www.lydsy.com/JudgeOnline/problem.php?id=4318 https://www.luogu.org/problemnew/show/P1654 看来 ...

  10. JAVA常用知识总结(十三)——数据库(三)

    Mysql的主键选择(主键自增,UUID,snowflake)? 使用自增长做主键的优点:1.很小的数据存储空间2.性能最好3.容易记忆使用自增长做主键的缺点:1.如果存在大量的数据,可能会超出自增长 ...