JavaScript 中 call()、apply()、bind() 的用法

2019/10/15
- 编程
0阅读

作用

重新定义this对象的内容

区别

1
2
3

obj.myFun.call(db)；　　　　// 把this对象设置为db 触发函数
obj.myFun.apply(db);　　　 // 把this对象设置为db 触发函数
obj.myFun.bind(db)();　　　// 把this对象设置为db 返回新函数 不自动执行

传参

都可以接受任意类型的参数，但是传参方式有所不同

1
2
3

obj.myFun.call(context,param1,param2,...); // 逗号分隔，逐个往后加
obj.myFun.apply(db,[param1,param2,...]);   // 包裹在一个Array中 逗号分隔，逐个往后加
obj.myFun.bind(db,param1,param2,...);      // 逗号分隔，逐个往后加

吐槽

最开始在别人blog看到这么一段代码，当时我以为Student类中apply()的第二个参数随便填就能把当前方法中的参数映射过去。
类似php中的func_get_args()，能获取到传入当前方法的参数集合。然后发现这arguments是 js中数组对象的名词。。。

/*定义一个人类*/  
function Person(name,age)  
{  
    this.name=name;  
    this.age=age;  
}  
/*定义一个学生类*/  
function Student(name,age,grade)  
{  
    Person.apply(this,arguments);  
    this.grade=grade;  
}  
//创建一个学生类  
var student=new Student("zhangsan",21,"一年级");  
//测试  
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);  
//大家可以看到测试结果name:zhangsan age:21  grade:一年级  
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.

JavaScript 中 call()、apply()、bind() 的用法

作者：有点东西

链接： https://www.youdiandongxi.com/article/change-context.html

协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！

JavaScript 中 call()、apply()、bind() 的用法

作用

区别

传参

吐槽

JavaScript 中 call()、apply()、bind() 的用法

其他推荐内容

hyperf踩坑笔记

vue-cli 安装VUE+TypeScript+Scss踩坑记录

页面在手机QQ中的分享信息和唤起QQ

评论区