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

时间:2018-11-15 23:04:52

标签: javascript function object methods

我现在正在使用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);

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

您有兴趣学习Javascript非常棒! 就像评论中提到的@aug一样,浏览器控制台是找出问题所在的好工具。在这种情况下,您会遇到类型错误:,

在这种情况下,您在不同地方拼写的Uncaught TypeError: person_2nd_Plamen.new_favourite_color is not a function拼写不同。 有时您拼写了color,但有时却拼写了color

colour

答案 2 :(得分:0)

P。很高兴您对Web开发和JavaScript感兴趣,希望您能学到很多。

正如一些成员所指出的那样,您拼写了“ color”一词-在浏览器中按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非常酷,希望您玩得开心,了解更多。