JAVASCRIPT物件導向之路

網上找了些容易明白的例子... (全是其他人的, 只是節錄而已)

入門的, 有以下例子:

function Student(name, gender, age, grade, teacher)
{
	this.name = name;
	this.gender = gender;
	this.age = age;
	this.grade = grade;
	this.teacher = teacher;
}

var bob = new Student("bob", "male", 15, 10, "Marlow");
alert(bob.age); //Outputs 15

var susan = new Student("susan", "female", 10, 5, "Gresham");
alert(susan.gender); //Outputs 'female'

 

正常的OOP, 很多時候, 也會有些FUNCTION, 而我們要用OBJECT裡的FUNCTION, 該如下:

function Student(name, gender, age, grade, teacher)
{
	var studentName = name;
	var studentGender = gender;
	var studentGrade = grade;
	var studentTeacher = teacher;
	var studentAge = age;

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

	this.setAge = function(val)
	{
		studentAge = Math.abs(val); //Keep age positive using absolute value
	};
}

var bob = new Student("bob", "male", 15, 10, "Marlow");
alert(bob.studentAge); //undefined, since age is privately protected in the class definition

alert(bob.getAge()); //Outputs 15
bob.setAge(-20);
alert(bob.getAge()); //Outputs 20

還有一個平時未必會想到的方法: PROPERTIES...

function Student( properties )
{
	var $this = this;  //Store class scope into a variable named $this

	//Iterate through the properties of the object
	for ( var i in properties )
	{

		(function(i)
		{
			// Dynamically create an accessor method
			$this[ "get" + i ] = function()
			{
				return properties[i];
			};
		})(i);
	}
}

// Create a new user object instance and pass in an object of
// properties to seed it with
var student = new Student(
{
	Name: "Bob",
	Age: 15,
	Gender: "male"
});

alert(student.name); //Undefined due to the property being private

alert(student.getName()); //Outputs "Bob"
alert(student.getAge()); //Outputs 15
alert(student.getGender()); //Outputs "male"

 再給一個現實使用的PROPERTIES例子:

function Worker()
{
	this.getMethods = function(properties, scope)
	{
		var $this = scope;  //Store class scope into a variable named $this

		//Iterate through the properties of the object
		for ( var i in properties )
		{

			(function(i)
			{
				// Dynamically create an accessor method
				$this[ "get" + i ] = function()
				{
					return properties[i];
				};

			//Dynamically create a mutation method that parses for an integer and
			//Ensures it is positive.
			$this[ "set" + i ] = function(val)
			{
				if(isNaN(val))
				{
					properties[i] = val;
				}
				else
				{
					properties[i] = Math.abs(val);
				}
			};
			})(i);
		}
	};
}

//The CommissionWorker "subclass" and WageWorker "subclass"
//inherit the properties and methods of Worker.
CommissionWorker.prototype = new Worker();
WageWorker.prototype = new Worker();

function CommissionWorker(properties)
{
	this.getMethods(properties, this);

	//Calculates income
	this.getIncome = function()
	{
		return properties.Sales * properties.Commission;
	}
}

//Expects the following properties: wage, hoursPerWeek, weeksPerYear
function WageWorker(properties)
{
	this.getMethods(properties, this);

	//Calculates income
	this.getIncome = function()
	{
		return properties.Wage * properties.HoursPerWeek * properties.WeeksPerYear;
	}
}

var worker = new WageWorker(
{
	Name: "Bob",
	Wage: 10,
	HoursPerWeek: 40,
	WeeksPerYear: 48
});

alert(worker.wage); //Undefined. wage is a private property.

worker.setWage(20);
alert(worker.getName());   //Outputs "Bob"
alert(worker.getIncome()); //Outputs 38,400 (20*40*48)

var worker2 = new CommissionWorker(
{
	Name: "Sue",
	Commission: .2,
	Sales: 40000
});
alert(worker2.getName());   //Outputs "Sue"
alert(worker2.getIncome()); //Outputs 8000 (2% times 40,000)