javascript - javascript call() 和 apply() 通过实现的区别

Question

我一直在观看有关 javascript OOP 的视频并进行实验。但对于 call() 和 apply() 方法仍然没有好的结果。我想使用名为 send() 的 postman 的函数向玩家发送消息，但它总是告诉我:

Cannot read property 'call' of undefined

这是一个例子:

function Player(name) {
  this.name = name;
  this.inbox = [];
}
Player.prototype.viewInbox = function() {
  return this.inbox;
}
Player.prototype.msgRecieve = function() {
  this.inbox.push({
    to: arguments[0],
    msg: arguments[1]
  });
}

function Mailman(branch) {
  this.branchName = branch;
  this.send = function(to, message) {
    to.msgRecieve.call(arguments);

  }
}

var anthony = new Player('anthony');
var ph = new Mailman('PH');

console.log(anthony.viewInbox()); //[]
ph.send('anthony', 'hello anthony'); //send 
console.log(anthony.viewInbox()); // expecting [object{to:'anthony', msg:'hello anthony'}]

Answer 1

call 的第一个参数应该是函数调用期间 this 应该具有的值；在上面，你希望它是 to。然后，您离散地列出参数，或者使用 apply 代替并使用数组(或 arguments 对象)。在本例中，您只想传入 message，因为您使用的是 to，因此:

to.msgRecieve.call(to, message);

call 使用您在其调用的函数中作为 this 提供的第一个参数，并传递给它调用您提供的任何其他参数的函数。例如:

foo.call(something, 'a', 'b', 'c');

...将调用 foo，并且在调用 foo 期间，this 将是 something 和 foo 的参数为 'a'、'b' 和 'c'。

还有 apply，它完全相同，只是您将函数的参数作为数组(或作为 arguments 对象)提供给它:

foo.apply(something, ['a', 'b', 'c']);

不过，还有一些其他问题。如destroy points out ，您还使用了字符串 'anthony'，而不是变量 anthony。然后在 send 中，您希望从 to 获取 name(或者更好的是，在 msgRecieve 中执行此操作。

function Player(name) {
  this.name = name;
  this.inbox = [];
}
Player.prototype.viewInbox = function() {
  return this.inbox;
}
Player.prototype.msgRecieve = function(msg) {
  this.inbox.push({
    to: this.name,   // <=== Change
    msg: msg         // <=== Change
  });
}

function Mailman(branch) {
  this.branchName = branch;
  this.send = function(to, message) {
    to.msgRecieve.call(to, message);  // <=== Change
  }
}

var anthony = new Player('anthony');
var ph = new Mailman('PH');

snippet.log(JSON.stringify(anthony.viewInbox())); //[]
ph.send(anthony, 'hello anthony'); //send // <=== Change
snippet.log(JSON.stringify(anthony.viewInbox())); // expecting [object{to:'anthony', msg:'hello anthony'}]

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>