関数とクラス
3505 ワード
関数とは?
関数(function)は、特別な目的のタスクを実行するための独立したブロックです.
似たようなタスクを繰り返し使用すると便利です.
関数宣言vs関数式
関数宣言(function declaration)は、次の形式で使用されます.function hello() {
console.log( '안녕하세요!' );
}
JavaScriptの関数は값
なので、변수
に割り当てることができます.let hello = function() {
console.log( '안녕하세요!' );
}
変数に割り当てると、関数式(Function Expressions)になります.
二人の違いは何ですか。🤔
1つ目はHoistingの違いですhello();
function hello() {
console.log('안녕하세요'); //성공적으로 출력
}
関数が最初に宣言されても
JavaScriptエンジンでは、起動によって一番上に引き寄せます.
ただし、関数式でエラーが発生します.😥hello();
const hello = function(){
console.log('안녕하세요'); //에러발생
}
矢印関数
ES 6以降の構文では,関数式の使用がより簡単になる.화살표 함수 (arrow function)
ですlet sum = function(){}
上記の関数式は次のようになります.let sum = () => {}
本明細書に1行しかない場合は、次のように括弧を省略できます.let sum = (a, b) => a + b;
ただし、本明細書でカッコを使用する場合は、戻り値を入力する必要があります.let sum = (a, b) => { // 중괄호
let result = a + b;
return result; // return
};
インスタント実行関数
1つの関数を定義し、1回のみ実行する場合は、関数名を定義および呼び出す必要はありません.
匿名関数を作成して実行できるからです.(function (){
console.log('안녕'); // 안녕
})()
実行関数をすぐに書き込む場合は、function(){}
構造に()()
カッコを2つ作成します.
かっこに入れればいいです(이곳)()
だと上と同じ形になります.(function (){
console.log('안녕'); // 안녕
}());
同様に、function(){}
構造では、(())
括弧内に括弧が作成される.(이곳())
の前に置くと、すぐに実行関数になります.
重複するオブジェクト
オブジェクトテキストから複数のオブジェクトを作成できます.const gildong = {
firstName: 'Gildong',
lastName: 'Hong',
getFullName: function () {
return `${gildong.firstName}${gildong.lastName}`
}
}
console.log(gildong.getFullName());
const elon = {
firstName: 'Elon',
lastName: 'Musk',
getFullName: function () {
return `${elon.firstName}${elon.lastName}`
}
}
console.log(elon.getFullName());
別のオブジェクトを作成する場合は、繰り返します.重複するコードがあっても.😥
このとき使用できる関数はコンストラクション関数です.
コンストラクタ
コンストラクション関数は従来の関数と技術的に区別されていない.
しかし、これが構造関数であることを知るために、私たちは約束します.
function hello() {
console.log( '안녕하세요!' );
}
let hello = function() {
console.log( '안녕하세요!' );
}
hello();
function hello() {
console.log('안녕하세요'); //성공적으로 출력
}
hello();
const hello = function(){
console.log('안녕하세요'); //에러발생
}
let sum = (a, b) => { // 중괄호
let result = a + b;
return result; // return
};
(function (){
console.log('안녕'); // 안녕
})()
(function (){
console.log('안녕'); // 안녕
}());
const gildong = {
firstName: 'Gildong',
lastName: 'Hong',
getFullName: function () {
return `${gildong.firstName}${gildong.lastName}`
}
}
console.log(gildong.getFullName());
const elon = {
firstName: 'Elon',
lastName: 'Musk',
getFullName: function () {
return `${elon.firstName}${elon.lastName}`
}
}
console.log(elon.getFullName());
function User(first,last){
this.firstName = first,
this.lastName = last
}
User.prototype.getFullName = function (){
return `${this.firstName}${this.lastName}`
}
const elon = new User('Elon','Musk')
const gildong= new User('Gildong','hong')
console.log(elon.getFullName());
console.log(gildong.getFullName());
カテゴリ
コンストラクション関数では、より高度なクラスです.class User {
constructor() {} // 기본구조
}
User.prototype.getFullName = function (){
return `${this.firstName}${this.lastName}`
}
上記のプロトタイプ部分を内部で定義します.class User {
constructor(first,last) {
this.firstName = first
this.lastName = last
}
getFullName() {
return `${this.firstName}${this.lastName}`}
}
これは構造関数よりも定義しやすい.
このほか、クラスには継承などの機能も提供されています.
Reference
この問題について(関数とクラス), 我々は、より多くの情報をここで見つけました
https://velog.io/@hb-developer/함수와-클래스
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
class User {
constructor() {} // 기본구조
}
User.prototype.getFullName = function (){
return `${this.firstName}${this.lastName}`
}
class User {
constructor(first,last) {
this.firstName = first
this.lastName = last
}
getFullName() {
return `${this.firstName}${this.lastName}`}
}
Reference
この問題について(関数とクラス), 我々は、より多くの情報をここで見つけました https://velog.io/@hb-developer/함수와-클래스テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol