1. 程式人生 > >JavaScript之面向物件學習筆記

JavaScript之面向物件學習筆記

JavaScript物件

將相關的變數和函式組合成一個整體,這個整體叫物件,物件中的變數叫做屬性,變數中的函式叫做方法。

JavaScript建立物件的方法

1、單體模式

2、工廠模式

<script type="text/javascript">
	function Person(name,age,job){ 

		var o = new Object();

		o.name = name;
		o.age = age;
		o.job = job; 

		o.showname = function(){
			alert(this.name);
		}

		o.showage = function(){
			alert(this.age);
		}

		o.showjob = function(){
			alert(this.job);
		}

		return o;
	}

	var Tom = Person('tom',18,'engineer');
	var Jack = Person('jack',19,'worker');

	Tom.showjob();
	Jack.showjob();
</script>

3、建構函式

<script type="text/javascript">

	function Person(name,age,job){

		this.name = name;
		this.age = age;
		this.job = job;

		this.showname = function(){
			alert(this.name);
		}

		this.showage = function(){
			alert(this.age);
		}

		this.showjob = function(){
			alert(this.job);
		}
	}

	var Tom = new Person('tom',18,'engineer');
	var Jack = new Person('jack',19,'worker');

	Tom.showjob();
	Jack.showjob();
</script>

4、原型模式

<script type="text/javascript">

	function Person(name,age,job){

		this.name = name;
		this.age = age;
		this.job = job;
	}

	Person.prototype.showname = function(){
		alert(this.name);
	}

	Person.prototype.showage = function(){
		alert(this.age);
	}

	Person.prototype.showjob = function(){
		alert(this.job);
	}

	var Tom = new Person('tom',18,'engineer');
	var Jack = new Person('jack',19,'worker');

	Tom.showjob();
	Jack.showjob();

</script>

JavaScript類的繼承

<script type="text/javascript">

	function Fclass(name,age){

		this.name = name;
		this.age = age;

	}

	Fclass.prototype.showname = function(){
		alert(this.name);
	}

	Fclass.prototype.showage = function(){
		alert(this.age);
	}

	function Sclass(name,age,job){
		Fclass.call(this,name,age);
		this.job = job;
	}

	Sclass.prototype = new Fclass();
	Sclass.prototype.showjob = function(){
		alert(this.job);
	}

	var Tom = new Sclass('tom',18,'engineer');
	Tom.showname();
	Tom.showage();
	Tom.showjob();

</script>