浅谈JS中的面向对象
本文主要说说本人在JS中对面向对象的理解。
计算机编程语言主要分为面向过程式编程和面向对象式编程,面向对象编程最大的特点就是类,比如人有姓名,性别,年龄,行为等,电脑有型号,重量等,类就是将一类事物的共通点放到一个集合中。
JS中本身没有class(ES6以前,ES6引入了class,本文主要针对ES6以前进行讲解),但是有类class的概念,就是我们常说的构造函数,本质上是构造函数中的prototype起到类似class的作用。
1、首先我们来看看怎么构建一个对象。
var person = new Object();
//给person属性
person.name = "Lily";
person.age = 17;
//给person创建一个走路的方法
person.walk = function () {
alert(this.name + "正在走路");
};
//调用person对象
person.walk(); //Lily正在走路
但是这种创建方式有一个很大的缺点,就是如果有多个类似的对象,会产生大量重复性代码,怎么解决呢?后来有人创造了工厂模式。
2、工厂模式
function person (name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.walk = function () {
alert(this.name + "正在走路");
};
obj.eat = function () {
alert(this.name + "正在吃饭");
};
return obj;
}
// 调用
person('Lily', 17).walk(); //Lily正在走路
person('Bob', 15).eat(); //Bob正在吃饭
工厂模式有效的解决了代码冗余的问题,但是又产生了一个新的问题,就拿该实例来说,Bob吃饭时间在8点,但是Lily这个点正在走路,那么注定了有一个方法是多余的,这还是一个简单的实例,如果是一个复杂的对象,有十几个方法,但是实际用到的只有其中的一个方法,这就浪费内存资源了,因为每个对象在实例化的时候都会创建工厂中的属性和方法。解决方法我们第四点来讲,我们先讲讲构建函数的模式来构建对象。
3、构建函数模式
function Person (name, age) {
this.name = name;
this.age = age;
this.walk = function () {
alert(this.name + "正在走路");
};
this.eat = function () {
alert(this.name + "正在吃饭");
};
}
//调用方式
var boy = new Person("Bob", 15);
var girl = new Person("Lily", 17);
boy.walk(); //Bob正在走路
girl.eat(); //Bob正在吃饭
这种模式与工厂模式相比,有几个明显的特点
1、不显式的创建对象(即不new Object()),而是通过this,this在这里表示调用者。
2、不用return返回
3、使用new的方式调用。
缺点:还是没有解决工厂模式存在的内存浪费问题。
有人会说构建函数模式和普通函数有什么区别呢?
构建函数模式就是用函数的方式来体现对象,最大的区别就是调用方式,构建函数的调用方式是用new来实例化(new Person()),而普通函数就是直接调用函数名(person())。
4、原型模式
function Person (name, age) {
Person.prototype.name = name;
Person.prototype.age = age;
Person.prototype.talk = function () {
alert(this.name + "正在说话");
}
}
Person.prototype.walk = function () {
alert(this.name + "正在走路");
}
// 调用
var boy = new Person("Bob", 15);
boy.walk();//Bob正在走路
原型模式我比较喜欢称之为(混合模式),该模式有效的解决了内存浪费问题,将通用的方法或属性放到Person中,将实例的特别属性单独定义。