为什么要使用javascript调用方法？

Question

我正在尝试理解 javascript 中的 call 和 apply 方法。但我不明白为什么要使用它。

var person = {
   fullName: function() {
      return this.firstName + " " + this.lastName;
 }
}

var person1 = {
 firstName:"John",
 lastName: "Doe"
}
var person2 = {
 firstName:"Mary",
 lastName: "Doe"
}
var x = person.fullName.call(person1);  

我可以不使用 call 和 apply 来做这个例子。

var person = {
   fullName: function(firstName, lastName) {
     return firstName + " " + lastName;
 }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
var x = person.fullName(person1.firstName, person1.lastName); 

或者我不明白这个例子。

function Product(name) {
  this.name = name;
}

function Pizza(name) {
   Product.call(this,name);
}

const pizza = new Pizza("Margherita");

当我想到这个例子时，我可以用原型来做。为什么使用呼叫或申请？谢谢

Answer 1

一个很好的用例是当您想“借用”具有不同上下文的函数时。以下面的例子为例，您绝对可以使用继承来为 Cat 提供 bark 函数，但也许您不希望该函数存在于每个实例上，而只想在某些情况下使用它。

function Dog(name) {
    this.name = name
    this.bark = function() {
        console.log('woof' + this.name)
    }
}
const dog = new Dog('spot')

dog.bark() // woofspot


function Cat(name) {
    this.name = name
}
const cat = new Cat('cat')

dog.bark.call(cat) // woofcat

Answer 2

function Product(name) {
  this.name = name;
}

function Pizza(name) {
   Product.call(this,name);
}

const pizza = new Pizza("Margherita");

那是inheritance。比萨是一种产品。在其他语言中，例如 PHP，继承看起来像这样：

class Foo {

  public function __construct() {
    // Do stuff specific for Foo
  }

}

class Bar extends Foo {

  public function __construct()(
    parent::__construct();
    // Do stuff specific for Bar
  }

}

这里，我们没有extends，为了让它工作，你需要说父构造函数中的this是子构造函数。

使用call，您可以说出Product() 函数/构造函数中的this 是什么。 在这种情况下，它是 Pizza 对象（新创建的对象 {}）。如果不使用call，Pizza 甚至都没有名字。

第一个例子也是如此

var person = {
   fullName: function() {
      return this.firstName + " " + this.lastName;
 }
}

var person1 = {
 firstName:"John",
 lastName: "Doe"
}
var person2 = {
 firstName:"Mary",
 lastName: "Doe"
}
var x = person.fullName.call(person1);  

是的，它在没有调用 call 的情况下工作，但并非没有重大变化。

person.fullName.call(person1); 就像说使用这个函数并用我的 person1 对象置换this。所以最后，就好像你这样做了：

return person1.firstName + " " + person1.lastName;

至于which one使用

注意：虽然此函数的语法与 call() 的语法几乎相同，但根本区别在于 call() 接受 参数列表，而 apply() 接受 a单个参数数组。

Answer 3

据我所知，这完全是您使用的偏好问题，但您必须使用 call 和/或 apply，没有它们就无法做到。