what's the deference between apply bind call?

yintaolaowanzi 发布于2019-08-21 16:51 / 1673人阅读

摘要：弹出的就是，岁。值得注意的是，和都是改变上下文中的并立即执行这个函数，方法改变了指向之后会返回一个函数，可以随时调用。和作用完全一样，只是传参的方式不一样。以上，有错希望各位大神斧正。

apply bind call
这三个方法，作用都是改变当前使用该方法的对象的this指向。
但三个方法还是有一些区别，先说说共同点。

window.person = {
    name: "mice",
    age: "22"
}
var another = {
    name: "henry",
    age: "23"
}
function say() {
    alert(this.name +"",+ this.age + "岁");
}

这个时候的this指向window，所以执行弹出的就是mice，22岁。与say.call(window)效果一样。

say.call(another);
或者
say.apply(another);
或者
say.bind(another)();

执行之后this的指向就变成了another。弹出的就是henry，23岁。
值得注意的是，call和apply都是改变上下文中的this并立即执行这个函数，bind方法改变了指向之后会返回一个函数，可以随时调用。call和apply作用完全一样，只是传参的方式不一样。

传参方式：
call(thisObj，arg1，arg2...)
apply(thisObj，[obj1,obj2...])
bind(thisObj，arg1，arg2...)

知道了三者的区别，那么简单说下这三个方法的实际作用。
比如

function fruits(){};
fruits.prototype = {
    color: "red",
    say: function(){
        console.log("My color is " + this.color);
    }
}
var apple = new fruits();
apple.say();

此时会打印出My color is red
但是现在我们有另一个对象banana

banana = {
    color: "yellow"
}

我们需要调用apple里的say方法，但是我们不想重新定义，
所以我们可改变apple的指向

apple.say.call(banana);

此时会打印出My color is yellow

再比如

var a = {
    user: "wgf",
    fn: function(){
        console.log(this.user);
    }
}
var b = a.fn;
b();

此时打印出来的是undefined
因为此时this指向的是b,b没有user的属性
所以此时改为

b.call(a);

就能打印出来了。

以上，有错希望各位大神斧正。

GPU云服务器云服务器 JS中bind、call和apply的作 apply与call的区别 js中的call和apply sdp for the webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88814.html

《You Don&#039;t Know JS》阅读理解——this

摘要：运行规则根据的运作原理，我们可以看到，的值和调用栈通过哪些函数的调用运行到调用当前函数的过程以及如何被调用有关。 1. this的诞生假设我们有一个speak函数，通过this的运行机制，当使用不同的方法调用它时，我们可以灵活的输出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...

tianren124 2019-08-20 14:50 评论0 收藏0
Brief introduction of how to &#039;Call, Apply and

摘要：关于在绝大多数情况下，函数的调用方式决定了的值。不能在执行期间被赋值，并且在每次函数被调用时的值也可能会不同。它们除了参数略有不同，其功能完全一样。它们的第一个参数都为将要指向的对象。关于 this 在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。全局 this window.something = ...

incredible 2019-08-23 15:24 评论0 收藏0
【Change Detection系列一】$digest 在Angular新版本中重生

摘要：感谢您的阅读如果喜欢这篇文章请点赞。它对我意义重大，它能帮助其他人看到这篇文章。对于更高级的文章，你可以在或上跟随我。 I’ve worked with Angular.js for a few years and despite the widespread criticism I think this is a fantastic framework. I’ve started w...

legendaryedu 2019-08-21 17:59 评论0 收藏0
JS &#039;严格模式&#039;

摘要：一篇简单的探索，这个严格模式出来很早了，很多人都有写过，而且官方文档很详细。原文链接：乖小鬼的简书为什么想到写这么一篇文章呢，来源在于回答一个 SG上面的问题。那么问题是这样子的。 var a = 2; function foo(){ console.log(this.a);} foo(); 以上代码，执行的结果是什么？？如果你回答是2，那么对了多少？只能说对了一半，为什么...

sunnyxd 2019-08-19 17:12 评论0 收藏0