자바스크립트 생성자 및 프로토타입 객체에 대한 심층적인 이해

자바스크립트 생성자 및 프로토타입 객체에 대한 심층적인 이해_javascript 기술

WBOY

풀어 주다： 2016-05-16 16:35:50

원래의

1161명이 탐색했습니다.

일반적으로 사용되는 여러 개체 생성 모드

새 키워드를 사용하여 만들기
객체를 생성하는 가장 기본적인 방법은 대부분의 다른 언어에서와 동일합니다. 객체가 없고 새 객체를 생성합니다!

var gf = new Object();
gf.name = "tangwei";
gf.bar = "c++";
gf.sayWhat = function() {
  console.log(this.name + "said:love you forever");
}

로그인 후 복사

리터럴을 사용하여 만들기

적절해 보이지만 어떻게 괴짜들이 변수를 정의하는 이렇게 복잡하고 은밀한 방식을 좋아할 수 있을까요? 스크립팅 언어로서 다른 형제들과 동일한 스타일을 가져야 하므로 객체 리터럴이 정의되는 방식이 나타났습니다. 🎜>

var gf = {
  name : "tangwei",
  bar : "c++",
  sayWhat : function() {
    console.log(this.name + "said:love you forever");
  }
}

로그인 후 복사

공장 모드

사실 실무에서 객체를 정의할 때 가장 많이 사용하는 방법인데, 비슷한 성질을 가진 객체를 여러 개 갖고 싶다면 어떻게 해야 할까요(생각만 해도 신난다...). 하나씩 정의하면 많은 코드가 생성됩니다. 공장을 짓고 일괄적으로 객체를 생산해 보는 것은 어떨까요? . . 아니, "공장 모델"이 탄생했습니다!

function createGf(name, bar) {
  var o = new Object();
  o.name = name;
  o.bar = bar;
  o.sayWhat = function() {
    alert(this.name + "said:love you forever");
  }
  return o;
}
var gf1 = createGf("bingbing","d");
var gf2 = createGf("mimi","a");

로그인 후 복사

건축자

팩토리 패턴은 유사한 객체를 여러 개 생성하는 문제를 해결하지만 이러한 객체는 모두 객체에서 생성됩니다. 특정 객체 유형을 어떻게 구별할 수 있습니까? 이제 다른 모드인 생성자 모드로 전환해야 합니다.

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
  this.sayWhat = function(){
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf("vivian","f");
var gf2 = new Gf("vivian2","f");

로그인 후 복사

여기에서는 위의 예에서 createGf를 대체하기 위해 대문자로 시작하는 생성자를 사용합니다. 규칙에 따라 생성자의 첫 글자를 대문자로 사용해야 합니다. 여기에서는 새 개체를 만든 다음 생성자의 범위를 새 개체에 할당하고 생성자에서 메서드를 호출합니다.

위 메소드에는 아무런 문제가 없는 것처럼 보이지만 두 인스턴스에서 호출된 생성자의 sayWhat 메소드가 동일한 Function 인스턴스가 아님을 알 수 있습니다.

console.log(gf1.sayWhat == gf2.sayWhat); //false

로그인 후 복사

동일한 메서드를 호출하지만 다른 인스턴스를 선언하는 것은 리소스 낭비입니다. 생성자 외부에서 sayWhat 함수를 최적화하고 선언할 수 있습니다.

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
  this.sayWhat = sayWhat
}
function sayWhat(){
  alert(this.name + "said:love you forever");
}

로그인 후 복사

이것은 동일한 메서드 인스턴스를 여러 번 정의하는 여러 인스턴스의 문제를 해결하지만 새로운 문제가 발생합니다. 우리가 정의한 sayWhat은 전역 범위 메서드이지만 이 메서드는 약간 모순됩니다. 특정 캡슐화 속성을 가진 객체를 보다 우아하게 정의하는 방법은 무엇입니까? JavaScript 프로토타입 객체 패턴을 살펴보겠습니다.

프로토타입 객체 패턴

프로토타입 객체 이해

함수를 만들 때 함수에는 생성자를 통해 생성된 함수의 프로토타입 객체를 가리키는 프로토타입 속성이 있습니다. 일반인의 관점에서 프로토타입 객체는 다른 객체에 대한 공유 속성과 메서드를 제공하는 메모리의 객체입니다.

프로토타입 모드에서는 생성자에서 인스턴스 속성을 정의할 필요가 없으며 속성 정보를 프로토타입 객체에 직접 할당할 수 있습니다.

function Gf(){
  Gf.prototype.name = "vivian";
  Gf.prototype.bar = "c++";
  Gf.prototype.sayWhat = function(){
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf();
gf1.sayWhat();
var gf2 = new Gf();

로그인 후 복사

생성자와 다른 점은 여기서 새 개체의 속성과 메서드를 모든 인스턴스에서 공유할 수 있다는 것입니다. 즉, gf1과 gf2는 동일한 속성과 메서드에 액세스합니다. 프로토타입 객체에 할당하는 속성 외에도 몇 가지 내장 속성도 있습니다. 모든 프로토타입 객체에는 프로토타입 속성을 포함하는 함수에 대한 포인터인 생성자 속성이 있습니다. 이 혀가 뒤틀리는 과정을 그림을 통해 명확하게 이해해 봅시다.

모든 객체에는 프로토타입 객체(prototype)가 있습니다. 프로토타입 객체에는 프로토타입 속성을 포함하는 함수를 가리키는 생성자 속성이 있습니다. Gf 인스턴스 gf1 및 gf2는 모두 프로토타입 객체를 가리키는 내부 속성을 포함합니다(firefox 브라우저에 표시됨). 비공개 속성인 proto), 객체의 속성에 액세스할 때 먼저 해당 속성이 인스턴스 객체에 존재하는지 묻고, 그렇지 않은 경우 계속해서 프로토타입 객체를 찾습니다.

프로토타입 객체 사용
이전 예에서는 프로토타입 객체에 속성을 추가할 때 각 객체에 Gf.prototype을 추가해야 한다는 점을 알아냈습니다. 위의 객체 생성 모드에서는 리터럴을 사용할 수 있다는 것을 알고 있습니다. 객체를 생성하고 여기에서 개선할 수도 있습니다.

function Gf(){}
Gf.prototype = {
  name : "vivian",
  bar : "c++",
  sayWhat : function(){
    alert(this.name + "said:love you forever");
  }
}

로그인 후 복사

여기서 특별한 주의가 필요한 것이 하나 있습니다. 생성자 속성은 더 이상 객체 Gf를 가리키지 않습니다. 함수가 정의될 때마다 해당 객체에 대한 프로토타입 객체도 자동으로 생성되기 때문입니다. 새로운 생성자 속성을 얻습니다. Gf.prototype을 사용하여 원래 프로토타입 객체를 덮어쓰므로 생성자는 더 이상 Gf를 가리키지 않고 객체:

를 가리키는 새 객체의 생성자 속성이 됩니다.

var gf1 = new Gf();
console.log(gf1.constructor == Gf);//false
console.log(gf1.constructor == Object)//true

로그인 후 복사

一般情况下，这个微妙的改变是不会对我们造成影响的，但如果你对constructor有特殊的需求，我们也可以显式的指定下Gf.prototype的constructor属性：

Gf.prototype = {
  constructor : Gf,
  name : "vivian",
  bar : "c++",
  sayWhat : function() {
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf();
console.log(gf1.constructor == Gf);//true

로그인 후 복사

通过对原型对象模式的初步了解，我们发现所有的实例对象都共享相同的属性，这是原型模式的基本特点，但往往对于开发者来说这是把“双刃剑”，在实际开发中，我们希望的实例应该是具备自己的属性，这也是在实际开发中很少有人单独使用原型模式的主要原因。

构造函数和原型组合模式

在实际开发中，我们可以使用构造函数来定义对象的属性，使用原型来定义共享的属性和方法，这样我们就可以传递不同的参数来创建出不同的对象，同时又拥有了共享的方法和属性。

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
}
Gf.prototype = {
  constructor : Gf,
  sayWhat : function() {
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf("vivian", "f");
var gf2 = new Gf("vivian1", "c");

로그인 후 복사

在这个例子中，我们再构造函数中定义了对象各自的属性值，在原型对象中定义了constructor属性和sayWhat函数，这样gf1和gf2属性之间就不会产生影响了。这种模式也是实际开发中最常用的对象定义方式，包括很多js库（bootstrap等）默认的采用的模式。