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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容