検索

ホームページ  >  記事  >  ウェブフロントエンド  >  JS オブジェクト指向プログラミングにおけるカプセル化の分析

JS オブジェクト指向プログラミングにおけるカプセル化の分析

不言
不言オリジナル
2018-08-01 16:07:372187ブラウズ

この記事では、JS オブジェクト指向プログラミングにおけるカプセル化の分析について説明します。必要な方は参考にしていただければ幸いです。

C++ や Java などのよく知られたオブジェクト指向言語にはすべてクラスの概念があります。たとえば、Student は学生のタイプを表します。ですが、特定の A 学生を表すものではなく、インスタンスは、zhangsan、lisi など、この型に基づいて作成された特定のオブジェクトであり、クラスによって生成されたオブジェクトを具体化します。抽象テンプレートから具体性へのプロセスをクラスベースのオブジェクト指向アプローチと呼びますが、 JavaScript にはクラスという概念がありません。プロトタイプベースのオブジェクト指向アプローチです。 /strong> (Es6 では class が追加されていますが、本質はプロトタイプ メソッドをカプセル化することです)。まとめると、以下の 2 点です。 Student表示学生这种类型，而不表示任何具体的某个学生，而实例就是根据这个类型创建的一个具体的对象，比如zhangsan、lisi，由类生成对象体现了抽象模板到具体化的过程，这叫做基于类的面向对象方式，而 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

  • クラスベースのオブジェクト指向アプローチでは、オブジェクト (オブジェクト) はクラス (クラス) に依存して生成されます。 🎜
  • 🎜 プロトタイプベースのオブジェクト指向アプローチでは、オブジェクトはコンストラクターとプロトタイプに依存して構築されます。 🎜
🎜 オブジェクト指向言語の最初の機能は間違いなくカプセル化です。JS では、カプセル化のプロセスは、いくつかのプロパティとメソッドをオブジェクトに「ラップ」することです。プロパティとメソッドをカプセル化するのか、それともオブジェクトを作成するのか (以降、オブジェクトの作成について説明します)。以下を順を追って説明します。 🎜🎜 オブジェクト リテラル --> ファクトリ パターン --> プロトタイプ パターン --> コンストラクター + プロトタイプ モデル🎜

オブジェクト リテラル

🎜JS でオブジェクトを作成するには 2 つの独自の方法があります: 🎜
  • 🎜オブジェクト リテラル金額🎜
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
  • 🎜Object インスタンスに属性メソッドを追加します🎜
Object.getPrototypeOf(person1);
  • 🎜長所: コードがシンプルです🎜
  • 🎜短所: 複数のオブジェクトを作成すると大量のコードが生成され、記述するのが面倒です。インスタンスやプロトタイプという概念はありません。 🎜
  • 🎜解決策: 工場出荷時のパターン。 🎜

ファクトリー パターン

🎜 ファクトリ パターンは、プログラミング分野ではよく知られたデザイン パターンであり、特定のオブジェクトを作成するプロセスを抽象化します。 JS で関数を作成し、この関数にオブジェクトの新規作成、オブジェクトの属性の追加、オブジェクトの返却の処理を含めます。ユーザーは、オブジェクトの作成の詳細を意識することなく、関数を呼び出すだけでオブジェクトを生成できます。これをファクトリと呼びます。パターン: 🎜
Person.prototype.isPrototypeOf(person1);
  • 🎜利点: ファクトリ パターンはオブジェクト リテラル作成オブジェクト コードの重複の問題を解決し、同じ API を使用して同様のオブジェクトを作成できます。 🎜
  • 🎜欠点: 関数を呼び出してオブジェクトを作成するため、オブジェクトの種類を識別できません。 🎜
  • 🎜解決策: コンストラクター 🎜

コンストラクター

🎜 コンストラクターと JS の他の関数の唯一の違いは、呼び出し方法が異なることです。 new 演算子を介して呼び出される限り、任意の関数をコンストラクターとして使用できます。次の例を見てください。 🎜
person1.hasOwnProperty("name");
🎜 インスタンスは、コンストラクター new を通じて 4 つのステップを実行します。 🎜
  1. 🎜 新しいオブジェクトを作成します。
  2. 🎜コンストラクター内の this を新しいオブジェクトにバインドします 🎜
  3. 🎜新しいオブジェクトにプロパティとメソッドを追加します。 >🎜新しいオブジェクトを返します (JS エンジンはデフォルトで return this; を追加します)。 🎜
🎜 コンストラクターを通じて作成されたオブジェクトには、コンストラクター自体へのポインターである constructor 属性があるため、オブジェクトの型を検出できます。 :🎜
"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
🎜greeting() は同じコンストラクターで定義されていますが、異なるインスタンス上の同じ名前の関数は等しくありません。つまり、2 つの関数は等しくありません。同じ名前の関数は等しくありません。メモリ空間に一貫性がないため、コンストラクター内のメソッドをインスタンスごとに再作成する必要があります。これは明らかに費用対効果がありません。 🎜
  • 🎜利点: 類似したオブジェクトの作成の問題を解決し、オブジェクトの種類を検出できます。 🎜
  • 🎜欠点: コンストラクター メソッドはインスタンスごとに 1 回作成する必要があります。 🎜
  • 🎜解決策: プロトタイプ モード。 🎜

プロトタイプ モード

🎜 最後に、JS の各コンストラクターにはポインターである prototype 属性があります。このコンストラクターのすべてのインスタンスで共有されるプロパティとメソッドを含むプロトタイプ オブジェクトに変換します。インスタンス オブジェクトには <em>proto</em> 属性があり、プロトタイプ オブジェクト、つまり constructor.prototype == プロトタイプ オブジェクト == object._proto_ にすると、オブジェクトはプロトタイプ オブジェクトのプロパティとメソッドを取得できます。同時に、すべてのオブジェクトは <code>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 中国語 Web サイトの他の関連記事を参照してください。

Java JavaScript jquery es6 Object 面向对象 封装 构造函数 指针 class var JS 对象 constructor this prototype
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQuery はどのように自己呼び出し匿名関数を呼び出すのでしょうか?次の記事：jQuery はどのように自己呼び出し匿名関数を呼び出すのでしょうか?

関連記事

続きを見る