相信不少人也迷惑面向对象是什么?该怎么理解?这是一个令人相当头疼的问题,以前有个大神给我讲过,在这里整理一下,留作纪念,希望能帮到大家,也欢迎各位大牛指导。
所谓对象,无赖的理解就是万物皆对象,一般在大型项目中必须要使用面向对象编程(OOP)。优点是能够更好地建立模型,使代码更加清晰,易于维护,当然逼格也更高了(PS:不管大小公司面试必须会问面向对象,瞬间就觉得高大上了;)一般来说越是逼格高的东西就越是不好理解。面向对象需要较强的思维形象化能力,面向过程易于理解,但是面向对象对于初学者确实有点难以理解;
之前看过一些教程,粗浅的讲了一些,最后总结一下,大致就是,把函数里面的方法转化成属性,函数里面的行为(嵌套的函数)转化为方法,再把事件对象改写成this。但是呢,这样说毕竟有些抽象,过于笼统,所以作为前端小白的我整理了一些关于面向对象的知识。话不多说,下面见代码;
1、首先呢,我们用字面量创建一个对象,如下
var obj = {
name : "abc",
age : 10,
sayName : function(){
alert(this.name);
}
}
如果还有一个 obj1 也想要输出 this.name ,我们也可以再创建一个字面量,但是呢使用字面量创建对象同样有缺点:如果想要创建大量具有相同属性或者方法的对象,需要书写大量重复的代码。 很显然这是不可取的。这是boss和程序员们罪不可忍受的。于是乎就出现了下面这种模式。
2、工厂模式-工厂模式是把一些零件交给工厂,由工厂组装成成品,然后再返回成品。代码如下
function person(name,age,sayName){
var obj = {
name : name,
age : age,
sayName : sayName
};
return obj;
}
person("abc",10,function(){
alert(this.name);
});
工厂模式虽然解决了代码大量重复的问题,但是我们只是知道工厂是个对象,并不知道它是用来做什么的,就是说并不知道工厂(person)是属于谁的实例。于是乎再为了解决这个问题就出现了构造函数(PS:距离面向对象又进了一步)。
3、构造函数模式(构造函数记得第一个字母大写),不需要再考虑工厂是属于哪个的实例。谁创建了新实例,this就是指向谁。
function Person(name,age){
this.name = name;
this.age = age;
this.sayName = function(){
alert(this.name);
}
}
var p = new Person("abc",15);
var p2 = new Person("def",20);
p.sayName();
p2.sayName();
console.log(p.sayName == p2.sayName);
p被称为Person类的一个实例,这个实例可以共享Person类的所有属性或方法.里面的p和p2打印输出并不相等,因为new出来之后是属于两个完全不相同的实例。构造函数同样也会出现很多具有相同作用的方法,但是这些方法没必要。于是又出现了下面的方式。
4、原型+构造函数模式
function Person(name,age){
this.name = name;
this.age = age;
}
// Person.prototype.name = "abc";
// Person.prototype.age = 10;
Person.prototype.sayName = function(){
alert(this.name);
}
var p1=new Person("abc",15);
var p2 = new Person("def",20);
p1.sayName();
p2.sayName();
console.log(p1.sayName == p2.sayName);
console.log(p1.sayName === p2.sayName);
这段代码打印出来,会是两个 true,具有相同的实例。大家看一下,是不是和刚刚开始说的一样呢,方法转化成属性,函数给转化成方法了。这样一层层写下来就非常容易理解了。