JavaScript의 생성자와 새 연산자에 대한 자세한 예

｛…｝ 구문을 사용하면 하나의 객체를 생성할 수 있지만 유사한 객체를 여러 개 생성해야 하는 경우 생성자와 "new" 연산자를 사용해야 합니다.

Constructor

Constructor는 기술적으로 일반적인 함수이지만 일반적으로 두 가지 규칙이 있습니다.
1 이름의 첫 글자는 대문자입니다.
2. new 연산자를 사용해서만 실행해야 합니다.

예:

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

new User()가 실행될 때 뒤에서 무슨 일이 일어나는지 살펴볼까요? new User()时背后到底做了什么？
1、首先创建一个空对象，然后赋值给this。
2、执行函数，通常修改this对象，增加一些新的属性。
3、this被返回。

换句话说，new User() 内容如下代码所示：

function User(name) {
  // this = {};  (implicitly)

  // we add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}

所以 new User("Jack") 的结果和下面代码一致：

let user = {
  name: "Jack",
  isAdmin: false
};

现在我们想创建其他对象，我们可以使用new User("Ann") ,new User("Alice") 等。比每次使用文字描述对象方式更简短，且易读。
这时构造函数的主要目的——————实现创建对象的代码重用。

让我们再次注意：
技术上，任何函数都可以用作构造器，即任何函数都可以使用new调用，并且也执行上面描述的算法。
首字母大写只是一个常规约定，使其更清晰说明其为构造韩式，应该使用new调用。

new function(){…}
如果我们有多行代码，用于创建一个复杂对象，我们可以包装他们使用构造函数，代码如下：

  let user = new function() { 
     this.name = “John”; 
     this.isAdmin = false;
  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

该构造器不能被再次调用，因为没有被保存，仅仅被调用创建对象。这个技巧的母的只是为了封装单个复杂对象代码。

双重使用构造器: new.target

函数内部，我们可以检查其调用方式是否使用new方式。使用一个特殊的属性new.target1. 먼저 빈 개체를 만든 다음 여기에 할당하세요.
2. 함수를 실행하고 일반적으로 이 개체를 수정하고 몇 가지 새로운 속성을 추가합니다.

function User() {
  alert(new.target);
}

User(); // undefined
new User(); // function User { ... }

function User(name) {
  if (!new.target) { // if you run me without new
    return new User(name); // ...I will add new for you
  }

  this.name = name;
}

let john = User("John"); // redirects call to new User
alert(john.name); // John

로그인 후 복사

이때 생성자의 주요 목적은 객체 생성을 위한 코드 재사용을 달성하는 것입니다.

다시 한 번 알아두세요:
기술적으로 모든 함수를 생성자로 사용할 수 있습니다. 즉, new를 사용하여 모든 함수를 호출할 수 있으며 위에서 설명한 알고리즘을 수행할 수도 있습니다.

new function(){…}

복잡한 객체를 생성하기 위해 여러 줄의 코드가 있는 경우 생성자를 사용하여 이를 래핑할 수 있으며 코드는 다음과 같습니다.

function BigUser() {

  this.name = "John";

  return { name: "Godzilla" };  // <-- returns an object
}

alert( new BigUser().name );  // Godzilla, got that object

함수 내부에서 호출 메서드가 새 메서드를 사용하는지 확인할 수 있습니다. 이는 특수 속성 new.target을 사용하여 수행됩니다.

function SmallUser() {

  this.name = "John";

  return; // finishes the execution, returns this

  // ...

}

alert( new SmallUser().name );  // John

로그인 후 복사

let user = new User; // <-- no brackets
// same as
let user = new User();

생성자 반환 값

보통 생성자에는 반환 값 문이 필요하지 않습니다. 그 임무는 이 객체에 필요한 내용을 쓴 다음 자동으로 반환하는 것입니다.

- return이 개체를 반환하면 이 개체가 대신 반환됩니다.
• - return이 기본 유형을 반환하는 경우 무시되고 여전히 반환됩니다.
  즉, return은 객체 또는 this를 반환합니다. 다음 예는 this 대신 객체를 반환합니다.

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };
}

let john = new User("John");

john.sayHi(); // My name is: John

/*
john = {
   name: "John",
   sayHi: function() { ... }
}
*/

로그인 후 복사
• 이 예는 실제로 효과가 없는 기본 유형을 반환합니다.

  rrreee

  대부분의 생성자는 반환할 필요가 없습니다. 여기서는 지적 완전성을 위해 이 특별한 동작을 상기시켜 드립니다.

괄호 무시


그런데 생성자를 호출할 때 매개변수가 없으면 객체 식별자 뒤의 괄호를 생략할 수 있습니다. 🎜rrreee🎜괄호를 무시하는 것은 좋은 코딩 스타일이 아니지만 사양에서는 허용됩니다. 🎜🎜생성자의 메서드🎜🎜생성자를 사용하여 객체를 생성하면 다양한 객체를 정의하는 매개변수를 제공하여 뛰어난 유연성을 얻을 수 있습니다. 🎜물론 여기에 속성만 추가하는 것이 아니라 메서드도 추가합니다. 🎜🎜다음 예제에서는 객체를 생성하고, name 매개 변수를 사용하고, sayHi 메서드를 추가합니다. 🎜rrreee🎜Summary🎜🎜🎜🎜생성자, 즉 줄여서 생성자는 일반적인 함수이지만 첫 문자를 이름은 대문자로 표기됩니다. 🎜🎜🎜🎜생성자는 new를 사용하여 호출됩니다. 즉, 빈 this 객체를 만들기 시작한 다음 채워진 내용으로 이것을 반환합니다. 🎜🎜🎜🎜생성자를 사용하여 유사한 개체를 여러 개 만들 수 있습니다. 이것이 오늘의 유일한 내용은 아니며 나중에 자세히 설명하겠습니다. 🎜Javascript는 Date, Set 등과 같은 일부 내장 개체에 대한 생성자를 제공합니다. 🎜

위 내용은 JavaScript의 생성자 및 new 연산자의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!