码迷,mamicode.com
首页 > 移动开发 > 详细

call,apply和bind的用法及区别

时间:2021-01-26 12:43:44      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:nbsp   fine   name   bin   var   ons   函数   一个   情况   

例1

 1   var name = 小王, age = 17
 2   var obj = {
 3     name: 小张,
 4     objAge: this.age,
 5     myFun: function() {
 6       console.log(this.name + 年龄: + this.age);
 7     }
 8   }
 9 
10   console.log(obj.objAge); //17
11   obj.myFun() //  小张年龄:undefined

 

例2

1   var fav = 盲僧
2   function shows() {
3     console.log(this.fav);
4   }
5   shows() //盲僧

 

比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 shows() 函数 this 是 window ;

 

 

1.call()、apply()、bind()都可以用来改变this指向

 1   var name = 小王, age = 17
 2   var obj = {
 3     name: 小张,
 4     objAge: this.age,
 5     myFun: function () {
 6       console.log(this.name + 年龄: + this.age);
 7     }
 8   }
 9 
10   var dm = {
11     name: 德玛,
12     age: 99
13   }
14 
15   obj.myFun() //小张年龄:undefined
16   obj.myFun.call(dm)  //德玛年龄:99
17   obj.myFun.apply(dm) //德玛年龄:99
18   obj.myFun.bind(dm)()  //德玛年龄:99

 

call和apply都是对函数的直接调用

bind方法返回的是一个新的函数,因此后面还需要()来进行调用才可以

 

 

2.对比call 、bind 、 apply 传参情况下

 1   var name = 小王, age = 17
 2   var obj = {
 3     name: 小张,
 4     objAge: this.age,
 5     myFun: function(from, to) {
 6       console.log(this.name + 年龄: + this.age, 来自 + from + 去往 + to);
 7     }
 8   }
 9 
10   var dm = {
11     name: 德玛,
12     age : 99
13   }
14   obj.myFun(成都,上海) //小张年龄:undefined 来自成都去往上海
15   obj.myFun.call(dm, 成都, 上海)  //德玛年龄:99 来自成都去往上海
16   obj.myFun.apply(dm, [成都, 上海]) //德玛年龄:99 来自成都去往上海
17   obj.myFun.bind(dm, 成都, 上海)()  //德玛年龄:99 来自成都去往上海

 

第一个参数都是this要指向的对象,都可以利用后续参数传参

  call:以逗号分割传入的参数

  apply:以数组形式传入参数

  bind:同call方法

 

3.当第一个参数为null或undefined时,this指向window

 1   var name = 小王, age = 17
 2   var obj = {
 3     name: 小张,
 4     objAge: this.age,
 5     myFun: function(from, to) {
 6       console.log(this.name + 年龄: + this.age, 来自 + from + 去往 + to);
 7     }
 8   }
 9 
10   var dm = {
11     name: 德玛,
12     age : 99
13   }
14   obj.myFun(成都,上海) //小张年龄:undefined 来自成都去往上海
15   obj.myFun.call(null, 成都, 上海)  //小王年龄:17 来自成都去往上海
16   obj.myFun.call(undefined, 成都, 上海)  //小王年龄:17 来自成都去往上海
17   obj.myFun.apply(null, [成都, 上海])  //小王年龄:17 来自成都去往上海
18   obj.myFun.apply(undefined, [成都, 上海])  //小王年龄:17 来自成都去往上海
19   obj.myFun.bind(null, 成都, 上海)()  //小王年龄:17 来自成都去往上海
20   obj.myFun.bind(undefined, 成都, 上海)()  //小王年龄:17 来自成都去往上海

 

 

引用文章:https://www.runoob.com/w3cnote/js-call-apply-bind.html

call,apply和bind的用法及区别

标签:nbsp   fine   name   bin   var   ons   函数   一个   情况   

原文地址:https://www.cnblogs.com/memeflyfly/p/14325731.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!