面向对象
面向对象编程,对需求做出分析进行分析,耦合关系设计
例:
轮播图设计:功能:
事件绑定功能:在事件里更改下标
下标更改功能
动画切换功能:根据下标的更改去进行动画
构造函数
构造函数就是被new调用的普通函数,普通函数和构造函数早声明阶段是没有区别的
区别构造函数的主要方式是命名:构造函数的首字母一般都大写
// Object Array Number
作用
构造函数的 作用就是构造一个空对象
function F00(){
}
构造函数构造出来的对象是数据和算法的载体
属性,方法
{a:10, foo:function(){} }
我们把构造函数构造出来的对象称为 实例对象
构造函数的抽象的 :对程序的预设置
对象是具体的: 传入数据,构造函数会帮助我们完成具体数据的计算和承载
构造函数的使用
1.向对象写入属性的方式
//一般写入
var obj= { }
obj.a = 10
obj.b= function(){
}
2.构造函数写入属性的方式
function Foo(){
// this :指向了构造函数创造出来的实例对象
this.a = 10;
this.b = 20;
var foo = new Foo()
console.log(foo)
//结果
Foo{a:10,b:20}
那么构造函数在调用的时候干了什么
function Foo(){
//创建了一个空对象Foo{} 也就是foo的实例对象
// 2. 把this指向绑定给实例对象;
// 结论 : 在构造函数之中可以直接通过this访问实例对象;
// 3. 在函数的最后方默认返回了这个实例对象;
}
这种设计模式叫做
工厂模式
原料: 实例对象:(也就是一个空对象,数据的载体)
加工: 通过空对象的访问,想空对象中添加属性和方法
出厂: 在外部可以访问的数据
是具有复用性的,传入不同数据可以导出不同的产品
(一个工厂不可能只会做一个产品,加工模式是固定的但是你的传入的原材料,数据是可以变化的就像是一个做睡衣的工厂, 你传入的原材料是羊毛,那么做出来的就是用羊毛做的睡衣,给的是涤纶那就是涤纶的睡衣)
function Foo( a , poo ){
this.a = a;
this.poo = poo
}
var foo1 = new Foo( 20 , function(){ console.log(1)});
var foo2 = new Foo( 30 , function(){ console.log(2)});
console.log(foo1, foo2);
foo1.poo()
foo2.poo()
//结果
Foo{a:20,poo:f}
Foo{a:30,poo:f}
1
2
总结
1.任何的函数都可以是构造函数
2.构造函数内部用this去访问实例对象
3.构造函数是工厂模式可以去批量加工数据
4.构造函数执行时分为三个步骤:
- 创建一个实例对象
- 把this指向实例对象
- 把this指向返回
例子
function CreatePersonMsg( name , age , hobby ){
this.name = name;
this.age = age;
this.hobby = hobby;
// 配套功能 :
// show是一个函数;
// 这个函数想要展现实例对象之中的数据 ;
this.show = function(){
console.log("大噶好我是"+this.name , "我的年龄是"+this.age ,
"我的爱好是" + this.hobby );
}
}
//分析一下this指向,CreatePersonMsg里的this指向实例对象,
//show方法里的 this是谁调用show就指向谁
//所以这里CreatePersonMsg里的this都是指向实例对象也就是下面的p1,p2,p3
var p1 = new CreatePersonMsg( "熊大" , 7 , "打游戏");
var p2 = new CreatePersonMsg( "熊二" , 6 , "吃蜂蜜" );
var p3 = new CreatePersonMsg( "光头强" , 40 , "砍树" );
p1.show();
在上面的批量创建程序是有缺陷的,show方法是共用的不需要每次调用都创建一个不同的show,创建多个show浪费内存
原型链:
function Foo(){
this.show = function(){
}
}
var foo1 = new Foo();
var foo2 = new Foo();
console.log(foo1 === foo2);//false
// 功能是不会被更改的;
// 功能是为了服务数据而生的;
// 实例对象上的功能(函数)会被重复创建, 这个重复创建是没有必要的;
console.log(foo1.show === foo2.show)//true
//在面向对象整个编程过程之中来说 :
//实例对象负责承载数据;
//原型对象负责承载方法;
//原型对象 : 是函数的伴生体;
//一个函数被声明了,那么这个函数一定有配套的原型对象;
//原型对象可以用来存储数据和方法。不过一般都用来存储方法
//访问原型对象 :
//构造函数访问: xxx(函数名).prototype
//实例对象访问: xxx(实例对象名).__proto__
使用原型对象解决上面的show重复调用问题
function CreatePersonMsg( name , age , hobby ){
this.name = name;
this.age = age;
this.hobby = hobby;
// 配套功能 :
// show是一个函数;
// 这个函数想要展现实例对象之中的数据 ;
}
CreatePersonMsg.prototype.show = function(){
console.log("大噶好我是"+this.name , "我的年龄是"+this.age ,
"我的爱好是" + this.hobby );
}
//分析一下this指向,CreatePersonMsg里的this指向实例对象,
//show方法里的 this是谁调用show就指向谁
//所以这里CreatePersonMsg里的this都是指向实例对象也就是下面的p1,p2,p3
var p1 = new CreatePersonMsg( "熊大" , 7 , "打游戏");
var p2 = new CreatePersonMsg( "熊二" , 6 , "吃蜂蜜" );
var p3 = new CreatePersonMsg( "光头强" , 40 , "砍树" );
p1.show();
/*找寻show方法过程,从内到外查找,在自己身上没找到就去自己的原型上找,
找到了就直接调用没找到就继续去下一个原型上找,
直到找到show方法进行调用。如果在找到最后的object.prototyep都没有找到
那么得到的结果就是undefined
这一套数据查询机制 => 原型链;*/
//现在的show方法一样可以由实例对象调用
//两个实例对象调用的show方法都是同一个show方法不存在浪费内存