对象内部的“this”

IT技术 javascript object this
2021-02-01 07:27:16

我正在尝试从通过请求传入的宽度(默认为 560)计算比例高度(同时排除静态高度元素)。

但是,wF.h评估为NaN. 如果我更换this.w与560它的工作原理,但并不想引用时w的财产wF

var wF = {
       w : 560,
       h : (312 - 42) / (560 / this.w) + 42
};

是什么赋予了?

我拒绝连续使用两个普通变量,因为我试图从 JS 中获得好的代码。

更新:

感谢所有帮助解释和解决我的问题的人。我想我只能习惯了。我将分阶段设置该对象以继续该项目,尽管它仍然让我有点恼火;)。我为任何偶然发现类似问题的人找到并阅读了一篇关于该主题的好文章:http: //yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

5个回答
// Your code
var wF = {
       w : 560,
       h : (312 - 42) / (560 / this.w) + 42
};

this 不是你想的那样

JavaScript有没有块范围,唯一的功能范围:this里面的定义wF没有参考wF

(因此this.w,无论this什么,都是可能的undefined。除以undefined收益NaN。)

那么你可以尝试:

// Let's not use `this`
var wF = {
       w : 560,
       h : (312 - 42) / (560 / wF.w) + 42
};

你还没有完成定义对象

但是,您仍在定义您尝试使用的对象wF.w它还没有准备好


解决方案

所以,是的,您将不得不使用两个变量……或者分阶段设置对象:

// We can't even use `wF`; split up the property definitions
var wF = {};
wF.w = 560;
wF.h = (312 - 42) / (560 / wF.w) + 42;

嗨,只需将您的第二个属性重新定义为函数对象,它就会起作用。我认为可以从函数内部访问调用对象的上下文

var wF = {
    w : 560,
    h : function() { return (312 - 42) / (560 / this.w) + 42; }
};

alert(wF.h())
我无法让它与箭头功能一起使用,但这确实有效!
2021-03-20 07:27:16
@thatgibbyguy。我还没有尝试过使用数组成员。感谢分享!我学到了一些东西:-)
2021-03-20 07:27:16
它不适用于箭头函数,因为箭头函数没有自己的this- 它this从父函数上下文使用。
2021-03-21 07:27:16
@thatgibbyguy 我认为这根本行不通。箭头函数没有自己的这个=>看到:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... 在你的前任的this.matches.won和this.matches.draw将取自窗口/全局对象。所以,假设你有:var test = {matches: {played: 5, won: 4, draw: 0, lost: 1 }, points: () => (this.matches.won * 3) + (this.matches .draw * 1) } ,调用 test.points() 抛出错误:“未捕获的类型错误:无法读取未定义的属性 'won'”
2021-03-31 07:27:16
你实际上可以让箭头函数工作:{matches: {played: 5, won: 4, draw: 0, lost: 1 }, points: () => (this.matches.won * 3) + (this.matches.won * 3) match.draw * 1) } 。这适用于对象数组,直到您调用该函数时才会对其进行评估。
2021-04-02 07:27:16

this关键字是指调用上下文,而不是对象。

您需要分两步执行此操作,如下所示:

var wF = { w: 560 };
wF.h = (312 - 42) / (560 / wF.w) + 42;
你当然是对的,至少它会构建对象属性而不是普通变量,但我真的很沮丧,我必须按程序执行此操作:D
2021-03-27 07:27:16
并且使您的代码过于复杂。潜在的。
2021-03-31 07:27:16
如果您更喜欢 OO 方式,那么创建一个带有 getter 和 setter 的对象。这样您就可以在 getH() 函数的定义中使用 this.getW()。
2021-04-05 07:27:16

您不需要将 {...} 包装在 Object() 中。它已经是一个对象字面量。

this 不在对象字面量内操作,它将指向函数当前正在运行的对象,因此:

function fn() {
   var wF = { w : 560, h : (312 - 42) / (560 / this.w) + 42 };
}

fn();

将导致this指向window对象。

编辑:以前的代码并不是要作为答案,只是对是什么的演示this另一种可能性是使用一个将宽度作为参数的函数:

function getObject(width) {
    width = width || 560; //Default value to 560
    return { w: width, h : (312 - 42) / (560 / width) + 42 };
}

var wF = getObject(); //To get the default value, or specify a width otherwise.
@AlienWebguy 是的,因为它试图除以this.w,即window.w,未定义。
2021-03-22 07:27:16
这个答案没有帮助 - 请在发布之前测试您的代码。
2021-03-25 07:27:16
@TeslaNick:显然,这不是答案。它演示了为什么this在对象文字内部是错误的。
2021-04-03 07:27:16
这是对问题的一个很好的部分解释,但这里没有解决方案。
2021-04-07 07:27:16
@Nick Tomalak 是正确的。我添加了一些有效的代码。
2021-04-11 07:27:16

当您在 JSON 对象声明中使用 this 时,它指向当前实例。

您可以在控制台中尝试此代码以更好地理解它:

Object({ w : 560, h : (312 - 42) / (560 / function(e){console.log(e);return e.w;}(this)) + 42 });
这段代码证明这thiswindow因为,不,它根本“指向当前实例”。
2021-03-19 07:27:16
这也不是 JSON。
2021-04-05 07:27:16
因为您在窗口上下文中运行它。我的意思是当他使用 this.w 时,这并不指向 wf。
2021-04-13 07:27:16