面向过程与面向对象编程
1、面向过程：所有的工作都是现写现用。
2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程
javascript对象
将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典
创建对象的方法
1、单体
<script type="text/javascript">
var Tom = {
name : 'tom',
age : 18,
showname : function(){
alert('我的名字叫'+this.name);
},
showage : function(){
alert('我今年'+this.age+'岁');
}
}
</script>
2、工厂模式
<script type="text/javascript">
function Person(name,age,job){
//创建一个空对象
// var o = new Object();//方式一
var o = {};//方式二
o.name = name;
o.age = age;
o.job = job;
o.showName = function(){
alert(this.name);
}
o.showAge = function(){
alert(this.age);
}
o.showJob = function(){
alert(this.job);
}
return o;
}
var Tom = Person('tom',18,'程序猿');
Tom.showJob();
var Jack = Person('jack',19,'攻城狮');
Jack.showJob();
</script>
3、构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数</title>
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showName = function(){
alert(this.name);
}
this.showAge = function(){
alert(this.age);
}
this.showJob = function(){
alert(this.job);
}
}
//new的作用就相当于工厂模式中最开始创建了一个空对象，最后把对象返回
var Bob = new Person('bob',18,'产品汪');
Bob.showJob();
var Alex = new Person('alex',19,'运营喵');
Alex.showJob();
alert(Bob.showName == Alex.showName);//false
</script>
</head>
<body>
</body>
</html>
4、原型模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型模式</title>
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
Person.prototype.showName = function(){
alert(this.name);
}
Person.prototype.showAge = function(){
alert(this.age);
}
Person.prototype.showJob = function(){
alert(this.job);
}
}
//先去自己的对象中找showName函数，再去构造函数的原型找
var Lucy = new Person('lucy',18,'测试鼠');
//重写自身对象中的方法，不会影响其它对象
Lucy.showName = function(){
alert('我的名字是' + this.name);
}
Lucy.showName();//我的名字是lucy
var Lily = new Person('lily',19,'市场鸡');
Lily.showName();//lily
alert(Lucy.showName == Lily.showName);//false
</script>
</head>
<body>
</body>
</html>
网友评论