JavaScript方法内属性访问、innerHTML属性判定及自定义属性方法实现

首先，在对象的方法里，我们通常用this关键字来访问对象自身的属性——这是最常用的方式。不过要注意不同场景下this的指向会有变化，下面举几个常见的例子：

1. 对象字面量中的方法 #

直接在对象里定义方法，this就指向这个对象本身：

const car = {
  brand: 'Tesla',
  getBrand() {
    // 用this访问brand属性
    return this.brand;
  }
};

console.log(car.getBrand()); // 输出: Tesla

2. 构造函数中的方法 #

如果用构造函数创建对象，方法里的this指向实例化的对象：

function Person(name) {
  this.name = name; // 给实例添加属性
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const alice = new Person('Alice');
alice.greet(); // 输出: Hello, I'm Alice

3. 注意箭头函数的特殊情况 #

箭头函数没有自己的this，它会继承外层作用域的this。如果在对象方法里用箭头函数定义内部函数，要小心：

const car = {
  brand: 'Tesla',
  getBrand: () => {
    // 这里的this不是指向car，而是外层作用域（比如全局window）
    return this.brand; // 会返回undefined
  }
};

所以一般不推荐用箭头函数作为对象的方法。

没错，innerHTML绝对是属性——它是DOM元素（Element对象）的一个内置属性，用于获取或设置元素内部的HTML内容。

要自定义类似的属性和方法，我们可以通过对象字面量、构造函数或者ES6的class来实现。下面用class举个贴近你示例的例子，模拟一个类似document.querySelector的方法和innerHTML属性：

// 模拟一个简易的DOM查询工具
class MiniDOM {
  // 构造函数初始化元素
  constructor(selector) {
    this.element = document.querySelector(selector);
  }

  // 自定义静态方法：类似querySelector
  static querySelector(selector) {
    return new MiniDOM(selector);
  }

  // 自定义属性：模拟innerHTML，用getter和setter实现读写
  get innerHTML() {
    return this.element.innerHTML;
  }

  set innerHTML(value) {
    this.element.innerHTML = value;
  }
}

// 使用示例，和你给出的代码逻辑一致
MiniDOM.querySelector('#heading').innerHTML = "Hello world";

如果用对象字面量的方式，也可以这么写：

const miniDOM = {
  querySelector(selector) {
    const element = document.querySelector(selector);
    // 返回包含自定义innerHTML属性的对象
    return {
      get innerHTML() {
        return element.innerHTML;
      },
      set innerHTML(value) {
        element.innerHTML = value;
      }
    };
  }
};

miniDOM.querySelector('#heading').innerHTML = "Hello world";

这里的关键是用getter和setter来模拟属性的读写行为，这样我们就能像使用内置属性一样操作自定义属性了。

内容的提问来源于stack exchange，提问作者gowtham Balasubramanian