浅谈JS中的面向对象

浅谈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中，将实例的特别属性单独定义。