JS系列之call & apply & bind

xiaochao 发布于2019-08-23 13:09 / 1204人阅读

摘要：参考链接在中，和是对象自带的三个方法，都是为了改变函数体内部的指向。返回值是函数方法不会立即执行，而是返回一个改变了上下文后的函数。而原函数中的并没有被改变，依旧指向全局对象。原因是，在中，多次是无效的。

参考链接：https://juejin.im/post/59bfe8...

在JavaScript中，call、apply和bind是Function对象自带的三个方法，都是为了改变函数体内部 this 的指向。

apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；

apply 、 call 、bind 三者都可以利用后续参数传参；

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

apply、call 的区别

func.apply(thisArg, [argsArray])
fun.call(thisArg, arg1, arg2, ...)

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。

var func = function(arg1, arg2) {
   ...   
};

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2]);

call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

bind

fun.bind(thisArg[, arg1[, arg2[, ...]]])

bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
bind返回值是函数

var obj = {
    name: "Dot"
}

function printName() {
    console.log(this.name)
}

var dot = printName.bind(obj)
console.log(dot) // function () { … }
dot()  // Dot

bind 方法不会立即执行，而是返回一个改变了上下文 this 后的函数。而原函数 printName 中的 this 并没有被改变，依旧指向全局对象 window。

有个有趣的问题，如果连续 bind() 两次，亦或者是连续 bind() 三次那么输出的值是什么呢？像这样：

var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
  
var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。原因是，在Javascript中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

参数

function fn(a, b, c) {
    console.log(a, b, c);
}
var fn1 = fn.bind(null, "Dot");

fn("A", "B", "C");            // A B C
fn1("A", "B", "C");           // Dot A B
fn1("B", "C");                // Dot B C
fn.call(null, "Dot");      // Dot undefined undefined

call 是把第二个及以后的参数作为 fn 方法的实参传进去，而 fn1 方法的实参实则是在 bind 中参数的基础上再往后排。

云服务器 GPU云服务器 JS中bind、call和apply的作 js中的call和apply js 2&amp&amp1 js的 &amp标签

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

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

call&amp;apply&amp;bind的js实现以及应用

摘要：实现使用是这样转换的生成新的函数，新的执行上下文通过在传入对象中增加调用方法执行被改变，得恢复原来的值实现在这里，我们看到了一个有趣的现象，在中可以传入数组两大作用改变借用其他对象的方法改变如何实现执行借用其他对象的方法继承的实现执行能借用 js实现call // example let obj = { a: 124, b: ccc }; function fn(c) ...

mgckid 2019-08-23 15:26 评论0 收藏0
JS手写bind之处理new的情况详解

　　你有遇见过给bind返回的函数做new操作的场景，本篇主要讲述的就是实现一下兼容new操作的bind写法，顺便学习一下new操作符，为大家提供下参考。　　大家可以去看下关于 JS 中 bind 方法的实现的文章，并给出了实现：　　Function.prototype.myBind=function(thisArg,...prefixArgs){ 　　constfn=this; 　　return...

3403771864 2022-11-19 22:09 评论0 收藏0
apply&amp;&amp;call&amp;&amp;bind

摘要：用来改变函数的对象的指向都是用来改变函数的对象的指向的。后面的参数是调用方法的参数。都可以利用后续参数传参。用来改变函数的this对象的指向都是用来改变函数的this对象的指向的。第一个参数都是this要指向的对象。后面的参数是调用方法的参数。都可以利用后续参数传参。 var xw={ name: 小王, gender: 男, age: 24, ...

whataa 2019-08-22 15:37 评论0 收藏0
Hard binding &amp; Soft binding detailed explanati

摘要：硬绑定会大大降低函数的灵活性，使用硬绑定之后就无法使用像隐式绑定或显示绑定来修改。如果可以给默认绑定指定一个全局对象和意外的值，那就可以实现和硬绑定相同的效果，同时保留隐式绑定或显示绑定修改的能力。 JavaScript中硬绑定与软绑定详解 JS中硬绑定这种方式可以把this强制绑定到指定的对象(除了使用new时)，防止函数调用时应用默认绑定规则(非严格模式下全局对象-window| ...

xiyang 2019-08-26 12:11 评论0 收藏0
《javascript高级程序设计》函数调用模式 &amp; this深度理解

在上一篇文章（《javascript高级程序设计》笔记：Function类型）中稍微提及了一下函数对象的属性—this，在这篇文章中有深入的说明：函数的三种简单调用模式 1 函数模式定义的函数，如果单独调用，不将其与任何对象关联，那么就是函数调用模式 function fn(num1, num2) { console.log(this); } // 直接在全局调用 fn();// w...

wyk1184 2019-08-21 16:22 评论0 收藏0