programing

JavaScript의 'new' 키워드는 무엇입니까?

sourcejob 2022. 11. 23. 20:18
반응형

JavaScript의 'new' 키워드는 무엇입니까?

newJavaScript의 키워드는 처음 접했을 때 상당히 혼란스러울 수 있습니다. 왜냐하면 사람들은 JavaScript가 객체 지향 프로그래밍 언어가 아니라고 생각하는 경향이 있기 때문입니다.

  • 그것은 무엇일까요?
  • 어떤 문제가 해결됩니까?
  • 언제가 적절하고 언제가 적절하지 않은가?

5가지 기능이 있습니다.

  1. 새로운 오브젝트가 생성됩니다.이 객체의 유형은 단순 객체입니다.
  2. 이 새로운 오브젝트의 내부 [protype](_proto_) 속성을 컨스트럭터 함수의 외부 액세스 가능한 프로토타입 오브젝트로 설정합니다(모든 함수 오브젝트는 자동으로 프로토타입 속성을 가집니다).
  3. 그때,가 되고요.this변수 포인트는 새로 생성된 개체를 가리킵니다.
  4. 는 새로 됩니다.this라고 기재되어 있습니다.
  5. 를 반환하지 한 합니다.null됩니다.이 경우 해당 개체 참조가 대신 반환됩니다.

주의: 컨스트럭터 함수는 다음 함수를 말합니다.new 「」와 )

new ConstructorFunction(arg1, arg2)

이 작업이 완료되면 새 개체의 정의되지 않은 속성이 요청되면 스크립트는 대신 개체의 [[protype]개체가 속성인지 확인합니다.이는 JavaScript에서 기존 클래스 상속과 유사한 내용을 가져올 수 있는 방법입니다.

여기서 가장 어려운 부분은 2번 포인트입니다.모든 개체(함수 포함)에는 [[protype]이라는 내부 속성이 있습니다.새 개체 생성 시, Object.create 또는 리터럴(기본값은 Function.protype, 번호는 Number.protype 등)을 사용하여 설정할 수 있습니다.Object.getProtypeOf(someObject)에서만 읽을 수 있습니다.이 값을 설정하거나 읽을 수 있는 다른 방법은 없습니다.

함수에는 숨겨진 [protype]속성과 더불어 프로토타입이라는 속성도 있습니다.이 속성은 사용자가 만들고 있는 객체에 대한 상속된 속성 및 메서드를 제공하기 위해 접근하고 수정할 수 있습니다.


다음은 예를 제시하겠습니다.

ObjMaker = function() {this.a = 'first';};
// ObjMaker is just a function, there's nothing special about it that makes 
// it a constructor.

ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible prototype property that 
// we can alter. I just added a property called 'b' to it. Like 
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with

obj1 = new ObjMaker();
// 3 things just happened.
// A new, empty object was created called obj1.  At first obj1 was the same
// as {}. The [[prototype]] property of obj1 was then set to the current
// object value of the ObjMaker.prototype (if ObjMaker.prototype is later
// assigned a new object value, obj1's [[prototype]] will not change, but you
// can alter the properties of ObjMaker.prototype to add to both the
// prototype and [[prototype]]). The ObjMaker function was executed, with
// obj1 in place of this... so obj1.a was set to 'first'.

obj1.a;
// returns 'first'
obj1.b;
// obj1 doesn't have a property called 'b', so JavaScript checks 
// its [[prototype]]. Its [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'

'계급 '이라고 할 수 때문에 계급 할 수 있죠.왜냐하면 이제 당신이 만드는 모든 오브젝트는new ObjMaker()을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을' 을'

서브클래스와 같은 것이 필요한 경우는, 다음과 같이 실시합니다.

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);

SubObjMaker.prototype.c = 'third';  
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is ObjMaker.prototype. So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype

obj2.c;
// returns 'third', from SubObjMaker.prototype

obj2.b;
// returns 'second', from ObjMaker.prototype

obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype 
// was created with the ObjMaker function, which assigned a for us

페이지를 찾기 전에 이 주제에 관한 많은 헛소리를 읽었습니다.이 페이지는 멋진 도표로 잘 설명되어 있습니다.

다음과 같은 기능이 있다고 가정합니다.

var Foo = function(){
  this.A = 1;
  this.B = 2;
};

이를 스탠드아론 함수로 호출할 경우 다음과 같이 합니다.

Foo();

하면 두 가지 이 에 됩니다.window오브젝트)A ★★★★★★★★★★★★★★★★★」B합니다.windowwindow할 때 입니다.this함수에서 함수는 함수를 호출한 객체입니다.자바스크립트

그럼 이렇게 .new:

var bar = new Foo();

''를 붙이면 되나요?new 오브젝트가입니다(단순히 「그냥」으로 합니다).var bar = new Object()) 와 、 ( ) 。this 「기능 포인트」를 할 수 있습니다.Object함수를 호출한 객체가 아니라 방금 생성한 객체입니다. ★★★★★★★★★★★★★★★★★.bar 개체가 되었습니다.A ★★★★★★★★★★★★★★★★★」B어떤 함수든 컨스트럭터가 될 수 있지만 항상 의미가 있는 것은 아닙니다.

하워드의 외에 과 같은 .new 하는 는)

function New(func) {
    var res = {};
    if (func.prototype !== null) {
        res.__proto__ = func.prototype;
    }
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }
    return res;
}

하는 동안에

var obj = New(A, 1, 2);

와 동등하다

var obj = new A(1, 2);

초보자가 더 잘 이해할 수 있도록

브라우저 콘솔에서 다음 코드를 사용해 보십시오.

function Foo() { 
    return this; 
}

var a = Foo();       //returns window object
var b = new Foo();   //returns empty object of foo

a instanceof Window;  // true
a instanceof Foo;     // false

b instanceof Window;  // false
b instanceof Foo;     // true

커뮤니티 Wiki의 답변을 읽을 수 있게 되었습니다.

그래서 아마 객체의 인스턴스를 만들기 위한 것은 아닐 겁니다.

정확히 그런 용도로 쓰입니다.다음과 같이 함수 생성자를 정의합니다.

function Person(name) {
    this.name = name;
}

var john = new Person('John');

의 다른 은 ECMAScript로 할 수 입니다..prototype" " " " " " " " "

Person.prototype.getName = function() { return this.name; }

된 모든 에는 " "가 있습니다.getName그들이 접근할 수 있는 시제품 체인 때문입니다.

JavaScript는 객체 지향 프로그래밍 언어이며 인스턴스를 만드는 데 정확히 사용됩니다.클래스 베이스가 아닌 프로토타입 베이스이지만 객체 지향적이지 않은 것은 아닙니다.

요약:.

new키워드는 javascript에서 컨스트럭터 함수에서 객체를 생성하기 위해 사용합니다.new키워드는 컨스트럭터 함수 호출 앞에 배치해야 하며 다음 작업을 수행합니다.

  1. 새 개체를 만듭니다.
  2. 이 개체의 프로토타입을 생성자 함수의 프로토타입을 설정합니다.
  3. 를 binds binds binds binds binds binds 。this키워드를 합니다.
  4. 새로 생성된 개체를 반환합니다.

예를 들어:

function Dog (age) {
  this.age = age;
}

const doggie = new Dog(12);

console.log(doggie);
console.log(Object.getPrototypeOf(doggie) === Dog.prototype) // true

정확히 어떤 일이 일어나는지:

  1. const doggie고고말말말말다다변수를 선언하기 위해 메모리가 필요합니다.
  2. 연산자 " " "=이에서는 이 변수를 합니다.=
  3. 은 「」입니다.new Dog(12)JS 엔진은 새로운 키워드를 확인하고 새로운 객체를 생성하여 프로토타입을 Dog.protype으로 설정합니다.
  4. 함수는 함수로 실행됩니다.this값을 새 개체로 설정합니다.이 단계에서는 새로 생성된 dogie 개체에 기간을 할당합니다.
  5. 새로 생성된 개체가 반환되어 변수 dogie에 할당됩니다.

이미 몇 가지 훌륭한 답변이 있지만, 아래의 사례 III에 대한 나의 관찰을 강조하기 위해 새로운 답변을 게시합니다. 당신이 함수에 명시적인 리턴 스테이트먼트를 가지고 있을 때 어떻게 되는지에 대한 것입니다.new이치노

케이스 I:

var Foo = function(){
  this.A = 1; 
  this.B = 2;
};
console.log(Foo()); //prints undefined
console.log(window.A); //prints 1

입니다.Fooundefined 문이 에 JavaScript 는 return을 강제로 return undefined;명령어를 입력합니다. 오브젝트 「」)입니다.this 것을 수 있다)는, 「 」A ★★★★★★★★★★★★★★★★★」B★★★★★★ 。

케이스 II:

var Foo = function(){
  this.A = 1;
  this.B = 2;
};
var bar = new Foo();
console.log(bar()); //illegal isn't pointing to a function but an object
console.log(bar.A); //prints 1

서 JavaScript 는 JavaScript를 있습니다.new하는 새로운 의 「」)가 됩니다.this 가리키는 Foo ★★★★A ★★★★★★★★★★★★★★★★★」B(창 객체 대신) 새로 생성된 객체의 속성이 됩니다.에 JavaScript 하여 return 스테이트먼트를 사용하여 생성된 .new키워드를 지정합니다.

케이스 III:

var Foo = function(){
  this.A = 1;
  this.B = 2;
  return {C:20,D:30}; 
};
var bar = new Foo();
console.log(bar.C);//prints 20
console.log(bar.A); //prints undefined. bar is not pointing to the object which got created due to new keyword.

서도 JavaScript 는 JavaScript를 보고 .new하는 새로운 의 「」)가 됩니다.this 가리키는 Foo A ★★★★★★★★★★★★★★★★★」B새로 생성된 객체의 속성이 됩니다.그러나 이번에는 JavaScript 인터프리터가 자체적인 작업을 하지 않도록 명시적인 return 스테이트먼트가 있습니다.

III의 경우 주의할 점은 오브젝트가 작성되는 이유는new이치노 bar는 JavaScript 가 아닌 이 오브젝트는 JavaScript 인터프리터가 한 오브젝트입니다.new키워드를 지정합니다.

Java Scripit의 David Flanagan 인용:최종 가이드 (제6판), 제4장, 페이지 번호 62:

개체 생성 식이 평가될 때 JavaScript는 먼저 개체 이니셜라이저 {}에서 생성한 것과 동일한 빈 개체를 새로 생성합니다.그런 다음 지정된 인수를 사용하여 지정된 함수를 호출하고 이 키워드의 값으로 새 개체를 전달합니다.그러면 함수는 이를 사용하여 새로 생성된 개체의 속성을 초기화할 수 있습니다.생성자로 사용하기 위해 작성된 함수는 값을 반환하지 않으며 개체 생성 식 값은 새로 생성되고 초기화된 개체입니다.생성자가 개체 값을 반환하면 해당 값이 개체 생성 식 값이 되고 새로 생성된 개체는 폐기됩니다.

추가 정보

위의 경우 코드 스니펫에 사용되는 함수는 다음과 같이 JS 월드에서 특별한 이름을 가지고 있습니다.

케이스 번호 이름.
케이스 I 생성자 함수
케이스 II 생성자 함수
케이스 III 공장 기능

스레드에서 컨스트럭터 함수와 공장 함수의 차이에 대해 읽을 수 있습니다.

케이스 III에 대한 주의 - 공장 기능은new위의 코드 스니펫에서 보여드린 키워드입니다.나는 단지 이 게시물에 있는 개념을 설명하기 위해 일부러 그렇게 했다.

Javascript는 객체 지향 프로그래밍 패러다임을 지원하는 동적 프로그래밍 언어로, 객체의 새로운 인스턴스를 만드는 데 사용됩니다.

객체에 대한 클래스는 필요하지 않습니다. Javascript는 프로토타입 기반 언어입니다.

new키워드를 지정하면 함수가 실행되고 있는 컨텍스트가 변경되어 해당 컨텍스트에 포인터가 반환됩니다.

하지 않을 때new 함수가 "", ""로 되어 있는 "Vehicle()는 runs를 입니다.Vehicle★★★★★★this이치노「 」를 사용하는 new Vehicle() 「」가 됩니다this함수의 내부는 새로운 컨텍스트를 참조합니다.그 대신 새로 생성된 컨텍스트를 얻을 수 있습니다.

때로는 코드가 단어보다 쉽습니다.

var func1 = function (x) { this.x = x; }                    // used with 'new' only
var func2 = function (x) { var z={}; z.x = x; return z; }   // used both ways
func1.prototype.y = 11;
func2.prototype.y = 12;

A1 = new func1(1);      // has A1.x  AND  A1.y
A2 =     func1(1);      // undefined ('this' refers to 'window')
B1 = new func2(2);      // has B1.x  ONLY
B2 =     func2(2);      // has B2.x  ONLY

저는 시제품이 아닌 한 기능 내외부의 유연성이 조금 더 높기 때문에 func2 스타일을 사용하고 있습니다.

 " Every object (including functions) has this internal property called [[prototype]]" 

모든 함수에는 해당 함수로 생성된 객체의 프로토타입으로 자동 설정되는 프로토타입 객체가 있습니다.

쉽게 확인할 수 있습니다.

const a = { name: "something" };
console.log(a.prototype); // undefined because it is not directly accessible

const b = function () {
  console.log("somethign");};

console.log(b.prototype); // returns b {}

, 모든 및 에는 '기능'이 있습니다.__proto__해당 객체 또는 기능의 프로토타입을 가리키는 속성입니다. __proto__ ★★★★★★★★★★★★★★★★★」prototype두 개의 다른 용어입니다."모든 사물은 프로토타입에 연결되어 있다"는 코멘트를 할 수 있을 것 같습니다.__proto__subscript는 존재하지 않습니다.디버깅에 이 됩니다.이 속성은 브라우저에 의해 디버깅에 도움이 되도록 추가됩니다.

console.log(a.__proto__); // returns {}
console.log(b.__proto__); // returns [Function]

여러분은 이것을 단말기에서 쉽게 확인할 수 있습니다.그럼 컨스트럭터 함수가 뭐죠?

function CreateObject(name,age){
    this.name=name;
    this.age =age
}

먼저 주목해야 할 5가지 사항:

가 1-로 된 경우new【구축】서드를 호출하여 새 인스턴스 개체를 만들고 메모리를 할당합니다.

2-어울리다를 하지 않습니다.return키워드를 지정합니다. new알아서 할 거야

를 볼 때 함함함 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 는는는는는는는 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3를 해야 한다는 것을 이해할 수 있습니다.new키워드를 지정합니다.

4- 화살표 기능은 사용하지 않습니다." " " 의 this파라미터는 화살표 함수가 생성되는 순간 선택되며, 화살표 함수는 동적으로 선택되지 않고 사전 스코프가 지정됩니다.여기서 어휘는 로컬을 의미합니다. '무엇을 하다'하다

5 - 일반 함수와 달리 화살표 함수는 [Construct] 메서드가 없기 때문에 새로운 키워드로 호출할 수 없습니다.화살표 기능에 대한 프로토타입 속성도 존재하지 않습니다.

const me=new CreateObject("yilmaz","21")

new함수를 호출한 다음 빈 개체 {}을(를) 생성한 다음 "name" 값을 가진 "name" 키와 인수 "age" 값을 가진 "age" 키를 추가합니다.

함수를 호출하면 "this" 및 "arguments"로 새 실행 컨텍스트가 생성되므로 "new"는 이러한 인수에 액세스할 수 있습니다.

"window" 객체는 "window" 객체를 가리키고 .new '빈 객체 {}을(를) 된 객체에 합니다."this"는 생성된 빈 개체 {}을(를) 가리킨 다음 새로 생성된 개체에 속성이 추가됩니다."this" 속성 없이 정의된 변수가 있는 경우 개체에 추가되지 않습니다.

function CreateObject(name,age){
    this.name=name;
    this.age =age;
    const myJob="developer"
}

새로 생성된 개체를 참조하는 항목이 없으므로 myJob 속성이 개체에 추가되지 않습니다.

   const me= {name:"yilmaz",age:21} // there is no myJob key

처음에 나는 모든 함수는 컨스트럭터 함수를 포함한 "프로토타입" 속성을 가지고 있다고 말했다.생성자의 프로토타입에 메서드를 추가하면 해당 함수로 작성된 모든 개체가 액세스할 수 있습니다.

 CreateObject.prototype.myActions=function(){ //define something}

이제 "myActions" 메서드를 사용할 수 있습니다.

javascript에는 컨스트럭터 함수가 내장되어 있습니다.함수, Boolean, 숫자, 문자열..

내가 만든다면

const a = new Number(5);
console.log(a);  // [Number: 5]
console.log(typeof a); // object

하여 것new에는 오브젝트 타입이 있습니다.이제 "a"는 Number.protype에 저장된 모든 메서드에 액세스할 수 있습니다.정의하면

const b = 5;
console.log(a === b);//false

a와 b는 5이지만 a는 객체이고 b는 원시입니다.b는 원시형이지만 작성 시 javascript에 의해 자동으로 Number()로 래핑되므로 b는 Number.protype 내의 모든 메서드에 액세스할 수 있습니다.

생성자 함수는 동일한 속성 및 메서드를 사용하여 유사한 개체를 여러 개 만들 때 유용합니다.이렇게 하면 추가 메모리를 할당하지 않고 코드를 보다 효율적으로 실행할 수 있습니다.

new키워드는 새로운 오브젝트인스턴스를 작성하기 위한 것입니다.그리고 javascript는 객체 지향 프로그래밍 패러다임을 지원하는 동적 프로그래밍 언어입니다.개체 이름 지정에 대한 규칙은 새 키워드로 인스턴스화되어야 하는 개체에는 항상 대문자를 사용합니다.

obj = new Element();

Javascript는 OOP(Object Oriented Programming) 언어가 아니므로 프로토타입 위임 또는 프로토타입 상속이라고도 하는 'DELGATION PROCESS'를 사용한 Javascript 작업의 LOUP 프로세스입니다.

없는 개체에서 속성 값을 가져오려고 하면 JavaScript 엔진은 개체의 프로토타입(및 프로토타입, 한 번에 한 단계 위)을 찾습니다. 프로토타입 체인은 null로 끝납니다. 즉, Object.protype == null(표준 개체 프로토타입).이 시점에서 속성 또는 메서드가 정의되지 않은 경우 정의되지 않은 상태로 반환됩니다.

Imp!! 함수는 1등급 객체입니다.

함수 = 함수 + 객체 콤보

FunctionName.protype = { shared SubObject }

{
  // other properties
  prototype: {  
   // shared space which automatically gets [[prototype]] linkage 
      when "new" keyword is used on creating instance of "Constructor 
      Function"
  }
}

해서 이 the 를 사용하면new중를 키워드로 지정합니다(예 수작업).

  1. 수동 객체 생성(예: newObj).
  2. JS spec [[protype](: prototype)에서 프로토(dunder proto)를 사용한 숨겨진 결합 생성
  3. newObj
  4. ★★★★★★★★★★★★★★★의 반환newObj★★★★★★ 。

모든 작업은 수동으로 수행됩니다.

function CreateObj(value1, value2) {
  const newObj = {};
  newObj.property1 = value1;
  newObj.property2 = value2;
  return newObj;
}
var obj = CreateObj(10,20);

obj.__proto__ === Object.prototype;              // true
Object.getPrototypeOf(obj) === Object.prototype // true

키워드 Javascript ★★new이 를 자동화하는 데 이 됩니다.

  1. 은 로운음음 으로 식별됩니다.this:{}
  2. this
  3. Function.protype 공유 공간에 대한 숨겨진 본드 생성 [[protype](프로토타입)(, 프로토타입)
  4. this개체 {}
function CreateObj(value1, value2) {
  this.property1 = value1;
  this.property2 = value2;
}

var obj = new CreateObj(10,20);
obj.__proto__ === CreateObj.prototype             // true
Object.getPrototypeOf(obj) == CreateObj.prototype // true

새로운 키워드를 지정하지 않은 호출 컨스트럭터 함수:

> =>this: Window

function CreateObj(value1, value2) {
  var isWindowObj = this === window;
  console.log("Is Pointing to Window Object", isWindowObj);
  this.property1 = value1;
  this.property2 = value2;
}
var obj = new CreateObj(10,20); // Is Pointing to Window Object false
var obj = CreateObj(10,20); // Is Pointing to Window Object true
window.property1; // 10
window.property2; // 20

new키워드는 함수를 생성자로 사용하여 객체의 인스턴스를 만듭니다.§:

var Foo = function() {};
Foo.prototype.bar = 'bar';

var foo = new Foo();
foo instanceof Foo; // true

(instance)는 을 합니다.prototype생성자 함수의.★★★★★★★★★★★★★★★...

foo.bar; // 'bar'

JavaScript는 원래 사양인 EcmaScript를 구현하기 때문에 플랫폼마다 크게 다를 수 있습니다.

어느 경우든 구현과는 별개로 EcmaScript 사양 권리에 따르는 모든 JavaScript 구현은 객체 지향 언어를 제공합니다.ES 표준에 따라:

ECMAScript는 호스트 환경에서 계산을 수행하고 계산 개체를 조작하기 위한 객체 지향 프로그래밍 언어입니다.

자바스크립트 에코스크립트newlanguage에서는 키워드가 특정(C 경우 타입 .operation은 C#과 같은 어나니머스 타입을 포함합니다.

EcmaScript에서는 클래스를 사용하지 않습니다.스펙을 참조해 주세요.

ECMAScript C++, Smalltalk, Java.대신 오브젝트는 리터럴 표기법이나 오브젝트를 작성한 후 초기값을 속성에 할당함으로써 그 전부 또는 일부를 초기화하는 코드를 실행하는 컨스트럭터를 통해 다양한 방법으로 작성될 수 있습니다.각 생성자는 프로토타입 기반 상속 및 공유 속성을 구현하기 위해 사용되는 -protype that이라는 속성을 가진 함수입니다.오브젝트는 다음에 의해 작성됩니다.
예를 들어 새 날짜(2009,11)는 새 날짜 개체를 만듭니다..예를 들어 Date()는 객체가 아닌 현재 날짜와 시간을 나타내는 문자열을 생성합니다.

언급URL : https://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript

반응형