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

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. 51nod 1013【快速幂+逆元】

    等比式子: Sn=(a1-an*q)/(1-q) n很大,搞一发快速幂,除法不适用于取膜,逆元一下(利用费马小定理) 假如p是质数,且gcd(a,p)=1,那么 a^(p-1)≡1(mod p).刚好 ...

  2. WindApi2 , WindOriginalApiLibrary 突然不兼容问题

    1. 在新的电脑上从tfs拉下代码后编译, windoriginalapilibrary 这个工程弹出对话框,要求转为vs2013编译,选择同意,编译成功 2.WindApi2 的Reference列 ...

  3. bzoj 1901: Zju2112 Dynamic Rankings【整体二分+树状数组||主席树+树状数组】

    整体二分: 对于每一个修改操作,标记为1,并且加一个标记为-1的这个位置原来值,并且对于a数列每个点都当成修改操作 然后整体二分,扫当前操作区间lr,把在值域区间标记为1和-1的操作都在树状数组对应位 ...

  4. [Xcode 实际操作]一、博主领进门-(8)应用代理文件(AppDelegate.swift)详解

    目录:[Swift]Xcode实际操作 本文将演示使用iOS模拟器,演示程序的生命周期. 在项目导航区,打开应用代理文件[AppDelegate.swift] 应用代理文件时系统运行本应用的委托,里面 ...

  5. 字符串最小表示初探 By cellur925

    我们考虑有一个字符串,可以从这个字符串的不同位置出发,把这个字符串大声朗读出来,当到字符串末端的时候再从头开始读,直到回到"梦开始的地方". 设字符串长度为\(n\),那么有\(n ...

  6. 结合 webpack 使用 vue-router(七)

    结合 webpack 使用 vue-router: 首先安装路由包vue-router: cnpm install vue-router 使用模块化工具导入 vue-router 后,必须手动调用 V ...

  7. DB2 - 编目的解释

    编目(Catalog),是在本地或远程建立客户端到服务器的数据库连接的过程.其目的在于获取编目信息,即生成用来访问数据库的目录.系统数据库目录包含一个列表和指针,通过目录可以使 DB2 能够找到已知的 ...

  8. RN初始化项目报错

    解决方法:全局删除yarn

  9. day01 包 权限修饰符 static final

  10. JS中一个new到底做了哪些事情?

    1.https://www.cnblogs.com/faith3/p/6209741.html 2.https://www.cnblogs.com/AaronNotes/p/6529492.html