单体创建对象
面向对象
1、面向过程:所有的工作都是现写现用。
2、面向对象:是一种编程思想,许多功能事先已经编写好了,在使用时,只需要关注功能的运用,而不需要这个功能的具体实现过程。
javascript对象
将相关的变量和函数组合成一个整体,这个整体叫做对象,对象中的变量叫做属性,变量中的函数叫做方法。javascript中的对象类似字典。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单体创建对象</title>
<script type="text/javascript">
var Tom = {
// 属性
name:'tom',
age: 18,
//大括号{}:对象,中括号[]:数组
// this相当于python中的self
// 方法
showName:function () {
alert(this.name);
},
showAge:function () {
alert(this.age);
}
}
//调用属性
alert(Tom.name);
alert(Tom.age);
//调用方法
Tom.showName();
</script>
</head>
<body>
</body>
</html>
工厂模式创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工厂模式创建对象</title>
<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 Ancestor = Person('ancestor',18,'大boss');
Ancestor.showJob();
var SYH = Person('syh',20,程序员'');
SYH.showJob();
</script>
</head>
<body>
</body>
</html>
构造函数(new)
<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>
原型模式(prototype)
<!--作用:节省内存-->
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
/*大伙一起共享的方法或属性 prototype-原型*/
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.showJob = function(){
alert('我的工作是' + this.job);
}
var Lily = new Person('lily',19,'市场鸡');
Lucy.showJob();
Lily.showJob();
console.log(Lucy.showJob == Lily.showJob);//true
</script>