调用 javascript 构造函数方法答案

【问题标题】：Calling a javascript constructor functions method调用 javascript 构造函数方法
【发布时间】：2018-08-20 19:48:22
【问题描述】：

我无法在我创建的构造函数中调用方法。这是函数和我尝试调用它...

var Cohort = function(program, campus, number, students){
    this.program = program,
    this.campus = campus,
    this.number = number,
    this.students = students,
    function sayName(){
        return `This cohort is called ${program}, ${campus}, ${number}.`
    },
    function takeAttendance(){
        return console.log(students)
    }
}

var cohort1 = new Cohort("w", "pr", 27, ['devin', 'ben', 'bob'])
var cohort2 = new Cohort('w', 'pr', 31, ["Brendan Eich", "Dan Abramov", "Wes Bos", "Kent Dodds"])

cohort1.sayName()

控制台说群组1.sayName 不是一个函数。

【问题讨论】：

如果您想以指定的方式使用它，您需要将该方法添加到 Cohort 的原型中。请参阅Object.prototype 了解更多信息。
在构造函数中声明函数不会使其成为构造对象的属性值。这只是一个本地功能。您可以通过添加 this.sayName = sayName; 使其成为属性。
@Pointy 但这不会只打印出提到的变量的局部值吗？如果要更改 this.program，sayName 的输出不会反映它，对吗？换句话说，我认为您发布的内容会起作用，但我不确定它是否反映了 OP 的意图（尽管谁知道）。
@rmlan 没有； “sayName”函数指的是构造函数参数，而不是对象属性。这些永远不会改变。
@Pointy 我就是这么说的。我不能确定，但我有一种感觉与 OP 真正想要的东西存在争议。

标签： javascript function methods constructor

【解决方案1】：

您必须在原型上设置方法。您在代码中所做的只是将函数声明为 Cohort 函数范围的本地函数，因此它们不是方法。

每当您调用new Cohort(...) 时，都会从Cohort.prototype 链接一个对象（new Cohort().__proto__ === Cohort.prototype），该对象将成为您的新Cohort 对象的this，您的属性将被保存到其中。设置Cohort.prototype.methods 使用原型链逻辑允许在Cohort 对象的每个实例上调用这些方法

var Cohort = function(program, campus, number, students) {
    this.program = program
    this.campus = campus
    this.number = number
    this.students = students
}

Cohort.prototype.sayName = function() {
  return `This cohort is called ${this.program}, ${this.campus}, ${this.number}.`
}

Cohort.prototype.takeAttendance = function() {
  return console.log(this.students)
}

var cohort1 = new Cohort("w", "pr", 27, ['devin', 'ben', 'bob'])
var cohort2 = new Cohort('w', 'pr', 31, ["Brendan Eich", "Dan Abramov", "Wes Bos", "Kent Dodds"])

console.log(cohort1.sayName())
cohort1.takeAttendance()

console.log(Object.getOwnPropertyNames(cohort1))
console.log(Object.getOwnPropertyNames(cohort1.__proto__))

在 ES6 中，你可以简单地做

class Cohort {
  constructor(program, campus, number, students) {
    this.program = program
    this.campus = campus
    this.number = number
    this.students = students
  }

  sayName() {
    return `This cohort is called ${this.program}, ${this.campus}, ${this.number}.`
  }

  takeAttendance() {
    return console.log(this.students)
  }
}

var cohort1 = new Cohort("w", "pr", 27, ['devin', 'ben', 'bob'])
var cohort2 = new Cohort('w', 'pr', 31, ["Brendan Eich", "Dan Abramov", "Wes Bos", "Kent Dodds"])

console.log(cohort1.sayName())
cohort1.takeAttendance()

console.log(Object.getOwnPropertyNames(cohort1))
console.log(Object.getOwnPropertyNames(cohort1.__proto__))

这个class 构造实际上只是一个语法糖，实现了与 ES5 中相同的逻辑

作为一个额外的说明，下面的代码也可以工作，但通常不是首选。注意方法存储位置的区别（检查最后2个console.logs并与上面的比较）

var Cohort = function(program, campus, number, students) {
    this.program = program
    this.campus = campus
    this.number = number
    this.students = students
    
    this.sayName = function() {
  return `This cohort is called ${this.program}, ${this.campus}, ${this.number}.`
    }
    
    this.takeAttendance = function() {
      return console.log(this.students)
    }
}

var cohort1 = new Cohort("w", "pr", 27, ['devin', 'ben', 'bob'])
var cohort2 = new Cohort('w', 'pr', 31, ["Brendan Eich", "Dan Abramov", "Wes Bos", "Kent Dodds"])

console.log(cohort1.sayName())
cohort1.takeAttendance()

console.log(Object.getOwnPropertyNames(cohort1))
console.log(Object.getOwnPropertyNames(cohort1.__proto__))

【讨论】：

非常感谢，我之前尝试过将其作为一个班级进行，但它不起作用，这更有意义。

【解决方案2】：

要在函数中使用函数，您必须使用与分配属性相同的方式来分配它。

你可以通过添加this来做到这一点：

var Cohort = function(program, campus, number, students) {
    this.program = program
    this.campus = campus
    this.number = number
    this.students = students

    this.sayName = function() {
        return `This cohort is called ${this.program}, ${this.campus}, ${this.number}.`
    }

    this.takeAttendance = function() {
        return console.log(students)
    }
}

var cohort1 = new Cohort("w", "pr", 27, ['devin', 'ben', 'bob'])
var cohort2 = new Cohort('w', 'pr', 31, ["Brendan Eich", "Dan Abramov", "Wes Bos", "Kent Dodds"])

console.log(cohort1.sayName())

...或使用prototype（大多数开发人员的首选方法）：

var Cohort = function(program, campus, number, students) {
    this.program = program
    this.campus = campus
    this.number = number
    this.students = students
}

Cohort.prototype.sayName = function() {
  return `This cohort is called ${this.program}, ${this.campus}, ${this.number}.`
}

Cohort.prototype.takeAttendance = function() {
  return console.log(this.students)
}

var cohort1 = new Cohort("w", "pr", 27, ['devin', 'ben', 'bob'])
var cohort2 = new Cohort('w', 'pr', 31, ["Brendan Eich", "Dan Abramov", "Wes Bos", "Kent Dodds"])

console.log(cohort1.sayName())

【讨论】：