HTML 學習筆記 May 11，2017 構造函數、成員函數詳解、object類、閉包、成員函數再說明、聰明的豬小練習、js超級瑪麗小游戲、js面向對象的進一步說明
function Person () {
this.name = "小明";
this.age = 900;
}
var p1 = new Person();
p1.abc = function show1() {
window.alert("hello"+this.name);
};
p1.abc(); // 打印出來 hello小明
window.alert(p1.abc); // 打印出來 function show1() {
//window.alert("hello"+this.name);
//} this.name 不會直接賦值
第二種函數構造方法：
function 類名 （） {
this.屬性；
}
var 對象名 = new 類名（）；
function 函數名 （）{
// 執行
}
對象名.屬性名 = 函數名； // 這樣就相當于把函數賦給 對象名.屬性名，此時屬性名就表示一個函數。
第二種：
對象名.屬性名 = function （參數列表） {
// 代碼
}；
調用
對象名.屬性名（實際參數）；
function Person() {
this.name = "abc";
this.age = 900;
this.abc = function (v1,v2) {
window.alert(this.name + " " + this.age + " " + v1 + " " + v2);
}
}
var p1 = new Person();
p1.abc(); // 打印出來 abc 900 undefined undefined
p1.abc("北京","天津"); // 打印出來 abc 900 北京 天津
var p2 = new Person();
window.alert(p1.abc); // 打印出來 function () {window.alert('ok');}
window.alert(p2.abc); // 打印出來 function (v1,v2) {
// window.alert(this.name + " " + this.age + " " + v1 + " " + v2);
//}
添加屬性，調用是同一個地址
function Dog() {
}
// 使用prototype[類] 去綁定一個函數給shout
Dog.prototype.shout = function () {
window.alert('小狗');
}
var dog1 = new Dog();
dog1.shout();
var dog2 = new Dog();
dog2.shout(); // 這里OK
window.alert(dog1.shout==dog2.shout); // 這里打印出來 true (比較的是地址)
// 擴展
var dog3 = new Dog();
var dog4 = new Dog();
var dog5 = dog4;
window.alert("dog3==dog4"+(dog3==dog4)); // 打印出來 dog3==dog4false
window.alert("dog4==dog5"+(dog4==dog5)); // 打印出來 dog4==dog5true
① 如果 == 號的兩邊都是字符串的時候，則比較內容是否相等
② 如果 == 兩邊是數字，則比較數字大小是否相等
③ 如果 == 兩邊是 對象 或者 對象函數，則比較地址是否相等
var i = new Number(10);
// 我們可以給類添加方法
Number.prototype.add = function (a) {
return this+a;
}
window.alert(i.add(10).add(30)); // 這里打印輸出 50
var dog = {name:'小狗',age:8};
window.alert(dog.constructor); // function Object() { [native code] }
window.alert(dog.name); // 小狗
● 超級瑪麗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/Mario.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="js/Mario.js"></script>
<title>Mario小游戲</title>
<script language="javascript" type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div class="gamediv">
</div>
<table class="controlcentes">
<tr><td colspan="3">游戲鍵盤</td></tr>
<tr><td></td><td><input type="button" value="↑" onclick="mario.move(0)"/></td><td></td></tr>
<tr><td><input type="button" value="←" onclick="window.mario.move(3)" /></td><td></td><td><input type="button" value="→" onclick="window.mario.move(1)" /></td></tr>
<tr><td><input type="button" onclick="test()" value="測試" /></td><td><input type="button" value="↓" onclick="window.mario.move(2)" /></td><td></td></tr>
</table>
<div id="div6" style="width: 450px;">
div2
</div>
</body>
</html>
● CSS 代碼部分
/游戲區域/
.gamediv {
width: 500px;
height: 400px;
background-color: pink;
position: absolute;
top:0;
left:0;
}
/游戲控制中心 表格樣式/
.controlcentes {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
top: 400px;
left:0;
}
mymario {
}
div6 {
width: 450px;
height: 200px;
background-color: green;
left: 66px;
top: 600px;
position: absolute;
}
● JS 代碼部分
/**
-
Created by konghuari on 5/11/17.
*/
// 設計 Mario 類
function Mario() {
this.x = 50;
this.y = 50;// 向上移動 0->上 1->右 2->下 3->左
this.move = function (direct) {
// 這里是為了改變 img 的 left 和 top, 我們需要得到 img 元素(元素)
var mymario = document.getElementById('mymario');switch (direct) { case 0: // 向上 var top = mymario.style.top; top = parseInt(top.substr(0,top.length - 2)); mymario.style.top = (top - 10) + "px"; break; case 1: // 向右 // 這里是為了改變 img 的 left 和 top, 我們需要得到 img 元素(元素) //var mymario = document.getElementById('mymario'); var left = mymario.style.left; left = parseInt(left.substr(0,left.length - 2)); mymario.style.left = (left + 10) + "px"; break; case 2: // 向下 var top = mymario.style.top; top = parseInt(top.substr(0,top.length - 2)); mymario.style.top = (top + 10) + "px"; break; case 3: // 向左 var left = mymario.style.left; left = parseInt(left.substr(0,left.length - 2)); mymario.style.left = (left - 10) + "px"; break; }}
}
//創建 Mario 對象
var mario = new Mario();
//測試 怎么拿到 css 里邊的數據
function test() {
var divwidth = document.getElementById("div6");
window.alert(divwidth.offsetLeft);
}
添加屬性新方法
var dog = {name:'小狗',age:8,
fun1:function(){window.alert('hello word')},
fun2:function(){window.alert('OK!')}};
window.alert(dog.constructor); // function Object() { [native code] }
window.alert(dog.fun1); // function(){window.alert('hello word')}
dog.fun2(); // OK!
var dog = {name:'hello'};
function test() {
window.alert(this.name);
}
test(); // 打印出 ""
window.test(); // 打印出 ""
test.call(dog); // 打印出 hello ==>dog.test();
var name = "doubi";
test().call(window); // 打印出 doubi
函數名.call(對象實例);
// 這樣調用,該函數的 this 就只是 對象實例.
var dog = {name:'小明',sayHello: function (a,b) {window.alert("結果="+(a+b));}};
// 循環列出 dog 對象的所有屬性和方法
for (var key in dog) {
window.alert(dog[key]);// 打印出 小明 function (a,b) {window.alert("結果="+(a+b));}
}
document.write("當前瀏覽器 window 對象有 屬性和方法
");
for (var key in window) {
document.writeln(key + ":" + window[key] + "
"); // 打印出來的東東太多啦,O(∩_∩)O哈哈~
}
