[AC] What is this?

advanced_this.js

let alphaPhoneX = {
  name: 'AlphaPhoneX',   
  price: 14999,          
  features: ['long battery life', 'AI camera'], 
  showPhoneInfo: function () {
    console.log('this now refers to', this)
    console.log(`The price of ${this.name} is $${this.price}`)
  }
}

// alphaPhoneX.showPhoneInfo()    // 'this' now refers to 'alphaPhoneX'

const showAlphaPhoneXInfo = alphaPhoneX.showPhoneInfo
showAlphaPhoneXInfo()

advanced_this_2.js

let alphaPhoneX = {
  name: 'AlphaPhoneX',   
  price: 14999,          
  features: ['long battery life', 'AI camera'], 
  showPhoneInfo: function () {
    console.log('this now refers to', this)
    console.log(`The price of ${this.name} is $${this.price}`)
    
    const self = this
    const showDetail = function () {
      console.log('self now still refers to', self)
    }
    showDetail()
  }
}

explicit_binding.js

const showPhoneInfo = function (ram, storage) {
  console.log(`The price of ${this.name} with ${ram}GB and ${storage}GM is $${this.price}, which has the newest features such as ${this.features.join(', ')}.`)
}

let alphaPhoneX = {
  name: 'AlphaPhoneX',   
  price: 14999,          
  features: ['long battery life', 'AI camera'], 
}

let alphaPhoneY = {
  name: 'AlphaPhoneY',   
  price: 18900,          
  features: ['water proof', 'high screen resolution'], 
}

// With .call()
// showPhoneInfo.call(alphaPhoneX, 3, 64)
// showPhoneInfo.call(alphaPhoneY, 6, 128)

// With .apply()
// showPhoneInfo.apply(alphaPhoneX, [3, 64])
// showPhoneInfo.apply(alphaPhoneY, [6, 128])

// With .bind()
const showPhoneInfoOfAlphaPhoneX = showPhoneInfo.bind(alphaPhoneX)
showPhoneInfoOfAlphaPhoneX(3, 64)

implicit_binding_1.js

/**
 * Implicit Binding - Situation 1
**/

let alphaPhoneX = {
  name: 'AlphaPhoneX',   
  price: 14999,          
  features: ['long battery life', 'AI camera'], 
  showPhoneInfo: function() {                   
     console.log(`The price of ${this.name} is $${this.price}, which has the newest features such as ${this.features.join(', ')}.`)
  }
}
alphaPhoneX.showPhoneInfo()

implicit_binding_2.js

/**
 * Implicit Binding - Situation 2
**/

const showPhoneInfo = function () {
  console.log(`The price of ${this.name} is $${this.price}, which has the newest features such as ${this.features.join(', ')}.`)
}


let alphaPhoneX = {
  name: 'AlphaPhoneX',   
  price: 14999,          
  features: ['long battery life', 'AI camera'], 
  showPhoneInfo: showPhoneInfo,
  similarPhone: {
    name: 'AlphaPhoneY',   
    price: 18900,          
    features: ['water proof', 'high screen resolution'], 
    showPhoneInfo: showPhoneInfo,
  }
}

alphaPhoneX.showPhoneInfo()
alphaPhoneX.similarPhone.showPhoneInfo()