[TIL] 211005

16802 ワード
Prototype JavaScript TIL テキストリンク

📝 今日作った

  • プロトタイプ/プロトタイプチェーン/標準内蔵オブジェクトの拡張

    • 📚 学識


    1.プロトタイプ


    1)プロトタイプとは?


    これを見て原型が理解できなかったら授業を折る。を参照

  • 「遺伝子」と理解する

  • 親Meにはname="syong"がある.両親Meから生まれた子供Iもname=「syong」です.
    • // 프로토타입
function Me () {
  this.a = 'a';
  this.b = 'b';
}

Me.prototype.name = 'syong';

const I = new Me();

console.log(I); // {a = 'a', b = 'b'}
console.log(I.name); // syong

    2）プロトタイプチェーン


    生活コード2014原型課を参照
    Prototypeに保存されているプロパティ
    作成者によるオブジェクトの作成時
    オブジェクトに接続します.
    [例1]
    function Ultra () {}
Ultra.prototype.ultraProp = true;

function Super () {}
Super.prototype = new Ultra();

function Sub () {}
Sub.prototype = new Super();
Sub.prototype.ultraProp = 2;

var o = new Sub();
console.log(o.ultraProp); // 2
  • JavaScriptは、まずオブジェクトoを検索し、o.ultraPropの値を検索します.見つからない場合は、作成オブジェクトoの생성자 Sub의 prototype 객체を検索します.ジェネレータsubのprototypeオブジェクトにultraProp propertyが見つかり、その値が出力されます.
    • [例2]
    function Ultra () {}
Ultra.prototype.ultraProp = true;

function Super () {}
Super.prototype = new Ultra();

function Sub () {}
var s = new Super();
s.ultraProp = 3;
Sub.prototype = s;

var o = new Sub();
console.log(o.ultraProp); // 3
  • JavaScriptは、まずオブジェクトoを検索し、o.ultraPropの値を検索します.見つからない場合は、作成オブジェクトoの생성자 Sub의 prototype 객체を検索します.ジェネレータsubのprototypeオブジェクトに変数sが割り当てられます.変数sは、ジェネレータSuperによって作成されるオブジェクトを指定します.このオブジェクトのプロトタイプpropertyは3なので出力します.
    • [例3]
    function Ultra () {}
Ultra.prototype.ultraProp = true;

function Super () {}
var t = new Ultra();
t.ultraProp = 4;
Super.prototype = t;

function Sub () {}
var s = new Super();
Sub.prototype = s;

var o = new Sub();
console.log(o.ultraProp); // 4
  • JavaScriptは、まずオブジェクトoを検索し、o.ultraPropの値を検索します.見つからない場合は、オブジェクトoを作成するジェネレータsubのプロトタイプオブジェクトを検索します.ここでも見つからなければ、생성자 Super의 prototype 객체を検索します.上記手順で4を出力します.
    • 💡 注意!
    Sub.prototype = new Super(); // (o)
Sub.prototype = Super.prototype; // (x)
    2つ目の方法で記述すると、SubのプロトタイプオブジェクトにPropertyを追加すると、Superのプロトタイプオブジェクトも影響を受けます.つまり、子オブジェクトに任意の機能を追加すると、親オブジェクトに同じ機能が追加されます.

    2.標準埋め込みオブジェクトを展開する


    1)標準組み込みオブジェクト(標準組み込みオブジェクト)とは?


  • JavaScriptまたはJavaScriptによって実行されるホスト環境を開発者にデフォルトで提供する、事前に作成されたオブジェクト.

  • オブジェクト、機能、アレイ、String、Boolean、Number、Math、Date、RegExp(正規表現)

    • 2）カスタムオブジェクト

  • オブジェクト
    • は、ユーザが必要とする構成および方法を定義する.

    3)標準埋め込みオブジェクトの展開方法

    // 예제1 - 배열 요소 랜덤하게 가져오기
{
const arr = new Array('I', 'my', 'me', 'mine');

function getRandomValueFromArray () {
  const index = Math.floor(arr.length * Math.random());
  return arr[index];
}

console.log(getRandomValueFromArray());
}

// 예제1 - 표준 내장 객체의 확장
Array.prototype.random = function () {
  const index = Math.floor(this.length * Math.random());
  return this[index];
}

const arr = new Array('I', 'my', 'me', 'mine');
console.log(arr.random());
  • prototypeを使用すると、ユーザは、공통적으로 쓸 수 있는 APIをすべての配列で直接定義することができる.

  • ランダム()メソッドをArrayコンストラクション関数によって作成されたすべての配列オブジェクトに使用できるようにするには、arrではなくthisを使用します.

    • 明日作った

  • オブジェクト、モジュール
    • Vue.jsでなにか作ってみたときに参考にしたサイトとかのリンク集
    ES 6ノート(六)SymbolとSymbolの属性を深く理解する