使用 Call 从函数继承对象

Question

我正在做一些测试，但我不知道为什么如果使用 call 我从另一个对象继承，例如 const objC = funcB.call(objA,'Erades') 我得到了一个对象，但是如果我从一个函数继承，我会得到一个具有有线（对我而言）行为的函数。

我不明白为什么要获得方法 B 我必须这样做 funcC.getLastName()

如果有人可以帮助我理解这一点......

TIA

// testing Call to inherit objects / functions
    // -------------------------------------------
    
    // we declare our first function
    const funcA = function(firstName) {
      this.firstName = firstName;
      this.getFirstName = function() {
          return 'My name is ' + this.firstName;
        };
      return this;
    };
    // Create an object out of that function
    const objA = new funcA('Rodrigo');
    
    // declare second function
    const funcB = function (lastName) {
      this.lastName = lastName;
      this.getLastName = function() {
        return 'My last name is ' + this.lastName;
      };
      return this;
    };
    
    // Create an Object from funcB and ObjectA
    const objC = funcB.call(objA,'Erades');
    // We get an object
    console.log("TYPE OF: ", typeof objC)
    console.log('raw:', objC);
    console.log('method A: ', objC.getFirstName());
    console.log('prop A: ', objC.firstName);
    console.log('method B: ', objC.getLastName());
    console.log('prop B: ', objC.lastName);
    console.log('------------');
    
    // if we don't want to create an object out of a function and an object,
    // we could also inherit two functions, but the result really surprise me 
    const funcC = funcB.call(funcA,'Alonso');
    // We get a function !!!!!
    console.log("TYPE OF: ", typeof funcC);
    console.log('raw:', funcC);
    // To get result we need to do this:
    console.log('method ==>: ', funcC('Rui'));
    console.log('method A: ', funcC('Rui').getFirstName());
    console.log('prop A: ', funcC('Maria').firstName);
    console.log('method B: ', funcC.getLastName()); // looks like static method ???
    console.log('prop B: ', funcC.lastName);
    console.log('------------');

Answer 1

当你以这种方式使用call 时，你并没有继承。您正在传入一个实例并通过一些修改获取相同的实例：

const funcA = function(firstName) {
  this.firstName = firstName;
  this.getFirstName = function() {
      return 'My name is ' + this.firstName;
    };
  return this;
};
const objA = new funcA('Rodrigo');

const funcB = function (lastName) {
  this.lastName = lastName;
  this.getLastName = function() {
    return 'My last name is ' + this.lastName;
  };
  return this;
};

const objC = funcB.call(objA,'Erades');
// ObjC IS ObjaA
console.log(objC === objA)

当你使用call时，传入的对象变成了函数的this。然后，您添加一些属性并返回 this，这与您刚刚传入的对象相同。

将函数传递给call() 也不例外。当你写：

funcB.call(funcA,'Alonso');

您正在使用 Alonso 作为参数调用函数 funcB。在该函数内部this 将引用funcA。因此，您将在funcA 和getLastName 属性上设置一个lastName 属性指向一个函数，然后返回funcA，然后将其分配给变量funcC。 funcC 和 funcA 指向完全相同的函数。

const funcA = function(firstName) {
  this.firstName = firstName;
  this.getFirstName = function() {
      return 'My name is ' + this.firstName;
    };
  return this;
};

const funcB = function (lastName) {
  this.lastName = lastName;
  this.getLastName = function() {
    return 'My last name is ' + this.lastName;
  };
  return this;
};


const funcC = funcB.call(funcA,'Alonso');
// the same reference
console.log(funcC === funcA)
// but when you called funcB with it, it added some properties:
console.log("funC lastname:", funcC.lastName)
// they are the same object so this also works: 
console.log("also funcA lastname:", funcC.lastName)