第10天 javascript 高階學習
1.javascript 的組成
1.1ECMASCRIPT語法
1.2.DOM
1.3.BOM
2.JS基本資料型別：boolean ,undefine, string,number,null複雜型別Object;
3.建立物件方式
3.1建立物件的三種方式
// 字面量建立:
var per1={
name:"張三",
age:"10",
eat:function(){
console.log("吃");
},
sleep:function(){
console.log("睡覺");
}
};
// 通過建構函式建立
function Person(){}
var per2=new Object();
per2.name="張三";
per2.eat=function(){
console.log("吃麵包");
}
per2.sleep=function(){
console.log("誰");
}
console.log(per1 instanceof Person);
// 自定義建構函式,可以找到物件的具體型別
function Person(name,age){
this.name=name;
this.age=age;
this.eat=function(){
console.log("吃");
}
}
var per3=new Person("Man",10);
3.2 工廠模式建立物件 （不常用）
4. 面向物件與面向過程兩種方法對比切換 div 顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--<script>
// window.onload=function(){
document.getElementById("but").onclick=function(){
document.getElementById("div").style.backgroundColor="red";
};
// }
</script>-->
<input type="button" name="button" id="but" value="顯示效果" />
<div id="div"></div>
<script>
function ChangeStyle(but,div,color){
this.but=document.getElementById(but);
this.div=document.getElementById(div);
this.color=color;
}
ChangeStyle.prototype.changeColor=function(){
var that=this;
this.but.onclick=function(){
that.div.style.backgroundColor=that.color;
};
};
var ts=new ChangeStyle("but","div","red");
ts.changeColor();
</script>
</body>
</html>
5.原型的簡單寫法
5.1 錯誤版：function Person(age,name){
this.name=name;
this.age=age;
};
// 字面量方式
Person.prototype={
height:"180",
eat:function(){
console.log("xjbskdv");
}
};
var s=new Person("10","Maik");
s.eat();
// 輸出記憶體地址
console.dir(Person);
console.dir(s);
在Person ,s 的記憶體地址當中沒有constructor建構函式
因此在原型中手動修改構造器的指向。
Person.prototype={
// 手動修改構造器的指向
constructor:Person,
height:"180",
eat:function(){
console.log("xjbskdv");
}
};
s._proto_==Person.prototype (true) 例項物件中的原型指向的是建構函式中的原型。
6.原型鏈
6.1 例項物件中的屬性 若沒有，則會在例項物件的_protype_所指向的原型物件（建構函式中的原型物件）中查詢。
6.2 “一次性函式” （)(); (funtion(){
}());
自呼叫函式 宣告的時候直接呼叫
(function(){
console.log("once");
})();
等價於：
function F(){
console.log("once");
}
F();
可解決函式外命名衝突的問題，將函式內變數和函式外變數隔開。
js是動態型別語言，在將實參賦給形參的過程中，物件之間的傳遞，傳遞的是地址值。
如何把區域性變數變為全域性變數？ 將區域性變數的值賦給window的屬性即可。
功能：生成一個隨機數物件，在頁面中呼叫。（通過自定義函式，將區域性隨機數物件轉換為全域性物件），在頁面中呼叫產生隨機數。隨機產生食物。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#map{
width: 800px;
height: 800px;
background-color: black;
position: relative;
}
#energy{
width:20px;
height: 20px;
background-color: green;
position: absolute;
top:780px;
left: 30px;
}
</style>
</head>
<body>
<div id="map">
<div id="energy">
</div>
</div>
<script src="common.js"></script>
<script>
//生成隨機數物件，全域性使用
(function(win){
function CreatRandom(){
}
CreatRandom.prototype.randomNum=function(){
return Math.floor(Math.random()*780);
}
win.random=new CreatRandom();
})(window);
console.log(random.randomNum());
function ChangeForm(map,energy,json){
this.map=map;
this.energy=energy;
this.json=json;
}
ChangeForm.prototype.init=function(){
for(var i in this.json){
this.energy.style[i]=this.json[i];
}
}
var json={"top":random.randomNum()+"px","left":random.randomNum()+"px"};
var myJson=JSON.stringify(json, null, 2);
console.log(myJson);
var form=new ChangeForm(my$("map"),my$("energy"),json);
form.init();
</script>
</body>
</html>