정보실

웹학교

정보실

javascript 제 5 장 자바 스크립트 객체의 비밀 수명

본문

모든 것이 객체입니다! 


"모든 것이 JavaScript의 객체"라는 말을 몇 번이나 들었습니까? 그것의 진정한 의미가 무엇인지 스스로에게 물어 본 적이 있습니까? 

"모든 것이 객체이다"는 파이썬과 같은 다른 언어에도 공통적입니다. 그러나 Python의 객체는 JavaScript 객체와 같은 값의 컨테이너가 아닙니다. 

파이썬의 객체는 클래스입니다. JavaScript에는 비슷한 것이 있지만 JS의 "객체"는 키와 값의 컨테이너일 뿐입니다.


https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter5.md 


var obj = { name: "Tom", age: 34 }


실제로 JavaScript의 객체는 "멍청한"유형이지만 많은 다른 엔티티가 객체에서 파생 된 것 같습니다. 짝수 배열. 다음과 같이 JavaScript로 배열을 작성하십시오.


var arr = [1,2,3,4,5]


그런 다음 typeof 연산자로 확인하십시오. 놀라운 결과가 나타납니다.


typeof arr
"object"


배열은 특별한 종류의 객체인 것 같습니다! JavaScript의 함수조차 객체입니다. 그리고 더 깊이 파면 더 많은 것이 있습니다. 함수를 작성하면 해당 함수에 첨부 된 메소드를 사용할 수 있습니다.


var a = function(){ return false; }
a.toString()


산출:


"function(){ return false; }"


내 함수에 toString을 첨부하지 않았기 때문에 후드 아래에 더 많은 것이 있어야 합니다. 당신은? 그거 어디서 났어? Object에 .toString이라는 메소드가 있습니다. 우리 함수와 동일한 Object 메소드가 있는 것 같습니다!


Object.toString()


간단한 JavaScript 함수에 "첨부 된"모든 메소드와 속성을 보면 미스터리는 더욱 두껍게 됩니다.


Our function has a lot of methods! 


누가 그 방법을 거기에 넣었습니까? JavaScript의 함수는 특별한 종류의 객체라고 말했습니다. 힌트가 될 수 있습니까? 아마도! 그러나 지금 우리의 기쁨을 유지합시다. 위의 그림을 다시 살펴보십시오. 프로토 타입이라는 함수에 이상한 이름의 속성이 있습니다. 그게 뭐야?


JavaScript의 프로토 타입은 객체입니다. 그것은 대부분의 JavaScript 내장 객체에 연결된 배낭과 같습니다. 예를 들어 Object, Function, Array, Date, Error는 모두 "prototype"을 갖습니다.


typeof Object.prototype // 'object'
typeof Date.prototype // 'object'
typeof String.prototype // 'object'
typeof Number.prototype // 'object'
typeof Array.prototype // 'object'
typeof Error.prototype // 'object'


내장 객체에는 대문자가 있으며 앞에서 본 레고 벽돌과 비슷합니다.


  • String
  • Number
  • Boolean
  • Object
  • Symbol
  • Null
  • Undefined

이 레고 브릭은 JavaScript 유형이며, 대부분 유형인 Object를 제외한 기본 유형입니다. 반면에 내장 객체는 JavaScript 유형의 거울과 같으며 함수로도 사용됩니다. 예를 들어 숫자를 문자열로 변환하는 함수로 문자열을 사용할 수 있습니다.


String(34)


그러나 지금은 "prototype"을 고집합시다. 프로토 타입은 조상에서 파생 된 "자식"개체에서 사용할 수 있는 모든 일반적인 메소드와 속성의 홈입니다. 즉, 원래 프로토 타입이 제공되면 JavaScript 개발자는 단일 프로토 타입을 공통 함수의 진실 소스로 사용할 새 객체를 만들 수 있습니다. 방법 (스포일러 : Object.create)을 보겠습니다.


언어에 익숙하지 않지만 상사가 JavaScript 작업을 제공한다고 가정합니다. 채팅 응용 프로그램을 작성해야 하며 Person은 이 응용 프로그램의 "모델"중 하나라고 말했습니다. 사용자는 채널에 연결할 수 있고 메시지를 보낼 수 있으며 로그인 할 때 인사 할 수 있습니다. JavaScript를 처음 사용하면 어디서부터 시작해야 할지도 모릅니다. 그러나 당신은 똑똑하고 최근에 읽은 문서에서 JavaScript 객체가 실제로 강력하다고 나타납니다. 특히 MDN의 이 페이지에는 JavaScript 객체에서 사용할 수 있는 모든 메소드가 나열되어 있으며 create()가 흥미로워 보입니다. Object.create()는 "지정된 프로토 타입 객체와 속성으로 새로운 객체를 생성합니다".


다른 객체가 메소드와 속성을 복사 할 수 있는 "기본적인"사람을 만드는 방법이 있습니까? 2 장에서 JavaScript의 객체는 간단한 값뿐만 아니라 함수도 포함 할 수 있음을 보았습니다.


var firstObj = {
  name: "Alex",
  age: 33,
  hello: function() {
    console.log("Hello " + this.name);
  }
};


이제 게임 체인저입니다! Person 객체를 만들어 봅시다. "Hello"와 이름을 연결하기 위해 ES6 템플릿 리터럴을 사용하겠습니다.


var Person = {
  name: "noname",
  age: 0,
  greet: function() {
    console.log(`Hello ${this.name}`);
  }
};


내가 Person에 대문자를 사용하는 이유가 궁금 할 수 있습니다. 나중에 자세히 살펴 보겠지만 지금은 개발자가 "모델"을 시그널링 하는데 사용하는 규칙으로 생각합니다. Person은 응용 프로그램의 모델입니다. 이 Person 블루프린트가 주어지면 해당 단일 Person에서 시작하여 더 많은 사람들을 만들어야 합니다. 그리고 Object.create()가 당신의 친구입니다.


객체 생성 및 연결 


JavaScript의 객체가 어떻게 든 연결되어 있다는 느낌이 듭니다. 그리고 Object.create()는 이론을 확인합니다. 이 방법은 원래 객체에서 시작하여 새 객체를 만듭니다. 새로운 사람을 만들어 봅시다 :


var Person = {
  name: "noname",
  age: 0,
  greet: function() {
    console.log(`Hello ${this.name}`);
  }
};

var Tom = Object.create(Person);


이제 Tom은 새로운 사람이지만 새로운 메소드나 속성을 지정하지 않았습니다. 그러나 여전히 원래 이름과 나이에 액세스 할 수 있습니다.


var Person = {
  name: "noname",
  age: 0,
  greet: function() {
    console.log(`Hello ${this.name}`);
  }
};

var Tom = Object.create(Person);

var tomAge = Tom.age;
var tomName = Tom.name;

console.log(`${tomAge} ${tomName}`);

// Output: 0 noname


빙고! 이제 하나의 공통 조상에서 시작하여 새로운 사람들을 만들 수 있습니다. 그러나 이상한 점은 새 객체가 원래 객체에 연결된 상태로 남아 있다는 것입니다. "자식"개체가 속성과 메서드를 사용자 지정할 수 있으므로 큰 문제는 아닙니다.


var Person = {
  name: "noname",
  age: 0,
  greet: function() {
    console.log(`Hello ${this.name}`);
  }
};

var Tom = Object.create(Person);

Tom.age = 34;
Tom.name = "Tom";
var tomAge = Tom.age;
var tomName = Tom.name;

console.log(`${tomAge} ${tomName}`);

// Output: 34 Tom


그리고 이것을 원래 속성을 "그림자"라고 합니다. 새로운 객체에 속성을 전달하는 또 다른 방법이 있습니다. Object.create는 다른 객체를 새 객체의 키와 값을 지정할 수 있는 두 번째 인수로 사용합니다.


var Tom = Object.create(Person, {
  age: {
    value: 34
  },
  name: {
    value: "Tom"
  }
});


이 방법으로 구성된 속성은 기본적으로 쓰기 가능하지 않고 열거 가능하지 않으며 구성 할 수 없습니다. 쓰기 불가능은 나중에 해당 속성을 변경할 수 없으며 변경 사항은 무시됩니다.


var Tom = Object.create(Person, {
  age: {
    value: 34
  },
  name: {
    value: "Tom"
  }
});

Tom.age = 80;
Tom.name = "evilchange";

var tomAge = Tom.age;
var tomName = Tom.name;

Tom.greet();

console.log(`${tomAge} ${tomName}`);

// Hello Tom
// 34 Tom


열거 불가능은 속성이 for ... in 루프에 표시되지 않음을 의미합니다.


for (const key in Tom) {
  console.log(key);
}

// Output: greet


그러나 보시다시피, JavaScript 엔진이 링크 체인을 올라가 "부모"객체에서 인사를 하기 때문에 링크 된 속성이 나타납니다. 마지막으로 구성 할 수 없음은 속성을 수정하거나 삭제할 수 없음을 의미합니다.


Tom.age = 80;
Tom.name = "evilchange";
delete Tom.name;
var tomAge = Tom.age;
var tomName = Tom.name;

console.log(`${tomAge} ${tomName}`);

// 34 Tom


속성의 동작을 변경하려면 쓰기 가능, 구성 가능 및 열거 가능 여부를 지정하십시오.


var Tom = Object.create(Person, {
  age: {
    value: 34,
    enumerable: true,
    writable: true,
    configurable: true
  },
  name: {
    value: "Tom",
    enumerable: true,
    writable: true,
    configurable: true
  }
});


이제 Tom은 다시 우리에게 인사하면서 greet()에 액세스 할 수 있습니다.


var Person = {
  name: "noname",
  age: 0,
  greet: function() {
    console.log(`Hello ${this.name}`);
  }
};

var Tom = Object.create(Person);

Tom.age = 34;
Tom.name = "Tom";
var tomAge = Tom.age;
var tomName = Tom.name;
Tom.greet();

console.log(`${tomAge} ${tomName}`);

// Hello Tom
// 34 Tom


지금은 "this"에 대해 너무 걱정하지 마십시오. 다음 장에서는 이에 대해 더 배우게 됩니다. "this"는 함수가 실행되는 일부 객체에 대한 참조입니다. 우리의 경우 greet()은 Tom과 관련하여 실행되며 이런 이유로 "this.name"에 액세스 할 수 있습니다.


이제 JavaScript 객체에 대해 조금 더 알고 있으므로 엔터티를 만들기 위한 또 다른 패턴인 생성자 함수를 살펴 보겠습니다.


자바 스크립트 객체 생성 


지금까지는 "프로토 타입"에 대한 힌트만 주었지만 Object.create()를 사용하는 것 외에는 직접 사용하지 않았습니다. Java와 같은 전통적인 언어를 사용하는 많은 개발자들은 수년 동안 Object.create()와 "prototypal"을 우연히 발견했습니다. 그들은 이 이상한 JavaScript 언어를 이해할 수 있는 방법을 찾아야 했습니다. 따라서 새로운 패턴이 등장한 시간에는 생성자 함수가 있습니다. 새 객체를 만드는 함수를 사용하는 것이 합리적으로 들렸습니다. Person 객체를 함수로 변환한다고 가정하면 다음 코드를 얻을 수 있습니다.


function Person(name, age) {
  var newPerson = {};
  newPerson.age = age;
  newPerson.name = name;
  newPerson.greet = function() {
    console.log("Hello " + newPerson.name);
  };
  return newPerson;
}


따라서 모든 곳에서 Object.create()를 호출하는 대신 Person을 함수로 호출하고 객체를 다시 가져올 수 있습니다.


var me = Person("Valentino");


생성자 패턴은 일련의 JavaScript 객체의 작성 및 구성을 캡슐화 하는 데 도움이 됩니다. 그리고 여기 다시 대문자를 가진 Person이 있습니다. 클래스에 대문자가 있는 객체 지향 언어에서 빌린 규칙입니다. JavaScript에는 클래스가 없지만 이 스타일로 인해 개발자가 더 편안해졌습니다. 위의 예제는 심각한 문제가 있습니다. 새로운 객체를 만들 때마다 greet()을 반복해서 복제합니다. 그것은 차선책입니다. 운 좋게도 Object.create()는 객체 사이에 링크를 만들고 더 나은 솔루션으로 이어진다는 것을 배웠습니다. 먼저 greet() 메소드를 외부 객체로 옮깁니다. 그런 다음 Object.create()를 사용하여 새 객체를 해당 공통 객체에 연결할 수 있습니다.


var personMethods = {
  greet: function() {
    console.log("Hello " + this.name);
  }
};

function Person(name, age) {
  // greet lives outside now
  var newPerson = Object.create(personMethods);
  newPerson.age = age;
  newPerson.name = name;
  return newPerson;
}

var me = Person("Valentino");
me.greet();

// Output: "Hello Valentino"


멋집니다! 그러나 여전히 우리는 더 잘할 수 있습니다. 앞에서 본 좋은 'ol "prototype"은 어떻습니까? 여기에 도움이 될까요? JavaScript의 함수 (및 모든 내장 객체)에는 prototype이라는 배낭이 있습니다. 프로토 타입은 다른 객체 일 뿐이며 속성, 메서드 등 생각할 수 있는 모든 것을 포함 할 수 있습니다. Person 프로토 타입에 메소드를 추가하기 위해 다음을 수행 할 수 있습니다.


Person.prototype.greet = function() {
  console.log("Hello " + this.name);
};


personMethods를 제거하십시오. 이제 유일한 문제는 Object.create의 인수를 조정하지 않으면 새 객체가 공통 조상과 자동으로 연결되지 않는다는 것입니다.

function Person(name, age) {
  // greet lives outside now
  var newPerson = Object.create(Person.prototype);
  newPerson.age = age;
  newPerson.name = name;
  return newPerson;
}

Person.prototype.greet = function() {
  console.log("Hello " + this.name);
};

var me = Person("Valentino");
me.greet();

// Output: "Hello Valentino"


이제 모든 일반적인 메소드의 소스는 Person.prototype입니다. 이 시점에서 우리는 Person을 마지막으로 조정할 준비가 되었습니다. 그 기능을 보다 깔끔하게 정리할 수 있는 방법이 있기 때문입니다. JavaScript의 새로운 연산자를 사용하면 Person 내부의 모든 노이즈를 제거하고 인수를 지정하는 작업 만 수행 할 수 있습니다. 이는 다음 코드를 의미합니다.


function Person(name, age) {
  // greet lives outside now
  var newPerson = Object.create(Person.prototype);
  newPerson.age = age;
  newPerson.name = name;
  return newPerson;
}


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


그리고 여기 완전한 코드가 있습니다 :


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

Person.prototype.greet = function() {
  console.log("Hello " + this.name);
};

var me = new Person("Valentino");
me.greet();

// Output: "Hello Valentino"


이제 함수 호출 앞에 new를 추가해야 합니다. 이를 "생성자 호출"이라고 하며 JavaScript에서 새로운 형태의 객체를 생성하기 위한 "표준"구문입니다. 다른 말로 하면, 새로운 것은 우리를 위해 모든 노력을 다합니다.

  • 빈 개체를 새로 만듭니다
  • 객체를 프로토 타입에 연결
  • 이것을 새로 만든 객체를 가리킵니다.
  • 새로운 객체를 돌려줍니다


"연결" 확인 


JavaScript 객체 간의 링크를 확인하는 방법에는 여러 가지가 있습니다. 예를 들어 Object.getPrototypeOf는 주어진 객체의 프로토 타입을 반환하는 메소드입니다. Tom이 "개인"청사진에서 작성된 다음 코드를 고려하십시오.


var Person = {
  name: "noname",
  age: 0,
  greet: function() {
    console.log(`Hello ${this.name}`);
  }
};

var Tom = Object.create(Person);


Person이 Tom의 프로토 타입으로 보이는지 확인할 수 있습니다.


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

Person.prototype.greet = function() {
  console.log("Hello " + this.name);
};

var me = new Person("Valentino");

var mePrototype = Object.getPrototypeOf(me);

console.log(mePrototype === Person.prototype);

// Output: true


Object.getPrototypeOf 외에도 다른 메소드인 isPrototypeOf가 있습니다. 주어진 프로토 타입이 검사중인 객체의 프로토 타입 체인에 나타나는지 확인합니다. 위의 예에서 "me"는 Person.prototype에 연결된 개체입니다. 따라서 다음 검사는 "Yes I am!"을 반환합니다.


Person.prototype.isPrototypeOf(me) && console.log("Yes I am!");


JavaScript 객체 간의 링크를 확인하는 세 번째 방법도 있습니다. 그것은 instanceof 연산자입니다. 모든 정직에서 이름은 JavaScript에 "인스턴스"가 없기 때문에 약간 오해의 소지가 있습니다. 진정한 객체 지향 언어에서 인스턴스는 클래스에서 생성 된 새로운 객체입니다. 파이썬에서 다음 예제를 고려하십시오. Person이라는 클래스가 있으며 이 클래스에서 "tom"이라는 새 인스턴스를 만듭니다.


class Person():
    def __init__(self, age, name):
        self.age = age;
        self.name = name;

    def __str__(self):
        return f'{self.name}'
        

tom = Person(34, 'Tom')


파이썬에는 새로운 키워드가 없습니다. 이제 tom이 isinstance 메소드를 가진 Person의 인스턴스인지 확인할 수 있습니다.


isinstance(tom, Person)

// Output: True


Tom은 또한 Python에서 "object"의 인스턴스이며 다음 코드도 true를 반환합니다.


isinstance(tom, object)

// Output: True


문서에 따르면 "객체 인수가 클래스 인수 또는 (직접, 간접 또는 가상) 서브 클래스의 인스턴스 인 경우 true를 리턴 하십시오." 우리는 여기서 수업에 대해 이야기하고 있습니다. 이제 instanceof가 무엇을 하는지 봅시다. 우리는 JavaScript의 Person 함수에서 시작하여 Tom을 만들 것입니다 (실제 클래스가 없기 때문에).


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

Person.prototype.greet = function() {
  console.log(`Hello ${this.name}`);
};

var tom = new Person(34, "Tom");


이제 창의적인 방식으로 instanceof를 사용하겠습니다 :


if (tom instanceof Object) {
  console.log("Yes I am!");
}

if (tom instanceof Person) {
  console.log("Yes I am!");
}


잠시 시간을 내서 출력을 추측하십시오. instanceof는 단순히 Person.prototype 또는 Object.prototype이 Tom의 프로토 타입 체인에 나타나는지 여부를 확인합니다. 그리고 실제로 그들은 있습니다! 출력은 "Yes I am!"입니다. "그렇습니다!"


JavaScript 객체의 프로토 타입은 항상 직접 "parent"와 Object.prototype에 모두 연결되어 있습니다. 파이썬이나 자바와 같은 클래스는 없습니다. JavaScript는 단지 객체로 만들어졌습니다. 하지만 제가 언급 한 이후 프로토 타입 체인은 무엇입니까? 주의를 기울였다면 "시제품 체인"을 몇 번 언급했습니다. JavaScript 객체가 코드의 다른 곳에 정의 된 메소드에 액세스 할 수 있다는 것은 마술처럼 보일 수 있습니다. 다음 예를 다시 고려하십시오.

var Person = {
  name: "noname",
  age: 0,
  greet: function() {
    console.log(`Hello ${this.name}`);
  }
};

var Tom = Object.create(Person);

Tom.greet();


"Tom"오브젝트에 메소드가 직접 존재하지 않더라도 Tom은 greet()에 액세스 할 수 있습니다. 어떻게 가능합니까? 모든 자식 객체가 모든 부모의 메소드의 복사본을 얻는 Python 또는 Java와 같은 OOP 언어와 달리 JavaScript에서는 관계가 거꾸로 작동합니다. 어린이는 부모와 연결되어 있으며 속성과 메서드에 액세스 할 수 있습니다. 그것은 Self라는 다른 언어에서 프로토 타입 시스템을 빌린 JavaScript의 본질적인 특성입니다. greet()에 액세스하면 JavaScript 엔진이 해당 메소드를 Tom에서 직접 사용할 수 있는지 확인합니다. 그렇지 않으면 검색이 방법을 찾을 때까지 체인을 계속합니다. "체인"은 Tom이 연결된 프로토 타입 객체의 계층입니다. 우리의 경우 Tom은 Person 유형의 객체이므로 Tom의 프로토 타입은 Person.prototype에 연결됩니다. Person.prototype은 Object 유형의 객체이므로 동일한 Object.prototype 프로토 타입을 공유합니다. Person.prototype에서 greet()을 사용할 수 없는 경우 Object.prototype에 도달 할 때까지 체인을 계속 검색했을 것입니다. 그것이 우리가 "시제품 체인"이라고 부르는 것입니다.


수십 개의 튜토리얼에서 "prototypal inheritance"라는 용어를 읽었을 것입니다. "프로토 타입 상속"으로 인해 많은 JavaScript 개발자들이 혼란스러워하고 있습니다. 생각보다 간단합니다 : JavaScript에는 "prototypal inheritance"가 없습니다. 문장을 잊고 JavaScript 객체는 대부분 다른 객체와 연결되어 있음을 기억하십시오. 링크입니다. 상속이 없습니다.


객체가 조작되지 않도록 보호 


대부분의 경우 JavaScript 객체를 "확장 가능"하게 유지하는 것이 좋습니다. 즉, 다른 개발자가 객체에 새 속성을 추가 할 수 있습니다. 그러나 추가 조작으로부터 객체를 보호하려는 상황이 있습니다. 간단한 객체를 고려하십시오.


var superImportantObject = {
  property1: "some string",
  property2: "some other string"
};


기본적으로 모든 사람이 해당 객체에 새로운 속성을 추가 할 수 있습니다.


var superImportantObject = {
  property1: "some string",
  property2: "some other string"
};

superImportantObject.anotherProperty = "Hei!";

console.log(superImportantObject.anotherProperty); // Hei!


이제 새로운 추가 물로부터 객체를 보호한다고 가정합니다. 전문 용어로 객체의 "확장"을 방지하려고 합니다. Object.preventExtensions를 호출 할 수 있습니다.


var superImportantObject = {
  property1: "some string",
  property2: "some other string"
};

Object.preventExtensions(superImportantObject);

superImportantObject.anotherProperty = "Hei!";

console.log(superImportantObject.anotherProperty); // undefined


이 기술은 코드에서 중요한 객체를 "보호"하는 데 편리합니다. JavaScript에는 확장을 위해 닫히는 미리 작성된 많은 객체가 있으므로 개발자가 객체에 새 속성을 추가 할 수 없습니다. XMLHttpRequest의 응답과 같은 "중요한"객체의 경우입니다. 브라우저 공급 업체는 응답 객체에 새로운 속성을 추가하는 것을 금지합니다.

var request = new XMLHttpRequest();
request.open("GET", "https://jsonplaceholder.typicode.com/posts");
request.send();
request.onload = function() {
  this.response.arbitraryProp = "messing with youuu";
  console.log(this.response.arbitraryProp); // undefined
};


"response"개체에 대해 내부적으로 Object.preventExtensions를 호출하면 됩니다. Object.isExtensible 메서드를 사용하여 JavaScript 객체가 보호되는지 여부를 확인할 수도 있습니다. 객체가 확장 가능한 경우 true를 반환합니다.


var superImportantObject = {
  property1: "some string",
  property2: "some other string"
};

Object.isExtensible(superImportantObject) && console.log("Open for extension!");


그렇지 않은 경우는 false


var superImportantObject = {
  property1: "some string",
  property2: "some other string"
};

Object.preventExtensions(superImportantObject);

Object.isExtensible(superImportantObject) ||
  console.log("Closed for extension!");


물론 객체의 기존 속성을 변경하거나 삭제할 수도 있습니다.


var superImportantObject = {
  property1: "some string",
  property2: "some other string"
};

Object.preventExtensions(superImportantObject);

delete superImportantObject.property1;

superImportantObject.property2 = "yeees";

console.log(superImportantObject); // { property2: 'yeees' }


이제 이런 종류의 조작을 방지하기 위해 항상 각 속성을 쓰기 가능하지 않고 구성 할 수 없는 것으로 정의 할 수 있습니다. 그리고 이를 위해 Object.defineProperties라는 메소드가 있습니다.


var superImportantObject = {};

Object.defineProperties(superImportantObject, {
  property1: {
    configurable: false,
    writable: false,
    enumerable: true,
    value: "some string"
  },
  property2: {
    configurable: false,
    writable: false,
    enumerable: true,
    value: "some other string"
  }
});


또는 보다 편리하게 원본 객체에서 Object.freeze를 사용할 수 있습니다.


var superImportantObject = {
  property1: "some string",
  property2: "some other string"
};

Object.freeze(superImportantObject);


Object.freeze는 Object.preventExtensions와 동일한 작업을 수행하며 모든 객체의 속성을 쓰기 가능하지 않고 구성 할 수 없습니다. 유일한 결점은 "freezing"이 객체의 첫 번째 수준에서만 작동한다는 것입니다. 중첩 된 객체는 작업의 영향을 받지 않습니다.


이제 JavaScript 객체에 대해 간략히 살펴 보았습니다. ES6 클래스에 대해 조금 이야기 해 봅시다. 그들은 정말로 무엇입니까?


Class 착시 


ES6 수업에 관한 거대한 문헌이 있으므로 여기서는 그들이 무엇인지 맛볼 것입니다. JavaScript는 실제 객체 지향 언어입니까? 이 코드를 보면 그렇게 보입니다.


class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello ${this.name}`);
  }
}


구문은 Python과 같은 다른 프로그래밍 언어의 클래스와 매우 유사합니다.


class Person:
    def __init__(self, name):
        self.name = name
    
    def greet(self):
        return 'Hello' + self.name


또는 PHP (아버지 용서) :


class Person {
    public $name; 

    public function __construct($name){
        $this->name = $name;
    }

    public function greet(){
        echo 'Hello ' . $this->name;
    }
}


2015 년에 ES6에 클래스가 도입되었습니다. 그러나 현재 JavaScript에는 "실제" 클래스가 없다는 것이 분명합니다. 

모든 것은 단지 하나의 객체이며 키워드 클래스에도 불구하고 "시제품 시스템"은 여전히 ​​존재합니다. 새로운 JavaScript 버전은 이전 버전과 호환됩니다. 이는 새로운 기능이 기존 기능 위에 추가됨을 의미하며,이 새로운 기능의 대부분은 레거시 코드보다 구문 설탕입니다. 그래서 class는 무엇입니까? 개발자가 최신 JavaScript 코드를 작성한 다음 이전 브라우저에서도 해당 코드를 실행할 수 있도록 도와주는 Babel이라는 도구가 있습니다.

다시 말해서 ES6 클래스와 같은 새로운 구문은 레거시 버전으로 변환됩니다. 실제로 Babel 웹 사이트의 Try it out 섹션에서 Person 클래스를 복사하면 Person 함수와 기타 여러 가지 메소드가 제공됩니다. 놀랐는 걸! 결국 모든 것이 프로토 타입, 객체 및 함수로 좁혀집니다!


결론 


JavaScript의 거의 모든 것이 객체입니다. 말 그대로. JavaScript 객체는 키와 값의 컨테이너이며 함수를 포함 할 수도 있습니다. Object는 JavaScript의 기본 구성 요소이므로 공통 조상에서 시작하여 다른 사용자 정의 객체를 만들 수 있습니다. 그런 다음 언어의 본질적 특성인 프로토 타입 시스템을 통해 객체를 서로 연결할 수 있습니다. 공통 객체에서 시작하여 원래 "부모"와 동일한 속성과 메서드를 공유하는 다른 객체를 만들 수 있습니다. 그러나 이것이 작동하는 방식은 OOP 언어와 같이 모든 자식에게 메서드와 속성을 복사하는 것이 아닙니다. JavaScript에서 파생 된 모든 객체는 부모에 연결된 상태로 유지됩니다. 새로운 사용자 정의 객체는 Object.create 또는 소위 생성자 함수를 사용하여 생성됩니다. 새로운 키워드와 함께 생성자 함수는 전통적인 OOP 클래스를 모방합니다.



페이지 정보

조회 53회 ]  작성일19-10-17 20:59

웹학교