面向对象
对象是一个整体，对外提供一些功能和属性，使用对象时只关注对象的提供的功能，不关注对象的内部实现。
面向过程
优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源; 比如单片机、嵌入式开发、 Linux/Unix等一般采用面向过程开发，性能是最重要的因素。
缺点：没有面向对象易维护、易复用、易扩展
面向对象
优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可 以设计出低耦合的系统，使系统 更加灵活、更加易于维护
缺点：性能比面向过程低
面向对象的特点：（封装，继承，多态）
- 抽象：就是建模，抓住核心问题。
- 封装：
使用者：不必考虑内部实现，只考虑内部提供的功能。
创建者：考虑好对外提供的功能，实现内部的代码。 - 继承：从已有的对象上继承出新的对象，新对象具有了老对象的一些功能和特性。
对象的组成：
属性：属于对象的变量
方法：属于对象的函数
this：
每一个函数都具有自己的调用对象。
函数的调用者就是this。
事件：触发事件的对象
eg:
div.onclick = function(){
alert(this);
};
以下函数与面向对象使用的两个例子
普通函数的使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script>
var obj = new Object();
//属性
obj.name = 'zhangsan';
obj.weight = '40kg';
//方法
obj.getName = function(){
console.log('我的名字是'+this.name);
}
obj.getWeight = function(){
console.log('我的体重'+this.weight);
}
//调用
obj.getName();
obj.getWeight();
var obj1 = new Object();
obj1.name = 'lisi';
obj1.weight = '50kg';
obj1.getName = function(){
console.log('我的名字'+this.name);
}
obj1.getWeight = function(){
console.log('我的体重'+this.weight);
}
obj1.getName();
obj1.getWeight();
</script>
</body>
</html>
面向对象编程的使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script>
function MakeStu(name,weight){
//属性
this.name = name;
this.weight = weight;
}
//方法
MakeStu.prototype.getName = function(){
console.log('我的名字是：'+this.name);
}
MakeStu.prototype.getWeight = function(){
console.log('我的体重是：'+this.weight);
}
var obj1 = new MakeStu('zhangsan','40kg');
obj1.getName();
obj1.getWeight();
var obj2 = new MakeStu('lisi','50kg');
obj2.getName();
obj2.getWeight();
console.log(obj1.getName === obj2.getName);//判断两个函数是否相等
</script>
</body>
</html>
原型（prototype）
一个函数可以看成一个类，原型是所有类都有的一个属性，原型的作用就是给这个类的每一个对象都添加一个统一的方法。
原型就是能够统一的给多个对象添加属性或者方法。
类： 模板，在JS中一般称为对象
对象：创建出来的具体的实例， 在JS中一般称为对象实例
面向对象选项卡和普通选项卡例子
普通选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
button{
width:80px;
height:40px;
margin:50px;
}
.active{
background: yellow;
}
div div{
width:200px;
height:200px;
border:1px solid #ccc;
display: none;
}
</style>
</head>
<body>
<div id="tab">
<button class="active">diyi</button>
<button>dier</button>
<button>disan</button>
<div style="display: block">dqw</div>
<div>safsd</div>
<div>gfhrt</div>
</div>
</body>
<script>
let con = document.getElementById('tab');
let button = con.getElementsByTagName('button');
let div = con.getElementsByTagName('div');
for(let i=0;i<button.length;i++){
button[i].index = i;
button[i].onclick = function(){
for(let j=0;j<button.length;j++){
button[j].className = '';
div[j].style.display = 'none';
}
this.className = 'active';
div[this.index].style.display = 'block';
}
}
</script>
</html>
面向选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
button{
width:80px;
height:40px;
margin:50px;
}
.active{
background: yellow;
}
div div{
width:200px;
height:200px;
border:1px solid #ccc;
display: none;
}
</style>
</head>
<body>
<div id="tab">
<button class="active">diyi</button>
<button>dier</button>
<button>disan</button>
<div style="display: block">dqw</div>
<div>safsd</div>
<div>gfhrt</div>
</div>
</body>
<script>
function Tab(id){
_this = this;
this.con = document.getElementById(id);
this.button = this.con.getElementsByTagName('button');
this.div = this.con.getElementsByTagName('div');
for(let i=0;i<this.button.length;i++){
this.button[i].index = i;
this.button[i].onclick = this.fclick;
}
}
Tab.prototype.fclick = function(){
for(let j=0;j<_this.button.length;j++){
_this.button[j].className = '';
_this.div[j].style.display = 'none';
}
this.className = 'active';
_this.div[this.index].style.display = 'block';
}
new Tab('tab');
</script>
</html>
网友评论