iwowen的博客
iwowen
记录和分享技术
  1. 首页
  2. 前端
  3. 正文

在javascript中使用apply、call、bind函数

2019年11月08日 19点热度 0人点赞 0条评论

每个javascript函数都有两个非继承的方法 apply()、 call(),这两个方法的用途相同,都是在特定的作用域中调用函数,直接一点的说法就是改变函数内部的this指针。

this指针介绍

this表示当前对象的一个引用。

单独使用this时,this默认指向全局对象window。(当前对象是window对象)

console.log(this) // 打印window对象

当在浏览器中全局运行函数时,它的this指针同样默认指向全局对象window。(当前对象是window对象)

function fun() {
    console.log(this) // 打印window对象
}

当在对象里的方法使用this指针的时候,它指向当前对象。(当前对象是obj对象)

var obj = {
    title: 'fun',
    fun: function() {
        console.log(this) // 打印obj对象
    }
}

使用apply()方法

apply()方法接受两个参数,第一个参数是在其中运行函数的作用域,第二个参数是是一个参数数组,用于向函数中传递参数。

var num = 10
function myFun1(num1, num2) {
    console.log(this.num + num1 + num2)
}
myFun1(1,2)

上面的代码定义了全局变量num和全局函数myFun,当运行myFun函数时,将会打印10 + 1 + 2的值,也就是13。

var num = 10
var myObj = {
    num: 20,
    myFun2: function(num1, num2) {
        console.log(this.num + num1 + num2)
    }
}
myObj.myFun2(1,2)

上面这串代码,将变量和方法都定义在一个对象里,这样this.num不再是全局的num,而是当前对象中的num,所以结果打印出来的是20 + 1 + 2的值,也就是23。
如果我想在运行myFun1时能够使用myObj中的num怎么办?这里就可以使用apply函数来改变this指向。

myFun1.apply(myObj, [1, 2])

使用上面这串代码最终将打印23,说明已经改变了myFun1的this指向。其中的this.num是20。
同样的,也可以在运行myFun2的时候使用全局的变量num,只需要将this指向全局对象window就行。

myObj.myFun2.apply(window, [1, 2])

最终打印的结果是13,说明这里的this.num是10。
上面的代码apply函数传参使用参数数组,也就是[1, 2]的形式,分别代表第一第二个参数,如果函数不需要传参数,可以不传apply的第二个参数。

使用call()方法,它与apply()有什么不同?

call函数的使用方法基本上和apply一样,只是传递参数的方式不一样,apply通过参数数组的形式传参,而call需要把参数一个个都分别传进去。例如将上面的例子改成使用call函数,如下:

myFun1.call(myObj, 1, 2)

使用bind()函数绑定this指针

bind方法同样用于改变this指针,但和apply、call方法不同。apply和call在调用函数后会立即执行,不会保存this改变后的状态。而bind在调用函数后不会立即执行,在改变this指针后返回一个新的函数,供以后使用。

myFun1.apply(myObj, [1, 2]) // 23
myFun1(1, 2) // 13

上面的例子中,在myFun1执行apply函数后,其本身并没有改变this指向,在下次执行时还是会变回原来的this。如果想保存this改变后的状态,就需要使用bind函数。

var myFun3 = myFun1.bind(myObj)
myFun3(1, 2) // 23
myFun3(1, 2) // 23
标签: js 函数
最后更新:2020年11月22日

什码

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
使用rollup和typescript搭建自己的函数库 前端关于性能优化方面的记录 关于前端BFC相关笔记 js数据类型和数据转换 dom事件笔记 css盒模型
关于前端BFC相关笔记前端关于性能优化方面的记录前端使用canvas实现贪吃蛇小游戏前端css实现左中右布局如何在react项目中使用redux?使用create-react-app打造多页面应用
js函数节流和防抖 使用rollup和typescript搭建自己的函数库 如何在react项目中使用redux? 前端关于性能优化方面的记录 使用kodexplorer可道云作为hexo静态网站的后台 js数据类型和数据转换
分类目录
  • react
  • vue
  • 前端
  • 工具
文章归档
  • 2020年12月 (1)
  • 2020年5月 (2)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (1)
  • 2020年1月 (2)
  • 2019年12月 (1)
  • 2019年11月 (3)
  • 2019年10月 (1)

COPYRIGHT © 2020 iwowen的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

蜀ICP备19037276号-1