)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Log All Class Method Calls

  1. class ConfusingClass {
  2.   constructor() {
  3.     logMethodCalls(this)
  4.     this.confuseMe = 1
  5.     this.someFn(300)
  6.   }
  7.   someFn(startVal = 1) {
  8.     this.confuseMe = startVal
  9.     this.testFn(() => this.otherFn(123))
  10.   }
  11.   testFn(fn) {
  12.     this.confuseMe += 1
  13.     fn(this.confuseMe)
  14.   }
  15.   otherFn(value = 111) {
  16.     this.confuseMe += 2
  17.     this.testFn(() => this.confuseMe += value)
  18.  
  19.     this.confuseMe = this.add(this.confuseMe, 999)
  20.     console.log(this.confuseMe)
  21.   }
  22.   add(a, b) {
  23.     return a + b
  24.   }
  25. }
  26. const confusing = new ConfusingClass()
  27.  
  28. function logMethodCalls(target) { 
  29.   const keys = Object.getOwnPropertyNames(target.constructor.prototype)
  30.   for (let i = 0; i < keys.length; i++) {
  31.     const key = keys[i]
  32.     const propOrMethod = target[key]
  33.     if (typeof propOrMethod === 'function') {
  34.       target[key] = function(...args) {
  35.         console.log(key, '(', args.join(', '), ') - was run')
  36.         return propOrMethod.apply(target, args);
  37.       }
  38.     }
  39.   }
  40. }

This one is good for dealing with confusing classes with lots of method calls. It logs any time a method is called, what its name is and what arguments were passed to it. Sometimes this really beats stepping through breakpoints, at least in my experience…

// javascript // oop // tricks

Pass a Class

  1. function callMethods(evt) {
  2.   const e = new evt
  3.   e.one()
  4.   e.two()
  5. }
  6.  
  7. callMethods(class {
  8.   one() {
  9.     console.log('one')
  10.   }
  11.  
  12.   two() {
  13.     console.log('two')
  14.   }
  15. })

This is so tempting for something I want to do… but too strange to use probably… maybe…

// functions // hacks // humor // objects // oldschool // oop

super Methods Javascript

  1. class Person {
  2.   constructor(name, email) {
  3.     this.name = name;
  4.   }
  5.   toString() {
  6.     return `name: ${this.name}`;
  7.   }
  8. }
  9.  
  10. class Teacher extends Person {
  11.   constructor(name, subject) {
  12.     super(name);
  13.     this.subject = subject;
  14.   }
  15.   toString() {
  16.     return super.toString() + ` subject: ${this.subject}`;
  17.   }
  18. }
  19.  
  20. const teacher = new Teacher('testname', 'testSubject');
  21. console.log(teacher.toString());

This is from an old stackoveflow answer of mine…

// javascript // oop

Bind All Methods to a Class instance JavaScript

  1. function bindAll(target) {
  2.   const keys = Object.getOwnPropertyNames(target.constructor.prototype);
  3.   for (let i = 0; i < keys.length; i++) {
  4.     const key = keys[i];
  5.     const propOrMethod = target[key];
  6.     if (typeof propOrMethod === 'function') {
  7.       target[key] = target[key].bind(target);
  8.     }
  9.   }
  10. }
  11.  
  12. class Test {
  13.   constructor() {
  14.     bindAll(this);
  15.     document.addEventListener('click', this.onClick);
  16.   }
  17.   onClick(e) {
  18.     console.log('click', this);
  19.   }
  20.   otherMethod(e) {
  21.     console.log('test', this);
  22.   }
  23. }
  24.  
  25. const test = new Test();
  26.  
  27. setInterval(test.otherMethod, 1000);

This is useful when you know you need many methods of a given class to be bound to the classes instance. Another way to do this is to selectively use instance properties:

  1. class Test {
  2.   constructor() {
  3.     document.addEventListener('click', this.onClick);
  4.   }
  5.   onClick = e => {
  6.     console.log('click', this);
  7.   }
  8.   otherMethod e => {
  9.     console.log('test', this);
  10.   }
  11. }

Avoiding classes is another way to not have to deal with this issue 😉

// humor // javascript // oop

Recent

Archive

RSS
snippet.zone ~ 2021-23 /// {s/z}