调用 javascript 构造函数方法

Question

我在调用我创建的构造函数内部的方法时遇到问题。这是该函数和我调用它的尝试...

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不是一个函数。

Answer 1

您必须将方法设置到原型上。您在代码中所做的只是将函数声明为

Cohort

函数作用域的本地函数，因此它们不是方法。

每当您调用

new Cohort(...)

时，都会从

new Cohort().__proto__ === Cohort.prototype

链接一个对象 (

Cohort.prototype

)，该对象将成为新

this

对象的

Cohort

，您的属性将保存到其中。设置

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.log

并与上面的进行比较）

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__))

Answer 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())

Answer 3

当 new 关键字后跟函数名称以及一组左括号和右括号时，将执行构造函数调用。

const person = function(name, age) {
    this.name = name;
    this.age = age;

    this.showDetails = function() {
        console.log(this.name + " is " + this.age + " years old");
    }
}

const sean = new person('Sean', 35);
sean.showDetails(); // Sean is 35 years old

在 JavaScript 中构造对象只是创建对象的多种方法中的一种。

了解更多：https://medium.com/p/1112c925e78f