Creating javascript objects from different files

I've been trying to do javascript for sometime now, but i want it to be "object-orientated" so I'm trying to create different javascript classes in different files and try to create an object and call it's methods in a different file function, but it doesn't seem to work.

This is what I have so far:

person.js

function Person(name, age, gender)
{
    this.age = age;
    this.name = name;
    this.gender = gender;

    this.job;

    this.setJob = function(job)
    {
        this.job = job;
    }

    this.getAge = function()
    {
        return this.age;
    }

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

    this.getGender = function()
    {
        return this.gender;
    }
}

Job.js

function Job(title)
{
    this.title = title;
    this.description;

    this.setDescription = function(description)
    {
        this.description = description;
    }
}

main.js

function  main()
{
    var employee = new Person("Richard", 23, male);
    document.getElementById("mainBody").innerHTML = employee.getName();
}

index.html

<!DOCTYPE HTML>
<HTML>
<head>
    <title>javascript test</title>
    <script src="main.js" type="javascript"></script>
</head>
<body>
    <p id="mainBody"></p>
</body>
</HTML>

any help or advice would be greatly appreciated.

Many thanks

EDIT: Many thanks for all the answers and suggestions, however, I've included all my javascript files and still it doesn't work...

标签： javascript class object

9条回答

The star\"

2楼-- · 2019-04-06 03:10

Currently JavaScript is not clever enough to find your dependencies without help.

You need:

<!DOCTYPE HTML>
<HTML>
<head>
    <title>javascript test</title>
    <script src="person.js" type="javascript"></script>
    <script src="Job.js" type="javascript"></script>
    <script src="main.js" type="javascript"></script>
</head>
<body>
    <p id="mainBody"></p>
</body>
</HTML>

Note:

If you want on-demand load of the dependencies then you can use AMD (Asynchronous Module Definition) with requirejs or something else.

Using AMD you can define something like:

define(['Job', 'person'], function (job, person) {
    //Define the module value by returning a value.
    return function () {};
});

The define method accepts two arguments: dependencies and function which defines the module. When all dependencies are loaded they are passed as arguments to the function where is the module definition.

One more thing to notice is that Person and Job are not classes. They are just functions (constructor functions) which produces objects based on rules in their definitions.

0人赞添加讨论(0) 举报

甜甜的少女心

3楼-- · 2019-04-06 03:16

Files aren't automatically loaded, you need to add each .js file to the document with script tags and in the right order as well, otherwise you will get errors.

You might want to look into requirejs.org for dependency management, it's the hawtest thing lately untill ES6 becomes mainstream anyways.

0人赞添加讨论(0) 举报

戒情不戒烟

4楼-- · 2019-04-06 03:19

class methods should be defined via prototype so they receive 'this' reference, like that:

Person.prototype.getGender = function()
{
  return this.gender;
};

0人赞添加讨论(0) 举报

▲ chillily

5楼-- · 2019-04-06 03:20

I was having a similar issue and the problem for me stemmed from writing

"script src="Person.js" type="javascript"

instead of

"script src="Person.js" type="text/javascript" in my index.html file

Hope this Helps,

0人赞添加讨论(0) 举报

一纸荒年 Trace。

6楼-- · 2019-04-06 03:21

You need to return the object created by Person in order for it to constitute a new instance of the Person prototype.

return(this);

0人赞添加讨论(0) 举报

放荡不羁爱自由

7楼-- · 2019-04-06 03:21

I see three issues with the code.

The page does not import the proper external Javascript files

<head>
    <title>javascript test</title>
    <script src="job.js" type="javascript"></script>
    <script src="person.js" type="javascript"></script>
    <script src="main.js" type="javascript"></script>
</head>

Male needs to be a String literal

When the interpreter encounters male within the Person constructor it looks for a variable, which it cannot find.

function  main()
{
    var employee = new Person("Richard", 23, "male");
    document.getElementById("mainBody").innerHTML = employee.getName();
}

The code should call the main function.

Without a call to the main function the code is never kicked off.

function  main()
{
    var employee = new Person("Richard", 23, "male");
    document.getElementById("mainBody").innerHTML = employee.getName();
}

main();

Working Example: http://jsfiddle.net/R7Ybn/

0人赞添加讨论(0) 举报

1 2 下一页