モダンJavaScript-Deep Dive 17,18[コンストラクション関数によるオブジェクト、関数、および一級オブジェクトの作成]
コンストラクション関数によるオブジェクトの作成
オブジェクトジェネレータ関数
Objectジェネレータ関数のほか、jsはString、Number、Boolean、Function、Array、Date、RegExp、Promiseなどのビルダー関数もサポートしています.
使用法:const person=new Object()
コンストラクタ
オブジェクトテキスト生成の問題
同じ複数のオブジェクトを作成すると、コードが重複し、無効になります.const circle1 = {
radius:5,
getDiameter(){
return 2 * this.radius
}
}
const circle2 = {
radius:10,
getDiameter(){
return 2 * this.radius
}
}
コンストラクション関数によるオブジェクトの作成の利点
function Circle(radius) {
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
const circle1 = new Circle(5);
const circle2 = new Circle(10);
// 프로퍼티구조가 동일한 객체를 여러 개 생성할 경우 편리하다.
this
これは、オブジェクト自体を参照するための自己参照変数のプロシージャまたはメソッドです.
関数呼び出しメソッドグローバルオブジェクトメソッドを呼び出す呼び出しメソッドのオブジェクト作成者関数として、アーク発生構造関数として作成するインスタンスとして、この関数が指す値(バインド)一般関数.
コンストラクション関数インスタンスの作成プロセス
1.インスタンスを作成してバインドする
デフォルトでは、空のオブジェクト(コンストラクション関数によって作成されたインスタンス)が作成され、このオブジェクトにバインドされます.
この処理は、実行時より前に実行されます.
バインディング
バインドは、識別子と値を関連付けるプロセスを意味します.たとえば、変数宣言は、変数名とメモリ領域が確保されているアドレスをバインドします.thisバインドは、thisとthisが示すオブジェクトのバインドです.function Circle(radius){
console.log(this); // Circle ()
...
}
2.インスタンスの初期化
ジェネレータ関数で説明したコードは、thisにバインドされたインスタンスを初期化するために1行1行実行されます.つまり.
これにバインドされたインスタンスにpropertyまたはメソッドを追加し、作成者関数を引数として渡された初期値をインスタンスpropertyに割り当てて初期化または固定値を割り当てます.
3.インスタンスを返す
function Circle(radius) {
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
return this; // 1.암묵적으로 this 가 리턴된다
return {}; // 2.객체를 반환하는 경우 암묵적 this반환이 무시된다
return 100; // 3.원시값을 반환할 경우 무시되고 this가 반환된다.
}
console.log(new Circle(5));
// 1. Circle { radius: 5, getDiameter: [Function (anonymous)] }
// 2. {}
// 3. Circle { radius: 5, getDiameter: [Function (anonymous)] }
内部メソッドと構成
jsでは、関数もオブジェクトと見なされ、property、メソッドを持つことができます.
通常のオブジェクトとは異なり、呼び出すことができます.function foo() {}
// 일반적인 함수로서 호출 : [[Call]]이 호출된다
foo()
// 생성자 함수로서 호출 : [[Construct]]이 호출된다
new foo();
内部メソッドを持つ関数オブジェクト=callable
内部メソッド[Construct]を持つ関数オブジェクト=constructor
内部メソッド[Construct]を持たない関数オブジェクト=non-constructor
関数オブジェクトの場合はcallableでなければなりません.
区分constructor、non-constructor
コンストラクション関数:関数宣言、関数式、クラス
non-constructor:メソッド(ES 6メソッド略)、矢印関数// constructor
function foo(){}
const bar = function () {};
const baz = {
x:function () {}
};
// non-constructor
const arrow = () => {}
const person = {
name:"Lee",
getName(){
return this.name
}
}
new arrow() // TypeError
new person.getName() // TypeError
new演算子newtarget
new演算子の場合は、[Construct]が呼び出されるため、コンストラクション関数でなければなりません.
newがない場合に関数を呼び出すと呼び出されます.new演算子なしでコンストラクション関数を呼び出すのを防止するために、パスカルケースミーティングを使用できますが、エラーはいつでも発生します.このようなリスクを避けるためにnew.支援目標.(ES6)function Circle(radius) {
if(!new.target){ // 함수가 new 연산자와 함께 호출되지 않으면 new.target은 undefined을 반환한다.
return new Circle(radius);
}
...
}
const circle = Circle(5); == new Circle(5)
関数と一級オブジェクト
一級オブジェクト
次の条件を満たすオブジェクトを1レベルオブジェクトと呼びます.
1.無名の文字を生成できます.つまり、実行時に生成できる
2.変数または資料構造に格納できます.
3.関数に渡すことができるパラメータ.
4.関数の戻り値として使用できます.
関数オブジェクトの構成
function square(number) {
return number * number;
}
console.dir(Object.getOwnPropertyDescriptors(square));
{
length: { value: 1, writable: false, enumerable: false, configurable: true },
name: { value: 'square', writable: false, enumerable: false, configurable: true },
arguments: { value: null, writable: false, enumerable: false, configurable: false },
caller: { value: null, writable: false, enumerable: false, configurable: false },
prototype: { value: {}, writable: true, enumerable: false, configurable: false }
}
Arguments、caller、length、name、prototypeは、関数オブジェクトのデータpropertyです.
これらのプロパティは、通常のオブジェクトにはない関数オブジェクトの固有のプロパティです.__proto__
は、関数オブジェクト自体のPropertyではなく、アクセス者Propertyです.プロトタイプオブジェクトのpropertyを継承します.
論点🎁
関数オブジェクトのパラメータproperty値はパラメータオブジェクトです.
パラメータオブジェクトは、関数呼び出し時に渡されるパラメータの情報を含む配列のようなオブジェクトであり、関数内部で領域変数として使用されます.
function sum() {
let res = 0;
for (const item of arguments) {
// arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다.
res += item;
}
return res;
}
console.log(sum());
console.log(sum(1));
console.log(sum(1, 2));
console.log(sum(1, 2, 3));
// 0
// 1
// 3
// 6
長さパーセント
関数を定義するときに宣言されるパラメータの数を指します.
名義財産
ES 6より前に空の文字列の値を返す
ES 6から関数名を返します.var namedFunc = function foo() {};
console.log(namedFunc.name);
var namedFunc1 = function () {};
console.log(namedFunc1.name);
function bar() {}
console.log(bar.name);
// foo
// namedFunc1
// bar
プロトタイプスキーム
コンストラクション関数で呼び出すことができるオブジェクト、すなわちコンストラクション関数のみが持つプログラムです.
Reference
この問題について(モダンJavaScript-Deep Dive 17,18[コンストラクション関数によるオブジェクト、関数、および一級オブジェクトの作成]), 我々は、より多くの情報をここで見つけました
https://velog.io/@gavri/모던-자바스크립트-Deep-Dive-1718-생성자-함수에-의한-객체-생성함수와-일급-객체
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
const circle1 = {
radius:5,
getDiameter(){
return 2 * this.radius
}
}
const circle2 = {
radius:10,
getDiameter(){
return 2 * this.radius
}
}
function Circle(radius) {
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
const circle1 = new Circle(5);
const circle2 = new Circle(10);
// 프로퍼티구조가 동일한 객체를 여러 개 생성할 경우 편리하다.
function Circle(radius){
console.log(this); // Circle ()
...
}
function Circle(radius) {
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
return this; // 1.암묵적으로 this 가 리턴된다
return {}; // 2.객체를 반환하는 경우 암묵적 this반환이 무시된다
return 100; // 3.원시값을 반환할 경우 무시되고 this가 반환된다.
}
console.log(new Circle(5));
// 1. Circle { radius: 5, getDiameter: [Function (anonymous)] }
// 2. {}
// 3. Circle { radius: 5, getDiameter: [Function (anonymous)] }
function foo() {}
// 일반적인 함수로서 호출 : [[Call]]이 호출된다
foo()
// 생성자 함수로서 호출 : [[Construct]]이 호출된다
new foo();
// constructor
function foo(){}
const bar = function () {};
const baz = {
x:function () {}
};
// non-constructor
const arrow = () => {}
const person = {
name:"Lee",
getName(){
return this.name
}
}
new arrow() // TypeError
new person.getName() // TypeError
function Circle(radius) {
if(!new.target){ // 함수가 new 연산자와 함께 호출되지 않으면 new.target은 undefined을 반환한다.
return new Circle(radius);
}
...
}
const circle = Circle(5); == new Circle(5)
一級オブジェクト
次の条件を満たすオブジェクトを1レベルオブジェクトと呼びます.
1.無名の文字を生成できます.つまり、実行時に生成できる
2.変数または資料構造に格納できます.
3.関数に渡すことができるパラメータ.
4.関数の戻り値として使用できます.
関数オブジェクトの構成
function square(number) {
return number * number;
}
console.dir(Object.getOwnPropertyDescriptors(square));
{
length: { value: 1, writable: false, enumerable: false, configurable: true },
name: { value: 'square', writable: false, enumerable: false, configurable: true },
arguments: { value: null, writable: false, enumerable: false, configurable: false },
caller: { value: null, writable: false, enumerable: false, configurable: false },
prototype: { value: {}, writable: true, enumerable: false, configurable: false }
}
Arguments、caller、length、name、prototypeは、関数オブジェクトのデータpropertyです.これらのプロパティは、通常のオブジェクトにはない関数オブジェクトの固有のプロパティです.
__proto__
は、関数オブジェクト自体のPropertyではなく、アクセス者Propertyです.プロトタイプオブジェクトのpropertyを継承します.論点🎁
関数オブジェクトのパラメータproperty値はパラメータオブジェクトです.
パラメータオブジェクトは、関数呼び出し時に渡されるパラメータの情報を含む配列のようなオブジェクトであり、関数内部で領域変数として使用されます.
function sum() {
let res = 0;
for (const item of arguments) {
// arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다.
res += item;
}
return res;
}
console.log(sum());
console.log(sum(1));
console.log(sum(1, 2));
console.log(sum(1, 2, 3));
// 0
// 1
// 3
// 6
長さパーセント
関数を定義するときに宣言されるパラメータの数を指します.
名義財産
ES 6より前に空の文字列の値を返す
ES 6から関数名を返します.
var namedFunc = function foo() {};
console.log(namedFunc.name);
var namedFunc1 = function () {};
console.log(namedFunc1.name);
function bar() {}
console.log(bar.name);
// foo
// namedFunc1
// bar
プロトタイプスキーム
コンストラクション関数で呼び出すことができるオブジェクト、すなわちコンストラクション関数のみが持つプログラムです.
Reference
この問題について(モダンJavaScript-Deep Dive 17,18[コンストラクション関数によるオブジェクト、関数、および一級オブジェクトの作成]), 我々は、より多くの情報をここで見つけました https://velog.io/@gavri/모던-자바스크립트-Deep-Dive-1718-생성자-함수에-의한-객체-생성함수와-일급-객체テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol