为实例方法创建错误的引用(js的问题)

简介: 为实例方法创建错误的引用(js的问题)

考虑下面代码:

var MyObject = function() {}
  
MyObject.prototype.whoAmI = function() {
    console.log(this === window ? "window" : "MyObj");
};
 
var obj = new MyObject();

现在,为了操作方便,我们创建一个对whoAmI方法的引用,这样通过whoAmI()而不是更长的obj.whoAmI()来调用。

var whoAmI = obj.whoAmI;

为了确保没有问题,我们把 whoAmI 打印出来看一下:

console.log(whoAmI);

输出:

function () {
    console.log(this === window ? "window" : "MyObj");
}

Ok,看起来没啥问题。

接着,看看当我们调用obj.whoAmI()whoAmI() 的区别。

obj.whoAmI();  // Outputs "MyObj" (as expected)
whoAmI();      // Outputs "window" (uh-oh!)

什么地方出错了?当我们进行赋值时 var whoAmI = obj.whoAmI,新的变量whoAmI被定义在全局命名空间。结果,this的值是 window,而不是 MyObject 的 obj 实例!

因此,如果我们真的需要为一个对象的现有方法创建一个引用,我们需要确保在该对象的名字空间内进行,以保留 this值。一种方法是这样做:

var MyObject = function() {}
  
MyObject.prototype.whoAmI = function() {
    console.log(this === window ? "window" : "MyObj");
};
 
var obj = new MyObject();
obj.w = obj.whoAmI;   // Still in the obj namespace
 
obj.whoAmI();  // Outputs "MyObj" (as expected)
obj.w();       // Outputs "MyObj" (as expected)
相关文章
|
7月前
|
JavaScript 前端开发 Linux
|
6天前
|
JavaScript
js的三种引用方式
js的三种引用方式
15 2
|
6天前
|
JavaScript
为实例方法创建错误的引用(js的问题)
为实例方法创建错误的引用(js的问题)
10 0
|
8月前
|
JavaScript
|
6天前
|
缓存 JavaScript Java
thymeleaf引用JS加随机数防止缓存
thymeleaf引用JS加随机数防止缓存
28 0
|
10月前
|
JavaScript 前端开发 定位技术
js中引用高德地图
js中引用高德地图
69 0
|
9月前
|
JavaScript 定位技术
JS引用高德地图报错: AMap is not defined
JS引用高德地图报错: AMap is not defined
428 0
|
10月前
|
JavaScript
js引用值传递改变问题(使用深拷贝)
js引用值传递改变问题(使用深拷贝)
|
10月前
|
存储 人工智能 JavaScript
JavaScript变量原始值与引用值
相比于其他语言,JavaScript 中的变量可谓独树一帜。正如 ECMA-262 所规定的,**JavaScript 变量是 松散类型的**,而且变量不过就是特定时间点一个特定值的名称而已。由于没有规则定义变量必须包含什 么数据类型,变量的值和数据类型在脚本生命期内可以改变。这样的变量很有意思,很强大,当然也有 不少问题。本章会剖析错综复杂的变量。
46 0
|
JavaScript 前端开发
vue中引用第三方js总结
vue中引用第三方js总结
324 0
vue中引用第三方js总结