JavaScript类方法赋值变量后上下文异常及相关疑问求助

1. 关于dom.text("mytext", "p")的含义 #

这是你定义的Popup类中dom对象的自定义方法，作用应该是创建一个指定类型的HTML标签，填入指定文本内容，并返回该DOM元素。参数说明：

• 第一个参数"mytext"：要插入到标签内的文本内容
• 第二个参数"p"：要创建的HTML标签类型（比如<p>段落标签）

2. 两种调用方式下this.dom不同的原因 #

JavaScript里函数的this指向完全由调用方式决定，和函数定义的位置无关：

• 直接调用this.view.popup.shower(...)时，函数是作为popup实例的方法执行的，此时shower内部的this指向popup实例，自然能访问到实例上的dom属性。
• 把shower赋值给变量fn后调用fn(...)，函数变成了普通独立函数执行：
  • 非严格模式下，this会指向全局对象（浏览器环境是window）
  • 严格模式下，this会是undefined
    不管哪种情况，这个this都不再是原来的popup实例，所以classInstance.dom（也就是this.dom）会找不到，触发“未定义”报错。

3. 通过变量调用函数且不破坏上下文的方法 #

有三种常用解决方案：

方案1：用bind绑定上下文 #

把函数和popup实例绑定，生成一个新函数，调用时this始终指向popup：

fn = this.view.popup.shower.bind(this.view.popup);
fn(label, stat.value, lst, myOtherfn);

方案2：用call/apply指定上下文 #

调用函数时直接传入要绑定的this对象：

fn = this.view.popup.shower;
fn.call(this.view.popup, label, stat.value, lst, myOtherfn);
// 也可以用apply，参数需放在数组中
// fn.apply(this.view.popup, [label, stat.value, lst, myOtherfn]);

方案3：用箭头函数包裹 #

箭头函数的this继承自外层作用域，写法更简洁：

fn = () => this.view.popup.shower(label, stat.value, lst, myOtherfn);
fn();

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