面向对象JavaScript中的属性遍历实现疑问

嘿，你这个思路特别棒！把相关属性和操作它们的方法封装在一起，刚好踩中了面向对象编程的核心——高内聚嘛！

你写的这段代码其实已经完美实现了你想要的功能：遍历对象里的非方法属性，把字符串属性转成大写。我来帮你拆解下逻辑，再给你几个实用的小建议：

先看你的核心实现代码：

const myObj = {
  prop1: "one",
  prop2: "two",
  myMethod: function() {
    Object.keys(this).forEach(prop => {
      if (typeof this[prop] !== "function"){
        this[prop] = this[prop].toUpperCase();
      }
    });
  },
}

console.log(myObj.prop1, myObj.prop2);
myObj.myMethod();
console.log(myObj.prop1, myObj.prop2);

这段代码的运行逻辑很清晰：

• Object.keys(this)会获取当前对象的所有可枚举属性名，这里就是prop1、prop2、myMethod
• 遍历每个属性名后，通过typeof判断属性值是不是函数，以此排除方法属性
• 对非函数属性调用toUpperCase()转成大写，再赋值回原属性

运行后控制台会先输出one two，调用myMethod()后就会输出ONE TWO，完全符合你的预期。

如果你想更贴近“类式”的面向对象写法（毕竟JS里用类封装会更清晰，还能方便创建多个实例），可以试试ES6的class语法：

class MyClass {
  constructor() {
    this.prop1 = "one";
    this.prop2 = "two";
  }

  myMethod() {
    Object.keys(this).forEach(prop => {
      if (typeof this[prop] !== "function") {
        this[prop] = this[prop].toUpperCase();
      }
    });
  }
}

const myObj = new MyClass();
console.log(myObj.prop1, myObj.prop2);
myObj.myMethod();
console.log(myObj.prop1, myObj.prop2);

另外还有个小细节要注意：如果你的对象后续可能加入非字符串类型的属性（比如数字、null之类的），直接调用toUpperCase()会报错，建议加个字符串类型的判断：

if (typeof this[prop] === "string") {
  this[prop] = this[prop].toUpperCase();
}

这样就能避免意外的类型错误啦！

备注：内容来源于stack exchange，提问作者user3425506