JavaScript，获取复杂对象的方式总结。尴尬的class

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在各大编程语言里面，常理上来说，需要先定义一个类class，然后把这个类实例化获得一个实例化对象，然后再使用这个对象实现各种逻辑。这就是本文要讨论内容的主要情景模式。涉及的编程语言是JavaScript，在很久之前，JavaScript是没有class类的说法，但是没有class类的写法的。在ES6标准出现后，就有了class的写法。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程经验文章。测试环境：chrome@131.0.6778.70，nodejs@20.18.0。在JavaScript/Nodejs里面，class的地位非常尴尬的原因是：在它这个正统出现之前，就有了等效的其它写法（function）。关键这些写法（function）还不能被废弃。你说尴尬不尴尬吧？

引言

如果关注React的代码写法变化的话，是可以和本文的内容得到部分印证的。React组件的官方推荐写法，是越来越简化。从最开始的class A extends B，到class A，到目前的function()。全部走的是返璞归真的路线。

参考文章：

• https://newsn.net/say/react-component.html

定义一个对象

不通过class，也不通过function，仅仅通过{}就可以获得一个对象。相当于对class进行实例化的结果。参考代码:

let person = {
  name: "sunan",
  me: () => {
    console.log(`Me llamo ${this.name}`); //undefined
  },
  me2() {
    console.log(`Me llamo ${this.name}`); //sunan
  },
};
person.me();
person.me2();

输出：

Me llamo undefined
Me llamo sunan

实例化一个函数类

这段代码里面，定义类的方式是function，而不是class。在JavaScript里面，这个奇怪的类定义方式，已经被广泛支持，并且不可能被废除写法，连react官方都在推荐使用函数类。

function PersonFunction(name) {
  this.name = name; // 可能是因为这里的写法，导致箭头函数里面的this作用域变化
  this.me = () => {
    console.log(`Je m'appelle ${this.name}`); //sunan，注意这里的箭头函数，访问到了this!!
  };
  this.me2 = function () {
    console.log(`Je m'appelle ${this.name}`); //sunan
  };
}
let person = new PersonFunction("sunan");
person.me();
person.me2();

输出：

Je m'appelle sunan
Je m'appelle sunan

实例化class关键字类定义对象

通过目前已经被广泛支持的class类的写法，也可以获得一个实例化对象。和普通直接定义的对象相比，没有太大的差异。

class PersonClass {
  constructor(name) {
    this.name = name;
    this.me = () => {
      console.log(`제 이름이 ${this.name} 입니다`); //sunan
    };
    this.me2 = function () {
      console.log(`제 이름이 ${this.name} 입니다`); //sunan
    };
  }
  get me3() {
    console.log(`제 이름이 ${this.name} 입니다`); //sunan
  }
  me4() {
    console.log(`제 이름이 ${this.name} 입니다`); //sunan
  }
}
let person = new PersonClass("sunan");
person.me();
person.me2();
person.me3;
person.me4();

题外话：箭头函数与this

前面的文章里面，苏南大叔已经提到过：箭头函数本质上就是匿名函数。而匿名函数对于this的解释，是完全出乎意料的。所以，在本文正文所提到的三种对类方法的定义中，可以看到：虽然看起来效果是一致的。但是使用箭头函数的时候，可能会出现this无法访问的情况。

【非绝对】，上文例子路面就有能访问到的情况，在父级别主动写了this.name字样，然后在子级别里面就成功的拿到了this.name的值。理论上这个可以解释为变量作用域的问题。

结语

对象是一种复杂的数据类型，它可以存储多个键值对。类是通过class关键字定义的，它是对象的模板，包括数据属性和方法属性。当然，JavaScript官方肯定是推荐大家使用class关键字来定义一个类的。并不推荐使用function关键字定义一个类，那完全可能是一个美丽的误会写法。

本文的内容实际上是后文做铺垫的一篇文章，主要表述的观点就是：（实例化）对象和类定义之间，是有区别的，不能混淆。对于function类和class类，在细节上的比较，请期待后续文章解释。

苏南大叔的更多JavaScript文章，请点击：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。