🦔

【基礎】Javascriptの関数について

2022/11/24に公開約3,700字

関数について

あくまで関数というのはオブジェクトであり、実行可能という点だけ他のオブジェクトとは異なる。
それ以外は通常のオブジェクトと同じ挙動をとる。

プリミティブ型 オブジェクト
String(文字列型)、Number(数値型)、Boolean(論理型)、Undeifind、Null、Symbol(シンボル型)、BigInt(長整数型) Object、function(関数)
function a() {
 console.log('Hello')
}

a.prop = 0

a.hello = function() {
 conosle.log('Hello')
}

a() // 'Hello'
a.hello() // 'Hello'
console.log(a.prop) // 0

関数宣言で定義した関数に対してドット記法でプロパティやメソッドを登録できるため関数aはオブジェクトであると言える。末尾に()で関数を実行できる。(=実行可能なオブジェクトを実行する)

コールバック関数

他の関数に引数として渡される関数。

function hello() {
 console.log('Hello')
}

function fn(callback) {
 callback()
}

fn(hello) // 'Hello' -> fnの内部でhogeが実行される

コールバック関数が実行される時に引数がある場合

function hello(name) {
 console.log('Hello ' + name)
}

function bye() {
 console.log('Bye')
}

function fn(callback) {
 callback('Taro')
}

fn(hello) // 'Hello Taro'
fn(bye) // 'Bye'

無名関数での定義も可能。

function fn(callback) {
 callback('Taro')
}

fn(function() {
 console.log('Hello')
}) // 'Hello'

fn(function(name) {
 console.log('Hello ' + name)
}) // 'Hello Taro'

アロー関数

無名関数を記述しやすくした省略記法。ES6で導入された。

function a(name) {
 return 'Hello ' + name
}

const b = name => 'Hello ' + name
// -> 引数が1つの場合は()を、実行行が1行の場合はreturnと{}が省略可能

console.log(b('Taro')) // 'Hello Taro'

const c = (name, age) => 'Hello ' + name + ' ' + age

console.log(b('Taro', 14)) // 'Hello Taro 14'

const d = () => {
 return 'hello'
}
// -> 複数行の場合はreturnと{}が必要

無名関数とアロー関数の挙動の違い

無名関数 アロー関数
this、arguments、new、prototype ×

無名関数の場合のthisの挙動

window.name = 'Hanako'

const human = {
  name: 'Taro',
  hello() {
  console.log('Hello ' + this.name) // thisはhumanを参照する
 }
}

human.hello() // 'Hello Taro'

アロー関数の場合のthisの挙動

window.name = 'Hanako'

const human = {
  name: 'Taro',
  hello: () => {
  console.log('Hello ' + this.name) // thisを取らない
 }
}

human.hello() // 'Hello Hanako'

アロー関数で定義し、オブジェクトのメソッド内で呼び出した場合

window.name = 'Hanako'

const a = () => console.log('Bye ' + this.name)

const human = {
  name: 'Taro',
  hello() {
  console.log('Hello ' + this.name)
  a() // 'Bye Hanako'
 }
}

human.hello() // 'Hello Taro'

オブジェクトのメソッド内で定義し、オブジェクトのメソッド内で呼び出した場合

window.name = 'Hanako'

const human = {
  name: 'Taro',
  hello() {
  console.log('Hello ' + this.name)
  
  const a = () => console.log('Bye ' + this.name)
  a() // 'Bye Taro'
 }
}

human.hello() // 'Hello Taro'

関数内でアロー関数で定義し、呼び出した場合

window.name = 'Hanako'

const human = {
  name: 'Taro',
  hello() {
  console.log('Hello ' + this.name)
 }
}

function b() {
  const a = () => console.log('Bye ' + this.name)
  a()
}

b() // 'Bye Hanako'

コンストラクター関数

新しくオブジェクトを作成するための雛形となる関数。

function Test() {
 this.prop = 0;
}

const obj = new Test(); // newでオブジェクト作成

prototype(プロトタイプ)

オブジェクトに存在する特別なプロパティで、コンストラクター関数と合わせて使用する。

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

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

const taro = new Person("Taro", 24);

taro.hello(); // 'Hello Taro'

Discussion

ログインするとコメントできます