1 什么是面向对象？
面向对象（Object Oriented，OO）是软件开发方法。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统，交互式界面，应用结构，应用平台，分布式系统，网络管理结构，CAD技术，人工智能等领域。面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后到产物，是一种高级的编程思想。
面向对象就是一种新的编程模式。
面向过程？把所有的功能都写在一起，逐行实现
面向对象在其它编程语言中普遍使用，Java，PHP，Python
什么是对象？
什么是收音机，对象是一个整体，对外提供一些操作。
什么是面向对象开发？
就是在使用对象时，只关注对象提供的功能，不关注其内部细节。
比如，每次使用封装好的运动框架
注意：面向对象是一种通用思想，并非只在程序中使用，任何事情都可以使用－－－－公司老板分配任务
2面向对象的特点
封装：不考虑内部实现，只考虑功能实现
继承：从已有对象上，继承出新对象
多态：多种形态，一个功能的不同应用场景
3OOA和OOD
OOA面向对象分析：
人类起源：单细胞－－－－人，进化过程中，增加了各种器官，各个器官之间分工协作
为什么统治世界的是人类？－－－－－精密的分工协作
本质：大规模分工，精密协作
面向对象分析：将大问题拆分成小问题，并试图用分工协作来完成的思维方式。
OOD面向对象设计：
1.分析模块后，确定职责
大哥招小弟－－端茶倒水，点烟捶背捏脚
2.确定耦合关系
确定通信关系，如何交流，暗号
弊端：当耦合达到一定程度时，如果换了一个助理，需要重新耦合，资源消耗太大
本质：高内聚低耦合
3.为OOP做准备
对象如何被发明的？
大量信息的处理和加工困难，打包之后，将内容包含在其中。信息传递速度更快，效率更高
面向对象和面向过程的区别
面向对象－－先实现功能，再运行。分工协作，同时发生，解决问题。
面向过程－－一边实现，一边运行。效率低下。
面向对象并不是程序员发明的。在程序中我们叫面向对象（OO），在生活中叫分工协作。
4构造函数的使用
设计模式：
工厂模式：原料、加工、出厂
function createPeople(name,age,like){
var obj = new Object(); //原料
obj.name = name; //加工
obj.age = age;
obj.like = like;
obj.show = function(){
alert(“我叫”+this.name+",今年"+this.age+“岁,喜欢”+this.like)
};
return obj; //出厂
}
var obj = createPeople(“AAA”,23,“LOL”);
var obj2 = createPeople(“BBB”,30,“JAVA”);
obj.show();
obj2.show();
但是这种工厂模式已经被JS抛弃，
//因为JS内置了一种的工厂模式
function CreatPeople(name,age,like){
this.name = name;
this.age = age;
this.like = like;
this.show = function(){
alert("我叫"+this.name+",今年"+this.age+"岁,喜欢"+this.like);
}
}
var obj = new CreatPeople("ABC",20,"PHP");
var obj2 = new CreatPeople("QWE",32,"Python");
obj.show();
obj2.show();
//JS内置的工厂模式比传统的工厂模式更高效，复用性更强。
//JS内置的工厂模式叫构造函数。
5使用构造函数创建对象
function CreatPeople(name,age,like){
this.name = name;
this.age = age;
this.like = like;
this.show = function(){
alert("我叫"+this.name+",今年"+this.age+"岁,喜欢"+this.like);
}
}
var obj = new CreatPeople("ABC",20,"PHP");
var obj2 = new CreatPeople("QWE",32,"Python");
obj.show();
obj2.show();
6原型的概念
在对象中，两个新创建的函数，是不相等的：
var obj1 = {
fn:function(){
alert(1);
}
}
var obj2 = {
fn:function(){
alert(1);
}
}
console.log(obj1.fn == obj2.fn); //false
//在构造函数中，同样属于两个新创建的函数，也是不相等的
function Fn(name){
this.name = name;
this.show = function(){
alert(this.name);
}
}
var obj1 = new Fn("AAA");
var obj2 = new Fn("BBB");
console.log(obj1.show==obj2.show); //false
此时可以看出构造函数的多次创建会产生多个同名函数，造成冗余太多。
//利用原型prototype解决。
function Fn(){}
console.log(Fn.prototype);
//constructor表示当前的函数属于谁
//__proto__ == [[prototype]]，书面用语，表示原型链
var fn1 = new Object();
var fn2 = new Object();
Object.prototype.show = function(){
alert(1);
}
console.log(fn1.show==fn2.show); //ture
此时，任何一个对象的原型上都有了show方法，由此得出，Object.prototype身上的添加的方法，相当于添加到了所有的Object身上。
为了解决构造函数的冗余问题，我们将属性写在构造函数内，方法写在原型中。这是面向对象的编程格式之一。
面向对象的编程格式之一：
1.属性写在构造函数内；
2.方法写在原型中
3.构造函数中的this指向当前函数同名对象
4.原型方法中的this指向当前原型所属的函数同名对象
7 这里给大家介绍一下使用面向对象写的烟花案例（杂乱）
1.先写html结构
一个class为box的div盒子
2.再来书写css样式
<style>
.box {
width: 80%;
height: 800px;
border:5px solid tomato;
margin: 30px auto;
background-color: #333;
position: relative;
}
.fire {
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
}
.sfire {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
}
</style>
这里的fire表示未来点击页面的时候创建的第一个div，sfire表示天上像烟花一样的小div
3 下面来写js部分
<script>
function Tab(options) {
this.x=options.x;
this.y=options.y;
this.box=options.box;
this.arr=[];
this.create();
}
Tab.prototype.create=function() {
this.div=document.createElement("div");
this.div.className="fire";
this.div.style.left=this.x + "px";
this.div.style.backgroundColor=randomColor();
this.box.appendChild(this.div);
this.go();
};
Tab.prototype.go=function() {
var that=this;
move(this.div,{
top:this.y
},function() {
that.div.remove();
that.out();
});
};
Tab.prototype.out=function() {
var num=random(20,35);
for(var i=0;i<num;i++) {
var sdiv=document.createElement("div");
sdiv.className="sfire";
sdiv.style.backgroundColor=randomColor();
sdiv.style.left=this.x+"px";
sdiv.style.top=this.y+"px";
this.box.appendChild(sdiv);
this.arr.push(sdiv);
var l=random(0,this.box.offsetWidth-sdiv.offsetWidth);
var t=random(0,this.box.offsetHeight-sdiv.offsetHeight);
//1.匿名函数
// ;(function(div) {
// move(div,{
// left:l,
// top:t
// },function() {
// div.remove();
// })
// })(sdiv);
//let
//bind
// move(sdiv,{
// left:l,
// top:t
// },function() {
// this.remove();
// }.bind(sdiv))
//数组
var that=this;
move(sdiv,{
left:l,
top:t
},function() {
for(var i=0;i<that.arr.length;i++) {
that.arr[i].remove();
}
})
}
};
// 范围随机数
function random(max,min){
return Math.round(Math.random()*(max-min)+min);
}
// 随机颜色
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}
var obox=document.querySelector(".box");
obox.onclick=function(eve) {
var e=eve || window.event;
new Tab({
x: e.offsetX,
y: e.offsetY,
box: obox
});
}
</script>
在这里我列出了四种让升空的小div消失的方式
1.匿名函数
2.let Tab.prototype.out=function() 中的var sdiv=document.createElement(“div”)改为let即可，因为let有块级作用域
3.bind，改变this指向
4.数组，提前声明一个数组用来存放小div
在其中我还用到了一个函数，是我自己封装的，其中的move函数，也就是多元素多属性缓冲运动的封装
下面我给大家看一下
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
在这还要用到getStyle函数，它是获取非行内样式的兼容写法。
8 这里给大家介绍一下使用面向对象写的烟花案例（圆形）
圆形烟花基本没什么改动，升空后小div的运动改为圆周运动就好啦
下面是修改的地方代码
var l=Math.round(Math.sin(Math.PI/180*(360/num)*i)*r) + this.x;
var t=Math.round(Math.cos(Math.PI/180*(360/num)*i)*r) + this.y;
2273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
