JavaScript中的方法调用：对象、类、值本身还是原型链上？

JavaScript语言总是能给人带来惊喜。在编写代码时，我们经常使用一些写法，却很少思考为何要这样操作。

今天整理JS代码时，突然产生了一些疑问：

• 为什么有些时候操作对象时，可以直接调用对象上的方法，但有些时候我们使用类似
  
Array.from()

  的写法？
• 在对象上调用的方法和在原型上调用的方法有什么区别？它们之间有什么相似之处？
• 为什么JS可以直接在基础类型值上调用对象上才存在的方法？基础类型值上调用的方法与在对象上调用的方法有何区别？

这些问题引发了我对JavaScript方法调用方式的思考。

瞟了眼我的代码，立马就发现了一个调用类上方法的片段：

const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true
// 但是如果在对象上调用，则会抛不存在的错误
console.log(obj.hasOwn('a')); // TypeError: obj.hasOwn is not a function

在上面的例子里，

Object.hasOwn

是一个可以直接调用的方法。但令人困惑的是，当我们尝试直接在对象实例上调用hasOwn方法时，却抛出了一个类型错误。这种现象背后的逻辑是我们需要区分JavaScript的静态方法和实例方法。

静态方法是定义在类上的方法，而不是在类的实例上。静态方法内部访问不到

this

与实例变量。因此，我们只能通过类来调用这些方法，而不能通过一个实例来调用。

class MyClass {
  static staticMethod() {
    console.log('这是个静态方法');
  }
}

MyClass.staticMethod(); // 正常执行
const myInstance = new MyClass();
myInstance.staticMethod(); // Error: myInstance.staticMethod is not a function

实例方法是定义在类的原型上的方法，实例方法内可以访问对象的属性，也可以访问

this

，可以直接在实例化对象上调用这些方法。

class MyClass {
  instanceMethod() {
    console.log('这是个实例/对象方法');
  }
}

const myInstance = new MyClass();
myInstance.instanceMethod(); // 正常执行

概括来说，

Object.hasOwn()

是一个需要传参的、在

Object

这个类上的静态方法，所以才需要在类上直接调用，而不能在实例对象上调用。而例如

arr.sort()

的调用，实际调用的是实例对象上的方法。

至于为何会做如此区分，原因是一个简单的面向对象编程需求：如果一个方法逻辑不涉及对象上的属性，但又逻辑上属于这个类，通过接受参数就可以实现功能的，则可以作为一个类的静态方法存在。但如果它需要直接访问类上属性，直接作为实例方法显然更加妥当。

JavaScript中的每个对象都有一个原型（prototype）（除了

Object.protoype

也就是所有原型的尽头），对象的方法实际上是定义在原型链上的。虽然我们可能是在对象上调用了一个方法，实际上JavaScript引擎会沿着原型链查找该方法并调用。

const arr = [1, 2, 3];
console.log(arr.join('-')); // "1-2-3"
console.log(Array.prototype.join.call(arr, '-')); // "1-2-3"

上面的例子里，

join

方法是数组的实例方法。实例方法可以直接在数组的实例上调用，也可以通过

Array.prototype.join.call

的方式来调用，这两者本质上是一样的。唯一区别是

Array.prototype.join.call

允许我们在任何类似数组的对象上调用这个方法，哪怕它不是一个真正的数组。

所以，在对象上调用实例方法，等同于按照这个对象的原型链一层一层向父类上找同名方法来调用。

虽然其他支持面向对象编程范式的语言也有类似行为，也就是对基本类型的自动包装和自动拆包，但为了百分百掌握JavaScript的行为与他们的异同，还是再来确定一遍吧。

每当我们在基本类型值上（例如

"hello"

或

6

）上调用方法，JavaScript引擎都会先使用基本类型对应的包装类型对值进行包装，调用对应的方法，最后将包装对象丢掉还原基础类型。这是个引擎内部的隐式操作，所以我们没有任何的感知。

JavaScript对于以下的基本类型，都有对应的包装类型。可以通过

typeof

操作结果是基本类型名还是

object

来确认：

• 
string

  –
  
String

• 
number

  –
  
Number

• 
boolean

  –
  
Boolean

• 
symbol

  –
  
Object

• 
bigint

  –
  
Object


让我们列一下他们基本类型对应包装类型的使用：

// string
const primitiveString = "hello";
const objectString = new String("hello");
console.log(typeof primitiveString); // "string"
console.log(typeof objectString); // "object"

// number
const primitiveNumber = 42;
const objectNumber = new Number(42);
console.log(typeof primitiveNumber); // "number"
console.log(typeof objectNumber); // "object"

// boolean
const primitiveBoolean = true;
const objectBoolean = new Boolean(true);
console.log(typeof primitiveBoolean); // "boolean"
console.log(typeof objectBoolean); // "object"

// symbol
const primitiveSymbol = Symbol("description");
const objectSymbol = Object(primitiveSymbol);
console.log(typeof primitiveSymbol); // "symbol"
console.log(typeof objectSymbol); // "object"

// bigint
const primitiveBigInt = 123n;
const objectBigInt = Object(primitiveBigInt);
console.log(typeof primitiveBigInt); // "bigint"
console.log(typeof objectBigInt); // "object"

所以，在基本类型上调用方法，等同于创建这个基本类型对应的包装类型的对象并调用方法，最后拆包并返回原始类型的值。本质上还是调用了同类型包装行为创建的对象上的方法。

"str".toUpperCase();
// 等同于
(new String("str")).toUpperCase()
// 当然，这里巧了，toUpperCase()本来也没想返回包装类型的对象

原来这个类、对象方法调用现象的原因其实一直都在我的大脑里。这只是面向对象编程中的一个很稀松平常的事实，但平时从来只是使用，还从来没联想过为何他会这样。

不知道你有没有感受到这种编程语言带来的实践经验与基础理论交融的乐趣。在一点点的实践中才会慢慢发现原来看似“这样写就能跑”的一些代码，其实背后都有曾经学习、分析过的程序概念和理论的支撑。这种感受或许就是编程快乐的其中之一个源头吧。

为大家的好奇心与耐心致敬。

未经允许不得转载：大白鲨游戏网 » JavaScript中的方法调用：对象、类、值本身还是原型链上？