new post

Author: minerva-wow

Gemfile

@@ -11,4 +11,4 @@ platforms :mingw, :x64_mingw, :mswin, :jruby do
   gem "tzinfo-data"
 end
 
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+gem 'wdm', '>= 0.1.1' if Gem.win_platform?

_posts/2023-11-26-refactoring-js.md renamed to _posts/2023-11-25-refactoring-js.md

@@ -1,8 +1,8 @@
 ---
 title: From Clunky to Clean - Refactoring a JavaScript Image Toggle
-date: 2023-11-26 01:30:11 +0800
-categories: [front-end,js] 
-tags: [refactoring,js]
+date: 2023-11-25 01:30:11 +0800
+categories: [front-end, js] 
+tags: [refactoring, js]
 ---
 
 A simple image toggle can teach us key JS optimization principles. Let's break down the refactoring process.

_posts/2023-11-26-this-in-js.md

@@ -0,0 +1,80 @@
+---
+title: The Two Faces of 'this' in JavaScript
+date: 2023-11-26 01:30:11 +0800
+categories: [front-end, js] 
+tags: [this, js]
+---
+
+JavaScript's `this` is like a chameleon - its identity changes based on its surroundings. Let's dive into its true nature.
+
+## The Shape-Shifter
+```javascript
+// The global wanderer
+console.log(this); // Window or global
+
+// The loyal companion
+const ninja = {
+  name: 'Shadow',
+  strike() { return `${this.name} strikes!`; }
+};
+```
+
+## Lost in Translation
+The most treacherous scenarios occur during context transitions:
+
+```javascript
+const warrior = {
+  name: 'Storm',
+  attack() {
+    setTimeout(function() {
+      console.log(`${this.name} attacks!`); // Oops, this lost its way
+    }, 1000);
+  }
+};
+```
+
+## Arrow Functions: The Faithful Messenger
+```javascript
+const archer = {
+  name: 'Wind',
+  shoot() {
+    setTimeout(() => {
+      console.log(`${this.name} shoots!`); // Arrow keeps its promise
+    }, 1000);
+  }
+};
+```
+
+## The DOM's Special Rules
+```javascript
+button.addEventListener('click', function() {
+  this.classList.toggle('active'); // Browser's gift - 'this' is the button
+});
+
+button.addEventListener('click', () => {
+  // Arrow function ignores the gift, keeps its own 'this'
+  this.classList.toggle('active'); // Beware: 'this' isn't the button!
+});
+```
+
+## Modern Class: A Safe Haven
+```javascript
+class Knight {
+  constructor(name) {
+    this.name = name;
+    this.charge = () => `${this.name} charges forward!`;  // Bound forever
+  }
+  
+  defend() {
+    return `${this.name} raises shield!`;  // Class method, clear context
+  }
+}
+```
+
+## The Golden Rules
+- Regular functions: `this` is decided by the caller
+- Arrow functions: `this` is inherited from birth
+- Methods: `this` is the object before the dot
+- Event handlers: Trust regular functions, doubt arrows
+
+Remember: context is king, but arrow functions are loyal to their birthplace.