代码之家 › 专栏 › 技术社区 › Lyubomir

Chaining.apply()和.bind()令人惊讶的行为

ecmascript-6 javascript

Lyubomir · 技术社区 · 6 年前

我需要你的帮助来更好地理解以下行为。

fooBar 输出 foo 作为 this returns bar 1, 2, 3 如预期-意味着 bar 是用作为上下文。

const arguments = [1,2,3];

function bar(...args) {
  console.log('bar this ->', this);
  return 'bar ' + args;
}

function foo(...args) {
  console.log('foo this ->', this);
  return 'foo ' + args;
}

const fooBar = bar.bind(foo, null)(arguments);

console.log(fooBar); // <--- no surprises!

现在让我们 const bar = Math.max.apply; 相反。

const arguments = [1,2,3];

const bar = Math.max.apply;

function foo(...args) {
  console.log('foo this ->', this);
  return 'foo ' + args;
}

const fooBar = bar.bind(foo, null)(arguments);

console.log(fooBar); // <--- surprise!

在这种情况下, 被称为 酒吧 是什么 bind() 在这种情况下到底在做什么?我会再假设一次应该和 福 作为上下文。在本例中,上下文是 window

我一直以为 someFunction.apply(someContext,args) someFunction.bind(someContext,null)(参数) ,但在第二个示例中 someFunction.bind(someContext,null)(参数) someContext(参数)

3 回复 | 直到 6 年前

Lyubomir 6 年前

这是因为 apply :调用给定函数。记住这一点 bar 是通用的吗 Function.prototype.apply 功能。

bind 基本上创建了原始函数的副本,其中包含( this 值)和(可选)参数预设。填充物会用到 应用

所以 fooBar = bar.bind(foo, null)

function fooBar(...args) {
    return Function.prototype.apply.apply(foo, [null, args]);
}

双重用途 应用

让我们来看看 bar.bind(foo, null)(arguments) 可以做到:

Function.prototype.apply.bind(foo, null)(arguments)

可以简化为

Function.prototype.apply.apply(foo, [null, arguments])

在这个特定的例子中

foo(null, ...arguments);

应用 函数,它是为复杂的函数调用而设计的!

Quentin 6 年前

bind this 价值( bar ,这是 apply 这 价值。

酒吧 是 应用

bar.bind(foo)() 与 foo.bar() 与 foo.apply() .

ibrahim mahrir 6 年前

myApply 模仿本地人的 Function#apply 为了更好地理解作品。

Function.prototype.myApply = function(args) {
    // some checks should be here to see if 'this' is a function and if 'args' is an array-like
    this(...args);
}

它接受包含参数和调用的数组(或类似数组的对象) this 我的应用 应用于)应该是每个项目的函数 args 作为独立参数传递。

简单的例子:

现在当你这样做的时候:

alert.myApply(["hello, there"]);

alert 这 到 (不言而喻),以及 ["hello, there"] 参数 一切如期而至。

令人困惑的例子:

这 属于使用 bind , call apply 就像这样:

var myApply = alert.myApply;

var newFunction = myApply.bind(foo);

newFunciton 成为一个新函数(相当于 我的应用 foo ). 打电话 newFunction 我的应用 用它设置为 . 什么时候? 我的应用 这 福 在这种情况下)将被调用。

附加说明: 如你所见 我的应用 这 (这是一个函数),因此该函数将在以前的任何上下文中调用 我的应用 在这个特定的例子中,它是全局对象 window 福 的 这 ).