JS 객체지향 프로그래밍의 캡슐화 분석

이 글은 JS 객체지향 프로그래밍의 캡슐화 분석을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

C++, Java 등 잘 알려진 객체지향 언어는 모두 클래스라는 개념을 가지고 있습니다. 예를 들어 Student는 학생의 유형을 나타냅니다. , 그러나 특정 A 학생을 나타내지는 않으며, 인스턴스는 zhangsan, lisi와 같이 이 유형을 기반으로 생성된 특정 개체입니다. 추상적인 템플릿에서 구체성으로 가는 과정을 클래스 기반 객체지향 접근이라고 하며, 자바스크립트에는 클래스 개념이 없습니다. /strong> (Es6에 class가 추가되었지만 핵심은 프로토타입 메소드의 캡슐화입니다). 정리하자면 다음 두 가지 사항입니다. 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에서 객체를 생성하는 두 가지 독창적인 방법이 있습니다: 🎜

• 🎜객체 리터럴 Amount🎜

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를 통해 네 단계를 거칩니다. 🎜

1. 🎜새 개체 만들기;
2. 🎜생성자의 this를 새 객체에 바인딩합니다. 🎜
3. 🎜새 객체에 속성과 메서드를 추가합니다. 🎜
4. 🎜새 객체를 반환합니다(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()은 동일한 생성자에 정의되어 있지만 다른 인스턴스에서 동일한 이름을 가진 함수는 동일하지 않습니다. 동일한 이름을 가진 함수는 동일하지 않습니다. 메모리 공간이 일치하지 않습니다. 즉, 생성자의 메서드를 각 인스턴스에서 다시 만들어야 합니다. 이는 분명히 비용 효율적이지 않습니다. 🎜

• 🎜장점: 유사한 객체 생성 문제를 해결하고 객체 유형을 감지할 수 있습니다. 🎜
• 🎜단점: 생성자 메서드는 각 인스턴스마다 한 번씩 생성되어야 합니다. 🎜
• 🎜해결책: 프로토타입 모드. 🎜

프로토타입 모드

🎜마지막으로 JS의 각 생성자에는 포인터인 prototype 속성이 있습니다. 이 생성자의 모든 인스턴스가 공유하는 속성과 메서드를 포함하는 프로토타입 개체에 연결됩니다. 인스턴스 객체에는 프로토타입 객체, 즉 constructor.prototype == 프로토타입 객체 == object._proto_<em>proto</em> 속성이 있습니다. /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 중국어 웹사이트의 기타 관련 기사를 참조하세요!