HTML 學(xué)習(xí)筆記 May 11，2017 構(gòu)造函數(shù)、成員函數(shù)詳解、object類、閉包、成員函數(shù)再說(shuō)明、聰明的豬小練習(xí)、js超級(jí)瑪麗小游戲、js面向?qū)ο蟮倪M(jìn)一步說(shuō)明
function Person () {
this.name = "小明";
this.age = 900;
}
var p1 = new Person();
p1.abc = function show1() {
window.alert("hello"+this.name);
};
p1.abc(); // 打印出來(lái) hello小明
window.alert(p1.abc); // 打印出來(lái) function show1() {
//window.alert("hello"+this.name);
//} this.name 不會(huì)直接賦值
第二種函數(shù)構(gòu)造方法：
function 類名 （） {
this.屬性；
}
var 對(duì)象名 = new 類名（）；
function 函數(shù)名 （）{
// 執(zhí)行
}
對(duì)象名.屬性名 = 函數(shù)名； // 這樣就相當(dāng)于把函數(shù)賦給 對(duì)象名.屬性名，此時(shí)屬性名就表示一個(gè)函數(shù)。
第二種：
對(duì)象名.屬性名 = function （參數(shù)列表） {
// 代碼
}；
調(diào)用
對(duì)象名.屬性名（實(shí)際參數(shù)）；
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(); // 打印出來(lái) abc 900 undefined undefined
p1.abc("北京","天津"); // 打印出來(lái) abc 900 北京 天津
var p2 = new Person();
window.alert(p1.abc); // 打印出來(lái) function () {window.alert('ok');}
window.alert(p2.abc); // 打印出來(lái) function (v1,v2) {
// window.alert(this.name + " " + this.age + " " + v1 + " " + v2);
//}
添加屬性，調(diào)用是同一個(gè)地址
function Dog() {
}
// 使用prototype[類] 去綁定一個(gè)函數(shù)給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); // 這里打印出來(lái) true (比較的是地址)
// 擴(kuò)展
var dog3 = new Dog();
var dog4 = new Dog();
var dog5 = dog4;
window.alert("dog3==dog4"+(dog3==dog4)); // 打印出來(lái) dog3==dog4false
window.alert("dog4==dog5"+(dog4==dog5)); // 打印出來(lái) dog4==dog5true
① 如果 == 號(hào)的兩邊都是字符串的時(shí)候，則比較內(nèi)容是否相等
② 如果 == 兩邊是數(shù)字，則比較數(shù)字大小是否相等
③ 如果 == 兩邊是 對(duì)象 或者 對(duì)象函數(shù)，則比較地址是否相等
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); // 小狗
● 超級(jí)瑪麗
<!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="測(cè)試" /></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 代碼部分
/游戲區(qū)域/
.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.
*/
// 設(shè)計(jì) Mario 類
function Mario() {
this.x = 50;
this.y = 50;// 向上移動(dòng) 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; }}
}
//創(chuàng)建 Mario 對(duì)象
var mario = new Mario();
//測(cè)試 怎么拿到 css 里邊的數(shù)據(jù)
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
函數(shù)名.call(對(duì)象實(shí)例);
// 這樣調(diào)用,該函數(shù)的 this 就只是 對(duì)象實(shí)例.
var dog = {name:'小明',sayHello: function (a,b) {window.alert("結(jié)果="+(a+b));}};
// 循環(huán)列出 dog 對(duì)象的所有屬性和方法
for (var key in dog) {
window.alert(dog[key]);// 打印出 小明 function (a,b) {window.alert("結(jié)果="+(a+b));}
}
document.write("當(dāng)前瀏覽器 window 對(duì)象有 屬性和方法
");
for (var key in window) {
document.writeln(key + ":" + window[key] + "
"); // 打印出來(lái)的東東太多啦,O(∩_∩)O哈哈~
}
