Published
Edited
Jul 12, 2018
{
const button = {
label: 'Sing',
sound: 'La la la!',
sing: function(){
console.log(this) // checkout browser console
}
}
button.sing() // sing is called in button object context
const singFunction = button.sing
console.log(singFunction === button.sing) // the same function
singFunction() // sing is called with NO context
}
{
const car = {
model: 'Peugeot 407',
sound: 'Wrrr!',
makeSound: function(){
console.log(this.sound)
}
}
car.makeSound()
}
{
const car1 = {
model: 'Peugeot 407',
sound: 'Wrrr 1!',
makeSound: function(){
console.log(this.sound)
}
}
const car2 = {
model: 'Hunadi i30',
sound: 'Wrrr 2!',
makeSound: car1.makeSound
}
const car3 = {
model: 'Peugeot 607',
sound: 'Wrrr 3!',
makeSound: car1.makeSound
}
car1.makeSound()
car2.makeSound()
car3.makeSound()
}
{
const makeSound = function(){
console.log(this.sound)
}
const car1 = {
sound: 'Wrrr 1!',
makeSound: makeSound
}
const car2 = {
sound: 'Wrrr 2!',
makeSound: makeSound
}
const car3 = {
sound: 'Wrrr 3!',
makeSound: makeSound
}
car1.makeSound()
car2.makeSound()
car3.makeSound()
}
{
console.log(this) // WARNING! Here this is undefined, in browser will be window!
const makeSound = () => {
console.log(this.sound)
}
const car1 = {
sound: 'Wrrr 1!',
makeSound: makeSound
}
const car2 = {
sound: 'Wrrr 2!',
makeSound: makeSound
}
const car3 = {
sound: 'Wrrr 3!',
makeSound: makeSound
}
car1.makeSound()
car2.makeSound()
car3.makeSound()
}
{
const makeSound = function(){
console.log(this.sound)
}
const bindedMakeSound = makeSound.bind({ sound: 'Lalala!' })
const car1 = {
sound: 'Wrrr 1!',
makeSound: makeSound,
bindedMakeSound: bindedMakeSound
}
car1.makeSound() // this point to executoion context - car1
car1.bindedMakeSound() // this points to binded context - { sound: 'Lalala!' }
bindedMakeSound() // even it was called without context this points to to binded context - { sound: 'Lalala!' }
const bindedMakeSound2 = makeSound.bind(car1)
bindedMakeSound2() // even it was called without context this points to binded car1 object
}
{
const makeSound = function(){
console.log(this.sound)
}
const car1 = {
sound: 'Wrrr 1!',
makeSound: makeSound
}
car1.makeSound()
car1.makeSound.call({sound: 'Lalala'})
makeSound.call({sound: 'Lalala'})
car1.makeSound()
}
{
const sayHello = function(name, lastname){
console.log(this.hello + ' ' + name + ' ' + lastname)
}
const person = {
hello: 'Cześć',
sayHello: sayHello
}
person.sayHello()
person.sayHello('Mateusz', 'Choma')
person.sayHello.call({ hello: 'Hello' })
person.sayHello.call({ hello: 'Hello' }, 'Mateusz')
person.sayHello.call({ hello: 'Hello' }, 'Mateusz', 'Choma')
}
md`## Apply`
{
const sayHello = function(name, lastname){
console.log(this.hello + ' ' + name + ' ' + lastname)
}
const person = {
hello: 'Cześć',
sayHello: sayHello
}
person.sayHello()
person.sayHello('Mateusz', 'Choma')
person.sayHello.apply({ hello: 'Hello' })
person.sayHello.apply({ hello: 'Hello' }, ['Mateusz'])
person.sayHello.apply({ hello: 'Hello' }, ['Mateusz', 'Choma'])
}
{
const sayHello = function(){
console.log(this)
console.log('Hello ' + this.name + ' | ' + this.lastname + '!')
}
const me = {
name: 'Mateusz',
lastname: 'Choma',
sayHello: sayHello
}
me.sayHello()
const intervalId = setInterval(
me.sayHello.bind(me),
1000
)
setTimeout(
() => clearInterval(intervalId),
5000
)
}
{
const sayHello = function(){
console.log(this)
console.log('Hello (2) ' + this.name + ' | ' + this.lastname + '!')
}
const me = {
name: 'Mateusz',
lastname: 'Choma',
sayHello: sayHello
}
me.sayHello()
const intervalId = setInterval(
() => me.sayHello(),
1000
)
setTimeout(
() => clearInterval(intervalId),
5000
)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
