JavaScript 中的类

当我提到 ES6 类时，你可能会赞叹 🎊 JS 终于引入了一种新的面向对象继承模型。其实也不完全是。它仍然使用现有的基于原型的继承（图中标记为“旧”）。但现在它看起来更像面向对象编程 (OOP)。太棒了！我觉得这个语法糖太棒了！

// Old way

var Meal = function(food) {
  this.food = food;
};

Meal.prototype.eat = function() {
  return '😋';
};

// Classes in ES6

class Meal {
  constructor(food) {
    this.food = food;
  }

  eat() {
    return '😋';
  }
}

定义一个类

对于有面向对象编程经验的人来说，这已经很好了。但对于刚接触这方面或者只是想友好提醒一下的人，第一步是创建我们的类。要使用的关键字是class。

class Meal {
  constructor(food) {
    this.food = food;
  }

  // Prototype Method
  eat() {
    return '😋';
  }

  // Static Method
  static utensil() {
    return '🥢';
  }
}

构造函数：这是一个用于初始化该类实例的特殊方法。这意味着，每当我们创建该类的新实例时，它都会调用构造函数。这是一个设置属性和赋值参数的好地方。在我们的例子中，我们希望确保当有人创建新Meal实例时，他们已经准备好了服装。

原型方法：原型方法是指只有在创建类的实例时才可以访问的方法。稍后我将通过示例向你解释这一点。

静态方法：静态方法是指无需实例化类即可调用的方法。稍后会详细介绍。

创建类实例

太好了，现在你已经创建了这个类。让我们使用关键字创建它的一个实例new。

class Meal { ... }

const dumpling = new Meal('🥟');

现在我们可以调用原型方法：

dumpling.eat();
// '🥟'

⚠️但是！您无法访问静态方法。

dumpling.utensil();
// TypeError

这是因为静态方法不能被实例访问。它只能由类调用

Meal.utensil();
// '🥢'

静态方法与实例方法

所以你一定想知道什么时候应该使用静态方法还是实例方法。答案很简单：当你不想创建类的实例时，可以使用静态方法。哈哈，我知道这个答案可能不太令人满意。大多数情况下，你会看到静态方法用于为应用程序创建实用函数。其他时候，最好还是使用实例方法。

没有箭头函数

ES6 引入的另一个很酷的功能是箭头函数

MDN：箭头函数表达式是常规函数表达式的一种语法紧凑的替代方案，尽管它没有自身绑定到 this、arguments、super 或 new.target 关键字。箭头函数表达式不适合用作方法，也不能用作构造函数。

箭头函数没有原型属性

因此，以非糖的方式，请注意我们使用了function关键字：

var Meal = function(food) {
  this.food = food;
};

Meal.prototype.eat = function() {
  // <-- No Arrow Function
  return '😋';
};

箭头函数没有prototype属性，所以我们不能使用箭头函数。

// ❌
Meal.prototype.eat = () => '😋';
Meal.prototype; // undefined

箭头函数没有 New 运算符

第二件事，箭头函数不能用作构造函数。

// ❌
const Meal = () => {}

const rawChicken = new Meal()
// TypeError: Meal is not a constructor

因此，这里还有另一个您应该使用常规function语法的地方。

// ✅
const Meal = function(){}

const cookedChicken = new Meal()

糖对你有害！

有些人可能会认为这class很糟糕，因为它掩盖了 JS 的本质。我认为这绝对是有道理的。让我们回顾一下类的初衷。引入类是为了让 JavaScript 更容易上手 👍

对于之前学习过 Ruby 或 Python 等面向对象编程语言的人来说，由于熟悉的语法，JS 的学习过渡会更加轻松。对于新手来说，这意味着可以更快地上手并做好准备。一旦开始学习，希望你能够更深入地研究 JS，了解其背后的原理 🤓

但是一勺糖就能让药效下降...🎶

学习一门新语言很难，所以如果我们能让这个过程更容易一些，我认为这是件好事。当所有东西都向你袭来时，你很容易不知所措。这就像试图从消防水管里喝水，结果却什么水也喝不完。这就是为什么教程都是循序渐进的。没有人能一下子从白带到黑带。你必须经历这个过程，这需要时间。

那么你应该聘用class吗？——这取决于你和你的团队。就像我常说的，没有绝对正确的方法；正确的方法永远取决于具体情况😉 我们不要立即将“糖”视为坏事。作为开发者，我们应该始终对新想法保持开放的心态。少一些评判，多一些倾听，并假设对方是善意的😊

社区意见

请注意，当您typeof在某个类上使用时，它将返回function。

class someClass {}

typeof someClass; // 'function'

谢谢@ianwijma

资源

• MDN Web 文档：类
• w3schools：课程
• 箭头函数 否 否
• 理解 JavaScript 中的类
• 暴露JS：类
• JavaScript 类完全指南
• EloquentJS：对象

感谢阅读❤
欲了解更多代码花絮，请访问samanthaming.com