javascript - 通过原型扩展 JavaScript 中的对象功能

Question

我正在自学地学习 JavaScript，我正在寻找从对象继承并扩展它们的功能的方法......而且......哇！事实证明有几种方法可以做到这一点。

所以有一个流行的方法是通过extend 和class 关键字（简而言之）扩展一个对象，我在下面放了一个我看到的例子。好的，因为我来自C++和Python语言，这确实是！非常有帮助......但我知道这是帮助来自面向对象语言的程序员感觉 JavaScript 更舒适的糖代码。所以！我的目标是知道如何在不使用上述方法的情况下扩展对象功能，因为我渴望了解 js 如何在幕后工作（至少非常接近它）并对此感到满意。

笔记

我知道这里有关于这个主题的帖子，但我认为那些不符合我的需求，考虑到那些（非常好）深入研究的帖子是从 2012 年左右开始的。

用class和extend关键字方式

参考：https ://www.geeksforgeeks.org/how-to-extend-an-object-in-javascript/

// Declaring class 
class Profile {

  // Constructor of profile class 
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {

    // Method to return name 
    return this.name;
  }

  getAge() {

    // Method to return age 
    return this.age;
  }

  getClass() {
    return this;
  }
}

// Class Student extends class Profile  
class Student extends Profile {

  // Each data of class Profile can be 
  // accessed from student class. 
  constructor(name, age, languages) {

    // Acquiring of attributes of parent class 
    super(name, age);
    this.lang = [...languages];
  }

  // Method to display all attributes 
  getDetails() {
    console.log("Name : " + this.name);
    console.log("Age : " + this.age);
    console.log("Languages : " + this.lang);
  }
}

// Creating object of child class with passing of values 
var student1 = new Student("Ankit Dholakia", 24,
  ['Java', 'Python', 'PHP', 'JavaScript']);
student1.getDetails();

我试过这个......但我不舒服！

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.selfPresentation = function() {
  console.log("Hello, my name is " + this.name + "and I'm " + this.age + " years old.");
}

function Worker(name, age, occupation) {
  Person.call(this, name, age);
  this.occupation = occupation;
}
Worker.prototype = new Person;
Worker.prototype.selfPresentation = function() {
  // I think there undoubtedly is a best approach for this...
  this.__proto__.__proto__.selfPresentation.call(this); 
  console.log("I don't breath only, I'm a " + this.occupation);
}

let variable = new Worker("Arturo", 22, "Student");
variable.selfPresentation();

（这是我的目标，但是..）对于对象之间的继承，我尝试模仿 Object.create 方法

a = {
  field: "field",
  method: function() {
    console.log("SuperMethod");
  }
}

function inheritHimAll(object) {
  function helperFunction() {}
  helperFunction.prototype = object;
  return new helperFunction;
}

b = inheritHimAll(a);
console.log(b.__proto__)

在 javascript 中扩展对象的最佳方法是什么？

标签： javascript

Answer 1

在 javascript 中扩展对象的最佳方法是什么？

这是一个相当主观的问题，但我会尽可能使用class语法。它们更直观，并且需要更少的样板代码。

但是，我认为您对了解如何在没有class语法的情况下进行继承更感兴趣。这是我将从您的示例中更改的内容：

1. 不要为原型创建类的新实例。属性都存在于对象中，而不是原型中。相反，使用Object.create()类的原型创建一个新对象。有关此问题的更多信息，请参阅此答案。
2. 永远不要使用__proto__. 相反，从类的原型中手动调用函数或使用Object.getPrototypeOf().

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.selfPresentation = function() {
  console.log("Hello, my name is " + this.name + "and I'm " + this.age + " years old.");
}

function Worker(name, age, occupation) {
  Person.call(this, name, age);
  this.occupation = occupation;
}
Worker.prototype = Object.create(Person.prototype);
Worker.prototype.selfPresentation = function() {
  Person.prototype.selfPresentation.call(this); 
  console.log("I don't breath only, I'm a " + this.occupation);
}

let variable = new Worker("Arturo", 22, "Student");
variable.selfPresentation();