未捕获的类型错误：无法设置未定义的属性“getName”（匿名函数）答案

【问题标题】：Uncaught TypeError: Cannot set property 'getName' of undefined(anonymous function)未捕获的类型错误：无法设置未定义的属性“getName”（匿名函数）
【发布时间】：2016-07-01 11:13:38
【问题描述】：

 <script>  
    var Employee = new function(name)
    {
     this.name=name;
    }
    Employee.prototype.getName = function()
    {
      return this.name;
    }

    var PermanenetEmployee = new function(annualsalary)
    {
    this.annualsalary=annualsalary;
    }
    var employee = new Employee("rahul");
    PermanenetEmployee.prototype = employee;
    var pe = new PermanenetEmployee(5001);
    document.write(pe.getName());



    </script>

我正在 java 脚本中实现继承。从此代码中，我想打印员工姓名，例如“rahul”。但是我遇到了错误，例如 Uncaught TypeError: Cannot set property 'getName' of undefined(anonymous function)。如何解决此错误？

Employee.prototype.getName = function()
        {
          return this.name;
        }

【问题讨论】：

标签： javascript inheritance prototypal-inheritance

【解决方案1】：

这就是问题所在：

var Employee = new function(name)
// ------------^^^
{
 this.name=name;
}

（PermanenetEmployee 也是如此。）

你不想在那里new。 new 调用函数。您想稍后再执行此操作，就像分配给 employee 时一样。

请注意，您在它们之间设置继承的方式是一种反模式。要使PermanenetEmployee 正确“子类化”Employee，请执行以下操作：

PermanenetEmployee.prototype = Object.create(Employee.prototype);
PermanenetEmployee.prototype.constructor = PermanenetEmployee;

不是

var employee = new Employee("rahul");
PermanenetEmployee.prototype = employee;

...然后让PermanenetEmployee 接受name 并将其传递给Employee：

var PermanenetEmployee = function(name, annualsalary) {
    Employee.all(this, name); // <====
    // ...
};

...或者更好地使用，使用 ES2015 ("ES6") class （如果需要，可以进行转换，例如使用 Babel）。

这是正确的设置。我还修正了PermanenetEmployee 中的错字：

var Employee = function(name) {
    this.name = name;
};
Employee.prototype.getName = function() {
    return this.name;
};

var PermanentEmployee = function(name, annualSalary) {
    Employee.call(this, name);
    this.annualSalary = annualSalary;
};

// Set up subclass
PermanentEmployee.prototype = Object.create(Employee.prototype);
PermanentEmployee.prototype.constructor = PermanentEmployee.prototype;

PermanentEmployee.prototype.getAnnualSalary = function() {
    return this.annualSalary;
};

// Using
var pe = new PermanentEmployee("Rahul", 5001);
console.log(pe.getName());
console.log(pe.getAnnualSalary());

在 ES2015 中：

class Employee {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

class PermanentEmployee extends Employee {
    constructor(name, annualSalary) {
        super(name);
        this.annualSalary = annualSalary;
    }

    getAnnualSalary() {
        return this.annualSalary;
    }
}

// Using
var pe = new PermanentEmployee("Rahul", 5001);
console.log(pe.getName());
console.log(pe.getAnnualSalary());

再次注意，如果您想在野外使用该语法（目前），则需要进行转译。

【讨论】：

【解决方案2】：

有几种方法可以让继承在 JS 中工作，我正在使用这种模式。

首先声明基础原型：

Employee = function () {
};
Employee.prototype = {
    getName: function () {}
};

然后是继承基础的原型：

PermanentEmployee = function () {
    Employee.call(this);
};

PermanentEmployee.prototype = Object.create(Employee.prototype);
PermanentEmployee.constructor = PermanentEmployee;

PermanentEmployee.prototype.foo = function() {}

【讨论】：