call、apply 和 bind_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: osg相机移动时一定要重写下一篇:CGBTN2109_DAY01复习总结

call、apply 和 bind

发布时间：2022-07-04 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了call、apply 和 bind，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

call()、apply()、bind() 都是用来重定义 this 这个对象的！

@H_512_5@VAR obj1 = {
　　username: "HuITaiLang",
　　fn: function() {　　　　concole.loh(this);
　　　　console.LOG(this.username);
　　}
}
var obj2 = obj1.fn;
obj2();     //undefined

我们想打印对象 obj2 里面的 username 却打印出来 undefined 是怎么回事呢？如果我们直接执行 obj2.fn()是可以的。

var obj1 = {
　　username: "HuiTaiLang",
　　fn: function() {　　　　console.log(this);
　　　　console.log(this.username);
　　}
}
obj1.fn(); 　　//HuiTaiLang

能够打印是因为，第一个打印里面的 this 指向全局window，第二个打印里面的 this 指向 obj1 。

call、apply 和 bind

虽然这种方法可以达到打印username目的，但是如果我们需要将对象保存到另外的一个变量中，那么就可以通过以下方法。

call

var obj1 = {　　
　　username: "HuiTaiLang",
　　fn: function() {
　　　　console.log(this)　　　　
　　　　console.log(this.username);　　
　　}
}
var obj2 = obj1.fn;
obj2.call(obj1);    // HuiTaiLang

通过在 call 方法，第一个参数就是要添加的 obj1环境中，简单来说，this就会指向那个对象。

call 方法除了第一个参数以外还可以添加多个参数，如下：

var obj1 = {　　
　　username: "HuiTaiLang",
　　fn: function(num1, num2) {
　　　　console.log(num1 + num2);　
　　　　console.log(this.username);　　
　　}
}
var obj2 = obj1.fn;
obj2.call(obj1, 2, 3);  // 5

apply

apply方法和call方法有些相似，它也可以改变this的指向。

var obj1 = {　　
　　username: "HuiTaiLang",
　　fn: function() {
　　　　console.log(this.username);　　
　　}
}
var obj2 = obj1.fn;
obj2.apply(obj1);　　 // HuiTaiLang

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var obj1 = {　　
　　username: "HuiTaiLang",
　　fn: function(num1, num2) {
　　　　console.log(num1 + num2);　
　　　　console.log(this.username);　　
　　}
}
var obj2 = obj1.fn;
obj2.apply(obj1, [2, 3]); 　　// 5

注意：如果call和apply的第一个参数写的是null，那么this指向的是window对象。

var obj1 = {　　
　　username: "HuiTaiLang",
　　fn: function() {
　　　　console.log(this);　　
　　}
}
var obj2 = obj1.fn;
var obj3 = obj1.fn;
obj2.call(null);    // window
obj3.apply(null);   // window

bind

bind和call、apply方法不同，实际上bind方法返回的是一个修改过后的函数。

var obj1 = {　　
　　username: "HuiTaiLang",
　　fn: function() {
　　　　console.log(this.username);　　
　　}
}
var obj2 = obj1.fn;
obj2.bind(obj1);
var newFn = obj2.bind(obj1);
console.log(newFn);
newFn();

call、apply 和 bind

我们会发现 bind 并没有被打印，而我们打印 newFn 打印出的是一个函数，并且可以正常执行。

同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var obj1 = {　　
　　username: "HuiTaiLang",
　　fn: function(num1, num2) {
　　　　console.log(num1 + num2);
　　　　console.log(this.username);　　
　　}
}
var obj2 = obj1.fn;
var newFn1 = obj2.bind(obj1, 2, 3);
var newFn2 = obj2.bind(obj1);
newFn1();
newFn1(2, 3);

总结：

call 、bind 、apply 都可以用来改变上下文中的 this。这三个函数的第一个参数都是 this 的指向对象，后面的参数：

call 的参数是直接放进去的，后面的参数全都用逗号分隔。
apply 的所有参数，都必须放在一个数组里面传进去。
bind 除了返回是函数以外，它的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数、 object 等等！

脚本宝典总结

以上是脚本宝典为你收集整理的call、apply 和 bind全部内容，希望文章能够帮你解决call、apply 和 bind所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：java load load php python String 参数参数程序员程序员

上一篇: osg相机移动时一定要重写下一篇:CGBTN2109_DAY01复习总结

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15

全站导航更多