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哈哈~
}
