为何Object.getOwnPropertyNames()未列出对象全部属性和方法？

嘿，这个问题其实涉及到JavaScript里原始值和包装对象的区别，还有自有属性 vs 原型属性的核心概念，我来给你讲明白～

你定义的str是字符串原始值（不是String对象），当你尝试访问它的属性或方法时，JavaScript会临时创建一个String包装对象来处理这个访问操作，但这个包装对象用完就会被销毁。

而Object.getOwnPropertyNames()这个方法的作用，是只返回对象自身拥有的属性/方法（也就是直接定义在对象本身上，不是从原型链继承来的成员）。像.toUpperCase()、.indexOf()这些字符串方法，其实是定义在String.prototype（String构造函数的原型对象）上的，属于所有字符串实例共享的原型属性，并不是str这个原始值对应的临时对象的自有属性，所以自然不会被Object.getOwnPropertyNames(str)列出来。

有两种常用的方式可以获取到这些字符串原型方法：

方法1：直接遍历String.prototype的自有属性 #

所有字符串的原型方法都挂载在String.prototype上，我们可以直接获取它的自有属性列表：

var str = 'Hello World!';
// 获取String原型上的所有自有属性（包含所有字符串方法）
var stringMethods = Object.getOwnPropertyNames(String.prototype);
console.log(stringMethods);
// 输出结果会包含toUpperCase、indexOf、slice、substring等方法

方法2：从字符串实例的原型链上获取 #

如果你想针对当前的字符串实例，从它的原型链上拿到继承来的方法，也可以这么做：

var str = 'Hello World!';
// 获取str对应的原型对象（也就是String.prototype）
var strPrototype = Object.getPrototypeOf(str);
// 遍历原型对象的自有属性
var inheritedMethods = Object.getOwnPropertyNames(strPrototype);
console.log(inheritedMethods);

额外补充：同时列出自有属性和原型方法 #

如果你想一次性拿到字符串的自有属性（比如你之前得到的"0","1","length"等）和所有原型方法，可以把两个数组合并：

var str = 'Hello World!';
var ownProperties = Object.getOwnPropertyNames(str);
var prototypeMethods = Object.getOwnPropertyNames(String.prototype);
var allMembers = [...ownProperties, ...prototypeMethods];
console.log(allMembers);

把你的代码改成这样就能看到所有字符串方法了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Display properties and methods from objects</title>
</head>
<body>
<script type="text/javascript">
    var str= 'Hello World!';
    // 获取String原型上的所有方法
    var listPropertiesMethods = Object.getOwnPropertyNames(String.prototype);
    console.log(listPropertiesMethods);
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Federico Gentile