javascript - 如何在 ES5 中将参数传递给父构造函数

Question

对于下面的代码

   // Parent constructor function
    function Person(name, age, gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    };

    //Child constructor function
    function Employee(name, age, gender, empId){
        // Is this the right way ?
        Person.call(this, name, age, gender);
        this.empId = empId;
    };

    //Inherit the properties from Parent
    Employee.prototype = Object.create(Person.prototype);

    // Fix the inherited constructor
    Employee.prototype.constructor = Employee;

    john = new Employee('John', 21, 'male', 213);

    console.log(john.hasOwnProperty('empId')); // true
    
    // Shoudn't this be false
    console.log(john.hasOwnProperty('name')); // true
    
    // Shouldn't the above statement work similar to this one
    console.log(john.hasOwnProperty('toString')); // false
    

我的问题是我们如何在 ES5 中将姓名、年龄、性别传递给 Person 构造函数？

正确的做法是什么？

更新:

如果以上是正确的那么为什么 console.log(john.hasOwnProperty('name'));//真。这不应该是假的吗？

Answer 1

是的，使用 Person.call(this, ...) 是正确的方法。

但是，如果您想使用类，请考虑使用 ES6 和 ES6 classes , 并用 Babel 编译它或 Closure Compiler用于 ES5 兼容性。

Babel 也可以用作 browserify/webpack 管道的一部分。

// Shoudn't this be false?
console.log(john.hasOwnProperty('name'));

hasOwnProperty 行为完全符合预期。它是基于对象的，你刚刚给这个对象分配了一些属性，对吧？虽然使用原型(prototype)给出了类和继承的美好幻觉，但实际上没有类也没有继承。有原型(prototype)链接，但 Person.call(...) 只是一个普通的函数调用。

One of my collegue mentioned that it should have been

Person.prototype.name = this.name;

instead of

Person.call(this, name, age, gender);

Is this right ?

您的同事部分正确:您必须编写 Person.prototype.name = name 才能获得 hasOwnProperty('name') == false，但这将为具有此原型(prototype)的所有对象设置值。这是有道理的:它不会是自己的属性(property)，因为它会在许多对象之间共享。当然，这不是你想做的。 Name 绝对应该是 Person 对象自己的属性。