前端学习:JS(面向对象)代码笔记
创建类和对象
创建对象方式1调用Object函数
<body>
</body>
<script type="text/javascript"> //新建英雄:刘备
var hero=new Object();
hero.name='刘备';
hero.blood=100;
hero.weapon='双股剑';
hero.attack=function(){
return this.name+'使用'+this.weapon+'发起了攻击';
}; alert(hero.attack()); var hero2=new Object();
hero2.name='关羽';
hero2.blood=100;
hero2.weapon='青龙偃月刀';
hero2.attack=function(){
return this.name+'使用'+this.weapon+'发起了攻击';
}; alert(hero2.attack()); </script>
创建对象方式2使用字面形式
<body>
</body>
<script type="text/javascript"> var stu1={
name:'张三',
age:28,
sex:'男',
show: function(){
return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
}
}; alert( stu1.show() ); var stu2={
name:'李四',
age:18,
sex:'女',
show: function(){
return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
}
}; alert( stu2.show() ); </script>
创建对象方式3使用工厂函数创建多个对象
<body>
</body>
<script type="text/javascript"> //形参
var createPerson=function(name,age,sex){
var person = new Object();
person.name=name;
person.age=age;
person.sex=sex;
person.show=function(){
return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
}
return person;
}; var p1=createPerson('张三',18,'男');
var p2=createPerson('李四',19,'男');
var p3=createPerson('王五',20,'男'); alert(p1.show());
alert(p2.show());
alert(p3.show()); </script>
创建对象方式4调用构造函数创建对象
<body>
</body>
<script type="text/javascript"> //定义一个Person类
function Person(name,age,sex){
//this代表的是当前对象 //当前对象的名字=需要设置的名字
this.name=name;
this.age=age;
this.sex=sex; this.show=function(){
return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
} } //创建三个对象
var p1=new Person('张三',27,'男');
var p2=new Person('李四',28,'男');
var p3=new Person('王五',29,'男'); alert(p1.show());
alert(p2.show());
alert(p3.show()); console.log(p1.show===p2.show);
console.log(p1.show===p3.show); </script>
静态成员和实例成员
静态成员和实例成员
<body>
</body>
<script type="text/javascript"> //静态成员 类名.成员名
/*
var MyMath={
PI:3.1415,
MAX:function(){
return 9999;
},
MIN:function(){
return 1;
}
}; console.log(MyMath.PI);
console.log(MyMath.MAX());
console.log(MyMath.MIN());
*/
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //实例成员 对象名.成员名
function Student(name,age,sex){ this.name=name;
this.age=age;
this.sex=sex; this.show=function(){
return 'name='+name+'\nage='+age+'\nsex='+sex;
}
} //通过Student类的构造函数创建一个具体的实例对象
var stu1=new Student('小红帽',18,'女');
var stu2=new Student('大灰狼',28,'男'); console.log('姓名:'+stu1.name );
console.log('姓名:'+stu2.show() ); </script>
原型
使用全局函数
<body> </body>
<script type="text/javascript"> function Student(name,age,sex){ this.name=name;
this.age=age;
this.sex=sex;
this.show=show; }
//全局函数
var show=function(){
return 'name='+name+'\nage='+age+'\nsex='+sex;
}; var stu1=new Student("DICK",22,"男");
var stu2=new Student("DICK",22,"男"); //比较的是这两个对象中show方法保存的内存地址
console.log(stu1.show===stu2.show); //true </script>
使用构造函数的原型解决方法的重复创建问题
<body> </body>
<script type="text/javascript"> //得到一个结论:以后我们在定义一个类的函数的时候,不要定义在该类的构造函数中,应该
//定在该类的构造函数的原型中,这样更加高效一些. //Student类的构造函数
function Student(name,age,sex){ this.name=name;
this.age=age;
this.sex=sex; } //向Student类的构造函数的原型中插入show方法
Student.prototype.show=function(){
return '在原型中生成的: name='+this.name+'\nage='+this.age+'\nsex='+this.sex;
}; var stu1=new Student("DICK",22,"男");
var stu2=new Student("KING",22,"男"); console.log(stu1.show());
console.log(stu2.show()); //比较的是这两个对象中show方法保存的内存地址
console.log(stu1.show===stu2.show); //true </script>
对象的原型
<body>
</body>
<script type="text/javascript"> //Student类的构造函数
function Student(name,age,sex){ this.name=name;
this.age=age;
this.sex=sex;
this.eat=function(){
console.log('我在构造函数中吃东西');
} } Student.prototype.eat=function(){
console.log('我在构造函数的原型中吃东西');
} //构造方法的原型 Student.prototype
//对象的原型 对象名.__proto__
var stu=new Student("KING",22,"男"); //我们发现构造方法的原型和对象的原型指向的是同一个地址
//console.log(stu.__proto__===Student.prototype); //当构造函数中和构造函数的原型中同时定义了同一个方法,这个时候会调用构造函数中的eat方法.
stu.eat(); </script>
属性的查找规则
<body>
</body>
<script type="text/javascript">
//Student类的构造函数
function Student(name,age,sex){ this.name=name;
this.age=age;
this.sex=sex; } //在Student类的构造函数的原型中存入属性
Student.prototype.txt='xxx'; var stu1=new Student("KING",22,"男");
//该段代码并没有修改掉原型中txt的值,是在在stu1对象中新建了一个txt属性=abc
//stu1.txt='abc';
Student.prototype.txt='ABC';
var stu2=new Student("KING",22,"男"); console.log('stu1='+stu1.txt); //abc
console.log('stu2='+stu2.txt); //xxx </script>
在原型中写入多个方法属性-精简写法
<body>
</body>
<script type="text/javascript"> /*
function Person(){ }
Person.prototype.eat=function(){
console.log('eat');
} Person.prototype.run=function(){
console.log('run');
} Person.prototype.sleep=function(){
console.log('sleep');
} Person.prototype.from='地球 '; var p1=new Person();
p1.eat();
p1.run();
p1.sleep();
*/ function Person(){ }
Person.prototype={
from: '地球',
eat: function(){
console.log('eat');
},
run: function(){
console.log('run');
},
sleep: function(){
console.log('sleep');
}
}; var p1=new Person();
p1.eat();
p1.run();
p1.sleep();
alert(p1.from); </script>
原生对象的原型
<body>
</body>
<script type="text/javascript">
//Array类的对象
var arr=[]; console.log(Array.prototype===Array.prototype); //true
// 对象的原型 构造函数的原型
console.log(arr.__proto__===Array.prototype); //true console.log(Object.prototype===Array.prototype); //false </script>
拓展原生对象中原型的方法
<body>
</body>
<script type="text/javascript">
var arr=[21,22,43,67,12,34,20,10];
console.log('排序前: '+arr);
arr.sort();
console.log('排序后: '+arr); //求出数组中所有的偶数的和
//拓展Array类构造函数的原型中的方法: getSum() Array.prototype.getSum=function(){
var sum=0;
for(var i=0;i<this.length;i++){
if(this[i]%2==0){
sum+=this[i];
}
}
return sum;
} //错误的写法！！！！！！
/*
Array.prototype={
getSum:function(){
var sum=0;
for(var i=0;i<this.length;i++){
if(this[i]%2==0){
sum+=this[i];
}
}
return sum;
}
};
*/ console.log(arr.getSum()); </script>
案例：随机生成方块
案例前的练习
Demo01（JS插入与使用）
<body> </body>
<script type="text/javascript" src="index1.js"></script>
<script type="text/javascript" src="index2.js"></script>
<script type="text/javascript" src="index3.js"></script>
<script type="text/javascript"> console.log(num1);
console.log(num2);
console.log(num3);
fn1();
fn2();
fn3();
</script>
index1.js
var num1=111;
function fn1(){
alert('执行了fn1方法');
};
index2.js
var num2=222;
function fn2(){
alert('执行了fn2方法');
};
index3.js
var num3=333;
function fn3(){
alert('执行了fn3方法');
};
index（自调用函数）
<body>
</body> <script type="text/javascript" src="student.js"></script>
<script type="text/javascript" src="superuser.js"></script> <script type="text/javascript"> var stu={
name:'张三',
age:20,
sex:'男孩子'
}; var stu1=new Student(stu);
alert(stu1.show()); </script>
student.js
//自调用函数
(function(){
/*
function Student(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
};
*/ function Student(options){
options=options||{};
this.name=options.name||'学生';
this.age=options.age||18;
this.sex=options.sex||'女'; }; Student.prototype.show=function(){
return "name="+this.name+"\tage="+this.age+"\tsex="+this.sex;
}; //向外界暴露Student类的构造函数
window.Student=Student; })();
superuser.js
(function(){
//超级管理员
function SuperUser(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
};
SuperUser.prototype.show=function(){
return "name="+this.name+"\tage="+this.age+"\tsex="+this.sex;
};
随机生成方块
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
height: 600px;
width:600px;
background-color: #C0C0C0;
}
</style>
</head> <body>
<div id="container">
</div>
</body> <script type="text/javascript" src="tools.js"></script>
<script type="text/javascript" src="box.js"></script>
<script type="text/javascript" src="main.js"></script> </html>
box.js
//自调用函数
(function(){ //新建一个Box类
function Box(map,options){
options=options||{};
this.height=options.height||20;
this.width=options.width||20;
this.x=options.x||0;
this.y=options.y||0;
this.backgroundColor=options.backgroundColor||'red'; //新建一个div标签
this.div=document.createElement('div');
map.appendChild(this.div);
this.map=map; //新建div的标签并且设置样式
this.init(); }; Box.prototype.init=function(){ var div=this.div;
//设置div的样式
div.style.backgroundColor=this.backgroundColor;
div.style.height=this.height+'px';
div.style.width=this.width+'px';
div.style.x=this.x+'px';
div.style.y=this.y+'px';
//让我们新建的格子脱离文档流
div.style.position='absolute'; //随机生成小格子的X轴和Y轴的坐标
this.Random(); }; Box.prototype.Random=function(){ this.div.style.left=Tools.getRandom(1,this.map.offsetWidth/this.width-1)*this.width+'px';
this.div.style.top=Tools.getRandom(1,this.map.offsetHeight/this.height-1)*this.height+'px';
var r=Tools.getRandom(0,255);
var g=Tools.getRandom(0,255);
var b=Tools.getRandom(0,255);
this.div.style.backgroundColor='rgb('+r+','+g+','+b+')'; } //对外暴露Box的构造函数
window.Box=Box; })();
main.js
(function(){
var elements=[];
var container=document.getElementById('container');
for(var i=0;i<;i++){
var box=new Box(container);
elements.push(box);
}
setInterval(function(){
for(var i=0;i<elements.length;i++){
elements[i].Random();
}
},1000);
})();
tools.js
var Tools={
//随机生成[0,600]之间随机数整数
getRandom:function(min,max){
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
};
案例：贪吃蛇
更新中。。。
因为后面蛇的死亡和删除没有做好，之后找时间补充完整。。。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css"> *{
margin: 0px;
padding: 0px;
}
#map{
height: 800px;
width: 800px;
background-color: #C0C0C0;
}
</style>
</head> <body>
<div id="map">
</div>
</body>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript" src="food.js"></script>
<script type="text/javascript" src="snake.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="main.js"></script> </html>
food.js
(function(){
//保存生成的食物的数组
var elements=[];
//新建食物类的构造函数
function Food(map,options){
options=options||{};
this.height=options.height||20;
this.width=options.width||20;
this.x=options.x||0;
this.y=options.y||0;
this.backgroundColor=options.backgroundColor||'red';
//新建一个食物div
this.div=document.createElement('div');
map.appendChild(this.div);
this.map=map;
//将新建的食物存进食物数组中
elements.push(this.div);
//渲染食物的样式
this.render();
}
Food.prototype.render=function(){
this.div.style.height=this.height+'px';
this.div.style.width=this.width+'px';
this.div.style.backgroundColor=this.backgroundColor;
this.div.style.position='absolute';
this.random(map);
}
//给食物随机生成坐标
Food.prototype.random=function(map){
this.div.style.left=Tools.getRandom(0,map.offsetWidth/this.width-1)*this.width+'px';
this.div.style.top=Tools.getRandom(0,map.offsetHeight/this.height-1)*this.height+'px';
};
//删除食物数组中之前生成的食物
function remove(){
for(var i=elements.length-1;i>=0;i--){
elements.splice(elements[i],1);
}
}
//对外暴露食物类的构造函数
window.Food=Food;
})();
game.js
(function(){
//控制整个游戏执行的逻辑
function Game(map){
this.food=new Food(map);
this.snake=new Snake(map);
}
Game.prototype.start=function(){
//将食物和蛇渲染进地图中
this.food.render(this.map);
this.snake.render(this.map);
//让整个蛇按照方向移动
//一旦触碰到墙壁游戏结束
//一旦吃到食物,蛇节部分就要增加一节
};
window.Game=Game;
})();
main.js
var map=document.getElementById('map');
var game=new Game(map);
game.start();
snake.js
(function(){
//保存蛇的数组
var elements=[];
function Snake(map,options){
options=options||{};
this.height=options.height||20;
this.width=options.width||20;
//保存蛇的主体部分
this.body=[
{x:3,y:2,color:'red'},
{x:2,y:2,color:'blue'},
{x:1,y:2,color:'blue'},
];
this.map=map;
//将蛇渲染进地图map
this.render();
}
Snake.prototype.render=function(){
for(var i=0;i<this.body.length;i++){
var div=document.createElement('div');
this.map.appendChild(div);
//将蛇的部分保存到elements数组中
elements.push(div);
div.style.height=this.height+'px';
div.style.width=this.width+'px';
div.style.position='absolute';
div.style.left=this.body[i].x*this.width+'px';
div.style.top=this.body[i].y*this.height+'px';
div.style.backgroundColor=this.body[i].color;
}
};
//对外暴露蛇的构造函数
window.Snake=Snake;
})();
tools.js
var Tools={
//随机生成[0,600]之间随机数整数
getRandom:function(min,max){
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
};