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')); // true。这不应该是假的吗？

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行为完全符合预期。它是基于对象的，你刚刚为这个对象分配了一些属性，对吧？虽然使用原型提供了很好的类和继承错觉，但是没有类和继承。有原型链接，但Person.call(...)只是一个正常的函数调用。

我的一位同事提到应该是
Person.prototype.name = this.name;
而不是
Person.call(this, name, age, gender);
这是对的吗？

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

Answer 2

是的，上面的行为是正确的。创建的Employee对象（john）将具有从父类继承的属性name。

Answer 3

上面的代码是继承的正确方法，并将args传递给它的父级。 object.hasOwnProperty（property name） - 方法返回一个布尔值，指示对象是否具有指定的属性作为其自己的属性（而不是继承它）。但是，检查你是否在SubClass的构造函数上调用BaseClass.call（this），意味着你要将BaseClass属性和函数添加到SubClass实例，因为这是SubClass的实例。

// 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);
    
    //it is returning the expected data, which we pass to parent
    console.log(john.age); //21

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

3 个答案: