视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS面向对象编程中封装的解析
2020-11-27 19:32:57 责编:小采
文档


这篇文章给大家介绍的内容是关于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属性,这个属性是一个指针,指向原型对象,而这个原型对象包含了这个构造函数所有实例共享的属性和方法。而实例对象中有一个proto属性,它指向原型对象,也就是构造函数.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定义变量的区别,举例说明

    下载本文
    显示全文
    专题