1. 程式人生 > >js基於物件程式設計-----new一個建構函式時的四步走

js基於物件程式設計-----new一個建構函式時的四步走

 // 1.函式內部建立一個私有域,悄悄的建立一個區域性變數,是空物件{}
// 2.函式將自己的上下文設定成這個空物件{},也就是將函式中的this表示這個空物件
// 3.函式執行所有語句
// 4.所有的有語句執行完畢後,函式返回這個物件,也就是將自己的this返回
//return 會打斷建構函式的執行,如果返回的是基本型別(int,string,float,null)的話會忽略返回的內容 還是返回this,

//每個函式都有一個prototype屬性,這個prototype不用定義,只要函式寫出來就自動有這個屬性,這個屬性對函式本身沒有任何意義。

每個建構函式的prototype屬性都指向一個物件,當這個建構函式被new時,它的每個例項化物件的__proto__屬性也指向這個物件

 自治

<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript">
function Girl(){
	this.x 		= 0;
	this.status = 0;//1,2,3,4,5,6,7
	this.isMove = true;
	this.speed 	=  _.random(1,10);
	this.dom 	= document.createElement("div");
	this.isMove = true;
	document.body.appendChild(this.dom);
	var self = this;
	self.dom.onclick = function(){
		if(self.isMove){
			clearInterval(self.timer);
			self.isMove = false;
		}else{
			self.move()
			self.isMove = true;
		}
		
	}
	self.move()
}
Girl.prototype.move = function(){
	var self = this;
	self.timer = setInterval(function(){
		self.x  += self.speed;
		self.status++;
		if(self.status > 7){
			self.status = 0;
		}
		self.dom.style.backgroundPosition = -108 * self.status + "px -232px";
		self.dom.style.left = self.x + "px";
		//反應咋dom上
	},200)
}
new Girl()
new Girl()
new Girl()
new Girl()
new Girl()
</script>