我的带有对象和方法的 JavaScript 代码不起作用

Question

我现在正在使用 JavaScript，因为我研究对象已经过去了几天，所以我决定尝试制作自己的对象。问题是我的代码并没有真正工作。它只打印我的第一个对象。我相信我会在这里得到很好的答案，因为当我学习和试验 HTML5 和 CSS 时，这个地方给了我很多帮助。非常感谢！

var person_1st = {
  name: "Plamen",
  surname: "Dobrev",
  age: "14",
  favourite_colour: "blue"
};

document.write(person_1st.name + "<br />" + person_1st.surname + "<br />" + person_1st.age + "<br />" + person_1st.favourite_colour);



function person_2nd(name, surname, age, favourite_colour) {
  this.name = name;
  this.surname = surname;
  this.age = age;
  this.favourite_colour = favourite_colour;
  this.new_favourite_colour = function(favourite_colour) {
    this.favourite_color = favourite_colour;
  };
};

var person_2nd_Plamen = new person_2nd("Plamen", "Dobrev", 14, "blue");
person_2nd_Plamen.new_favourite_color("red");
document.write(person_2nd_Plamen.name + "<br />" + person_2nd_Plamen.surname + "<br />" + person_2nd_Plamen.age + "<br />" + person_2nd_Plamen.favourite_colour);




function person_3rd(name, surname, age, favourite_colour) {
  this.name = name;
  this.surname = surname;
  this.age = function(age) {
    this.age = age;
  };
  this.favourite_colour = favourite_colour;
};

var person_3rd_Plamen = new person_3rd("Plamen", "Dobrev", 14, "blue");
person_3rd_Plamen.age(15);
document.write(person_3rd_Plamen.name + "<br />" + person_3rd_Plamen.surname + "<br />" + person_3rd_Plamen.age + "<br />" + person_3rd_Plamen.favourite_colour);



function person_4th(name, surname, age, favourite_colour) {
  this.name = name;
  this.surname = surname;
  this.age = new_age;
  this.favourite_colour = favourite_colour;
};

function new_age() {
  return 15;
};

var person_4th_Plamen = new person_4th("Plamen", "Dobrev", 14, "blue");
document.write(person_4th_Plamen.name + "<br />" + person_4th_Plamen.surname + "<br />" + person_4th_Plamen.age + "<br />" + person_4th_Plamen.favourite_colour);

Answer 1

尝试这样的理解：

function Person() {
  this.name;
  this.surname;
  this.age;
  this.favourite_colour;
  this.assign = function(n, s, a, fc) {
    this.name = n;
    this.surname = s;
    this.age = a;
    this.favourite_colour = fc;
  }
}
var p = new Person(); // create object
p.assign("Plamen", "Dobrev", "18", "blue")
alert(p.name);

var p = [];
p.push(new Person());
p[0].assign("Plamen", "Dobrev", "18", "blue"); // first index
alert(p[0].age); // get age of first index for example

Answer 2

很高兴您有兴趣学习 Javascript！ 正如@aug 在 cmets 中提到的，浏览器控制台是一个很好的工具，可以找出问题所在。在这种情况下，您会收到类型错误：Uncaught TypeError: person_2nd_Plamen.new_favourite_color is not a function

在这种情况下，您在不同的地方拼写了不同的 color。 有时您拼写为color，但有时拼写为colour。

function person_2nd(name, surname, age, favourite_colour) {
  this.name = name;
  this.surname = surname;
  this.age = age;
  this.favourite_colour = favourite_colour;
  this.new_favourite_colour = function(favourite_colour) {
    this.favourite_colour = favourite_colour;
  }
};

var person_2nd_Plamen = new person_2nd("Plamen", "Dobrev", 14, "blue");
person_2nd_Plamen.new_favourite_colour("red");
document.write(
  person_2nd_Plamen.name + "<br />" + 
  person_2nd_Plamen.surname + "<br />" + 
  person_2nd_Plamen.age + "<br />" + 
  person_2nd_Plamen.favourite_colour
);
console.log(person_2nd_Plamen);

Answer 3

普拉门。很高兴您对 Web 开发和 JavaScript 感兴趣，希望您能学到很多东西。

正如一些成员指出的那样，您拼错了“颜色”这个词 - 在浏览器上按 F12 以打开控制台，当出现错误时您会得到有用的提示。您还可以从 JavaScript 代码直接将数据写入控制台：

console.log("Hi, Plamen!");

我们可以在 JavaScript 中做一些非常酷的事情，您的代码很棒，但我们可以整理它并使其更酷。我们的对象函数的伟大之处在于我们真的只需要其中一个。我们可以用它来创建对象的多个实例，你可以有一个 person 函数，像这样：

function person(name, surname, age, favourite_color) {
    this.name = name;
    this.surname = surname;
    this.age = age;
    this.favourite_color = favourite_color;
}

并用它来创建很多人，你从这个对象函数创建的每个人都会继承对象函数的属性和方法。

person_1 = new person("My name", "My surname", 38, "blue");
person_2 = new person("Your name", "Your surname", 123, "magenta");
person_3 = new person("Someone", "else", 4321, "purple");

document.write("Person 1 name: " + person_1.name + " " + person_1.surname);
document.write("Person 2 name: " + person_2.name + " " + person_2.surname);
document.write("Person 3 name: " + person_3.name + " " + person_3.surname);

// Or, view output in console

console.log("Person 1 name: " + person_1.name + " " + person_1.surname);
console.log("Person 2 name: " + person_2.name + " " + person_2.surname);
console.log("Person 3 name: " + person_3.name + " " + person_3.surname);

将函数视为一种模板，可用于创建对象的许多实例。您的实例可以继承方法和属性：

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

    this.changeFavouriteColor = function(color) {
        this.favourite_color = color;
    };

    this.changeAge = function(age) {
        this.age = age;
    };
};

person_1 = new person("me", "misturr", 20, "orange");
person_2 = new person("him", "surrr", 50, "yellow");

person_1.changeAge(21);
person_2.changeFavouriteColor("green");

console.log(`${person_1.name} is ${person_1.age} years old`);
console.log(`${person_2.name}'s favourite color is ${person_2.favourite_color}`);

JavaScript 很酷，希望你玩得开心并学习更多。