찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JS 객체지향 프로그래밍의 캡슐화 분석

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

不言
不言원래의
2018-08-01 16:07:372233검색

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Java JavaScript jquery es6 Object 面向对象 封装 构造函数 指针 class var JS 对象 constructor this prototype
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery는 자체 호출 익명 함수를 어떻게 호출합니까?다음 기사：jQuery는 자체 호출 익명 함수를 어떻게 호출합니까?

관련 기사

더보기