けいかく

38061 ワード
ダイス JavaScript テキストリンク

1.内部スロットと内部メソッドの定義


  • 困難な定義😂)
  • 内部スロットおよび内部メソッドは、ECMAScript仕様で使用されるプライベートプログラムおよびプライベートメソッドであり、JSエンジンの実装アルゴリズムを記述するために使用される.

  • より簡単な定義👍
  • 両括弧[[...]]で囲まれた名前は、内部スロットと内部メソッドです.

    • 2.内部スロットと内部方法の特徴

  • わかりにくい話😂
  • 内部スロットと内部メソッドはJSエンジンの内部ロジックです.
    • したがって,JSは原則として内部スロットや内部メソッドへの直接アクセスや呼び出しの方法を提供しない.
  • Butは、一部の内部スロットと内部メソッドに限定され、間接的なアクセスを提供します.

  • 例を見て、難しい言葉を理解してみましょう.🔥

  • 内部スロットとメソッドに直接アクセスできません.
    const crew = { name: "lokba" };

console.dir(crew); //결과를 확인하면, [[Prototype]]이라는 내부 슬롯이 있다.

//ok, 좋아! [[Prototype]]에 접근해보자.
crew[[Prototype]]; //Uncaught SyntaxError: Unexpected token '['

//결론 : 내부 슬롯과 메서드에는 직접 접근을 할 수 없다!

  • 一部の内部スロットと内部メソッドは間接的にアクセスできます!
    const crew = { name: "lokba" };

//__proto__를 통해 [[Prototype]]에 접근할 수 있다.
console.log(crew.__proto__);

  • やめろ.__proto__は廃棄されました!このリンクを見てください.👁
    const crew = { name: "lokba" };

//__proto__와 동일한 결과를 반환해!
console.log(Object.getPrototypeOf(crew));

//결론: 앞으로, Object.getPrototypeOf()을 사용하세요!

    • 3.PropertyツリーとPropertyディスク立棒オブジェクト

  • のタイトルから難しいでしょう?でも簡単な内容です!
  • わかりにくい話😂
  • JSエンジンでは、Propertyを作成すると、デフォルトではPropertyのステータスを表すPropertyツリーが自動的に定義されます.
  • ここでは、プロの状態にはいろいろな種類があります.
  • 値-単位値
  • 書き込み可能-値更新可能
  • 列挙可能-列挙可能
  • 構成可能-
    • を再定義可能
  • プロフェッショナルステータスに関する内部スロット(プロフェッショナルレポート)も多くの種類があります.
  • [[Value]]
  • [[Writable]]
  • [[Enumerable]]
  • [[Configurable]]

  • 例題を見て、難しい言葉を理解してみましょう.🔥

  • crewオブジェクトのnameプロパティツリーにアクセスします.
    const crew = { name: "lokba" };

crew[[Value]]; //Uncaught SyntaxError: Unexpected token '['

  • 間違いない!property treviewは内部スロットなので直接アクセスできません.間接的に提供されるObject.getOwnPropertyDescriptorメソッドを使用します!
    const crew = { name: "lokba" };

Object.getOwnPropertyDescriptor(crew, "name");
//{value: 'lokba', writable: true, enumerable: true, configurable: true}

// 오호, 프로퍼티 상태에는 value, writable, enumerable, configurable이 있군요!!

  • Object.getownPropertyDescriptorの方法をさらに理解しましょう.
  • この方法は、専門的なコメント情報を提供する프로퍼티 디스크립터 객체を返す.

  • また、ES 8はObjectを含む.getownPropertyDescriptorsメソッドを導入しました!これをどう使うか後で教えてあげます.😁)
    const crew = { name: "lokba", description: "handsome" };

Object.getOwnPropertyDescriptors(crew);
//{name: {…}, description: {…}}

    • 4.データリソースとアクセス者リソース

  • プロッティはデータプロッティと訪問者プロッティに分かれている.
  • データプロパティ:通常、キーと値からなるプロパティ.
  • アクセス者プロパティ:他のデータのプロパティ値を読み取りまたは保存するときに呼び出されるアクセス者関数からなるプロパティ.

  • データプロバイダ

  • これまで見た例はすべてデータ・プロパティといえる.

  • もう一度見てみましょう.
    const crew = { name: "lokba" };

Object.getOwnPropertyDescriptor(crew, "name");
//{value: 'lokba', writable: true, enumerable: true, configurable: true}

  • 例に示すように、データ・プロパティには、次のプロパティ・レポートがあります.
  • [[Value]]
  • [[Writable]]
  • [[Enumerable]]
  • [[Configurable]]

  • 訪問者の割合

  • 例を見てみましょう.
    const crew = {
  name: "김상록",
  nickname: "lokba",

  get profile() {
    return `name : ${this.name}, nickname : ${this.nickname}`;
  },

  set profile(value) {
    [this.name, this.nickname] = value.split(" ");
  },
};

Object.getOwnPropertyDescriptor(crew, "profile");
//enumerable: true, configurable: true, get: ƒ, set: ƒ}

  • 例に示すように、ビジター・プロパティには次のプロパティ・ビューがあります.
  • [[Get]]
  • [[Set]]
  • [[Enumerable]]
  • [[Configurable]]

  • ほほほ、私はデータ番組と訪問者番組を学んで、ここで問題が発生しました.1~3号はどんな形で出力されますか?🤔
    const crew = {
  name: "김상록",
  nickname: "lokba",

  get profile() {
    return `name : ${this.name}, nickname : ${this.nickname}`;
  },

  set profile(value) {
    [this.name, this.nickname] = value.split(" ");
    console.log(this);
  },

  getProfile() {
    return `name : ${this.name}, nickname : ${this.nickname}`;
  },

  setProfile(value) {
    [this.name, this.nickname] = value.split(" ");
    console.log(this);
  },
};

//1번(콘솔이 있다고 가정해주세요)
Object.getOwnPropertyDescriptor(crew, "getProfile");

//2번(콘솔이 있다고 가정해주세요)
Object.getOwnPropertyDescriptor(crew, "setProfile");

//3번(콘솔이 있다고 가정해주세요)
Object.getOwnPropertyDescriptor(crew, "profile");

  • 正解
    //1번
Object.getOwnPropertyDescriptor(crew, "getProfile");
//{writable: true, enumerable: true, configurable: true, value: ƒ}

//2번
Object.getOwnPropertyDescriptor(crew, "setProfile");
//{writable: true, enumerable: true, configurable: true, value: ƒ}

//3번
Object.getOwnPropertyDescriptor(crew, "profile");
//{enumerable: true, configurable: true, get: ƒ, set: ƒ}
  • 1-2番はトラフィックproperty、3番は訪問者propertyです.

    • 5.プロパティの定義


  • Object.PropertyはdefinePropertyメソッドを使用して定義できます.

  • 例を用いて、使用方法を理解します.
    const crew = {};

Object.defineProperty(crew, "name", {
  value: "lokba",
  writable: true,
  enumerable: true,
  configurable: true,
});

Object.defineProperty(crew, "age", {
  value: 26,
});

Object.getOwnPropertyDescriptor(crew, "name");
//{value: 'lokba', writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyDescriptor(crew, "age");
//{value: 26, writable: false, enumerable: false, configurable: false}

  • Object.複数のプロパティを一度に定義するには、definePropertiesメソッドを使用します.
    const crew = {};

Object.defineProperties(crew, {
  name: {
    value: "lokba",
    writable: true,
    enumerable: true,
    configurable: true,
  },
  age: {
    value: 26,
  },
});

console.log(crew); //{name: 'lokba', age: 26}

  • Object.属性とオブジェクトを定義します.getownPropertyDescriptorsとのコラボレーション
    const crew = { name: "lokba", description: "handsome" };

const copy = Object.defineProperties(
  {},
  Object.getOwnPropertyDescriptors(crew)
);

console.log(copy); //name: 'lokba', description: 'handsome'}
console.log(crew === copy); //false
  • 結論:2つの方法を用いて浅層放射が可能になった.
  • の特殊な点:getter/setterアクセス者propertyもコピーされます.

    • 6.オブジェクト変更の防止

  • JSでは、オブジェクトの変更を防ぐ方法がいくつか用意されています.
  • メソッドごとに禁止されている強度が異なります.下表を参照してください.

  • 時計だけ見て、理解できますが、もう少し詳しく調べてみましょう.

  • 1.オブジェクトの展開を禁止-オブジェクト.preventExtensions()

  • 拡張を禁止するオブジェクトはPropertyの追加を禁止します.
    const person = { name: "Lee" };

// 아직, person 객체는 확장이 금지된 객체가 아니에요.
console.log(Object.isExtensible(person)); // true

// person 객체의 확장을 금지 적용!!
Object.preventExtensions(person);

// 이제, person 객체는 확장이 금지된 객체에요.
console.log(Object.isExtensible(person)); // false

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 정의에 의한 프로퍼티 추가도 금지된다.
Object.defineProperty(person, "age", { value: 20 });
// TypeError: Cannot define property age, object is not extensible

  • 2.オブジェクトシール-オブジェクト.seal()

  • シールされたオブジェクトは読み書きのみです.
    const person = { name: "Lee" };

// 아직, person 객체는 밀봉(seal)된 객체가 아니에요.
console.log(Object.isSealed(person)); // false

// person 객체를 밀봉 적용!!
Object.seal(person);

// 이제, person 객체는 밀봉(seal)된 객체에요.
console.log(Object.isSealed(person)); // true

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 삭제가 금지된다.
delete person.name; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

  • 3.オブジェクトをフリーズ-オブジェクト.freeze()

  • フリーズされたオブジェクトは読み取り専用です.
    const person = { name: "Lee" };

// 아직, person 객체는 동결(freeze)된 객체가 아니에요.
console.log(Object.isFrozen(person)); // false

// person 객체를 동결 적용!!!
Object.freeze(person);

// 이제, person 객체는 동결(freeze)된 객체에요.
console.log(Object.isFrozen(person)); // true

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 삭제가 금지된다.
delete person.name; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 값 갱신이 금지된다.
person.name = "Kim"; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 어트리뷰트 재정의가 금지된다.
Object.defineProperty(person, "name", { configurable: true });
// TypeError: Cannot redefine property: name

  • 4.不便な相手

  • これまで見た変更防止方法は、浅い変更を防止することです.

  • したがって、重複するオブジェクトに影響を与えることはできません.
    const person = Object.freeze({
  name: "Lee",
  address: { city: "Seoul" },
});

console.log(Object.isFrozen(person)); // true
// 중첩 객체까지 동결하지 못해..
console.log(Object.isFrozen(person.address)); // false

person.address.city = "Busan";
console.log(person); // {name: "Lee", address: {city: "Busan"}}

  • ネストされたオブジェクトにも影響を与える場合は、オブジェクトを再帰的に選択します.freezeメソッドを呼び出すと、完璧な不変オブジェクトを実現できます.
    • 参考図書:モダンjavascript deep dave
    汎用vector(穴を掘ってから記入します).
    関数の呼び出し(2つの整数変数の最大値をとる)