首页 > web前端 > js教程 > JS面向对象编程中封装的解析

JS面向对象编程中封装的解析

不言
发布: 2018-08-01 16:07:37
原创
2215 人浏览过

这篇文章给大家介绍的内容是关于JS面向对象编程中封装的解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

我们所熟知的面向对象语言如 C++、Java 都有类的的概念,类是实例的类型模板,比如Student表示学生这种类型,而不表示任何具体的某个学生,而实例就是根据这个类型创建的一个具体的对象,比如zhangsanlisi,由类生成对象体现了抽象模板到具体化的过程,这叫做基于类的面向对象方式,而 JavaScript 没有类的概念,是基于原型的面向对象方式(虽然 Es6 增加了 class,实质是对原型方式的封装)。总结起来就是以下两点:

  • 在基于类的面向对象方式中,对象(object)依靠类(class)来产生。

  • 在基于原型的面向对象方式中,对象(object)则是依靠构造函数(constructor)和原型(prototype)构造出来的。

面向对象语言的第一个特性毫无疑问是封装,在 JS 中,封装的过程就是把一些属性和方法放到对象中“包裹”起来,那么我们要怎么去封装属性和方法,或者说怎么去创建对象呢(后文统一说创建对象)?下面用逐步推进的方式阐述:

对象字面量 --> 工厂模式 --> 构造函数 --> 原型模式 --> 构造函数+原型模

对象字面量

JS中创建对象最原始的方式有两种:

  • 对象字面量

var  person = {
    name: "leon",
    age: "20",

    greeting: function() {
      alert('Hi!');
    }
}
登录后复制
  • Object实例添加属性方法

var person = new Object();
person.name = "leon";
person.age = "20";

person.greeting = function() {
  alert('Hi!');
};
登录后复制
  • 优点:代码简单

  • 缺点: 创建多个对象会产生大量的代码,编写麻烦,且并没有实例与原型的概念。

  • 解决办法:工厂模式。

工厂模式

工厂模式是编程领域一种广为人知的设计模式,它抽象了创建具体对象的过程。JS 中创建一个函数,把创建新对象、添加对象属性、返回对象的过程放到这个函数中,用户只需调用函数来生成对象而无需关注对象创建细节,这叫工厂模式:

function createPerson(name, age) {
  var person = new Object();
  person.name = name;
  person.age = age;

  person.greeting = function() {
    alert('Hi!');
  };
}

var person1 = createPerson("leon", "20");
登录后复制
  • 优点:工厂模式解决了对象字面量创建对象代码重复问题,创建相似对象可以使用同一API。

  • 缺点:因为是调用函创建对象,无法识别对象的类型。

  • 解决办法:构造函数

构造函数

JS 中构造函数与其他函数的唯一区别,就在于调用它的方式不同。任何函数,只要通过new 操作符来调用,那它就可以作为构造函数。来看下面的例子:

function Person(name, age) {
  this.name = name;
  this.age = age;
  
  this.greeting = function() {
    alert('Hi!');
  };
  // return this;
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
登录后复制

通过构造函数new一个实例经历了四步:

  1. 创建一个新对象;

  2. 将构造函数内的this绑定到新对象上;

  3. 为新对象添加属性和方法;

  4. 返回新对象(JS 引擎会默认添加 return this;)。

而通过构造函数创建的对象都有一个constructor属性,它是一个指向构造函数本身的指针,因此就可以检测对象的类型啦。:

alert(person1.constructor === Person) //true
alert(person1 instanceof Person) // true
登录后复制

但是仍然存在问题:

alert(person1.greeting == person2.greeting) //false
登录后复制

同一个构造函数中定义了greeting(),而不同实例上的同名函数却是不相等的,意味着这两个同名函数的内存空间不一致,也就是构造函数中的方法要在每个实例上重新创建一次。这显然是不划算的。

  • 优点:解决了类似对象创建问题,且可以检测对象类型。

  • 缺点:构造函数方法要在每个实例上新建一次。

  • 解决办法:原型模式。

原型模式

终于讲到了原型模式,JS 中每个构造函数都有一个prototype属性,这个属性是一个指针,指向原型对象,而这个原型对象包含了这个构造函数所有实例共享的属性和方法。而实例对象中有一个<em>proto</em>属性,它指向原型对象,也就是构造函数.prototype = = 原型对象 == 对象._proto_,那么对象就可以获取到原型对象中的属性和方法啦。同时,所有对象中都有一个constructor属性,原型对象的constructor指向其对应的构造函数。

使用原型,就意味着我们可以把希望实例共享的属性和方法放到原型对象中去,而不是放在构造函数中,这样每一次通过构造函数new一个实例,原型对象中定义的方法都不会重新创建一次。来看下面的例子:

function Person() {
}

Person.prototype.name = "leon";
Person.prototype.age = "20";
Person.prototype.greeting = function() {
  alert('Hi!');
};

var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"leon"
alert(person2.name); //"leon"
alert(person1.greeting == person2.greeting); //true
登录后复制
  • 优点:与单纯使用构造函数不一样,原型对象中的方法不会在实例中重新创建一次,节约内存。

  • 缺点:使用空构造函数,实例 person1 和 person2 的 name都一样了,我们显然不希望所有实例属性方法都一样,它们还是要有自己独有的属性方法。

  • 解决办法:构造函数+原型模式组合使用。

另外 JS 中还定义了一些与原型相关的属性,这里罗列一下:

  • Object.getPrototypeOf(),取得实例的原型对象。

Object.getPrototypeOf(person1);
登录后复制
  • isPrototypeOf(),判断是不是一个实例的原型对象。

Person.prototype.isPrototypeOf(person1);
登录后复制
  • hasOwnProperty(),检测一个属性是否存在于实例中

person1.hasOwnProperty("name");
登录后复制
  • in,判断一个属性是否存在于实例和原型中。

"name" in person1;
登录后复制

构造函数+原型模式

最后一种方式就是组合使用构造函数和原型模式,构造函数用于定义实例属性,而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性,同时又有对共享方法的引用,节省内存。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype = {
  constructor: Person,
  nationality: "China",
  greeting: function() {
    alert(this.name);
  }
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
alert(person1.greeting == person2.greeting) //true
登录后复制

上面代码中用对象字面量的形式重写了原型对象,这样相当于创建了一个新的对象,那么它的constructor属性就会指向Object,这里为了让它继续指向构造函数,显示的写上了constructor: Person

这种构造函数与原型模式混成的模式,是目前在 JS 中使用最为广泛的一种创建对象的方法。

相关文章推荐:

jQuery自调用匿名函数是如何调用的?

JavaScript是否使用var定义变量的区别,举例说明

以上是JS面向对象编程中封装的解析的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板