"this" внутренний объект

Я пытаюсь вычислить пропорциональную высоту (исключая элемент статической высоты) из ширины, которая передается через запрос (по умолчанию - 560).

Однако wF.h оценивается как NaN. Если я заменил this.w на 560, он работает, но не при попытке ссылаться на свойство w wF.

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

Что дает?

Я отказываюсь использовать два простых вара подряд, потому что я пытаюсь получить хороший код из JS.

Update:

Спасибо всем, кто помог объяснить и решить мою проблему. Думаю, мне просто нужно привыкнуть к этому. Я буду устанавливать объект поэтапно, чтобы продолжить работу над проектом, хотя он все еще меня немного раздражает;). Я нашел и прочитал хорошую статью по этой теме для тех, кто сталкивается с подобными проблемами: http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

Ответы

Ответ 1

// 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 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;

Ответ 2

Привет, просто переопределите второе свойство как объект функции, и он будет работать. Я думаю, что можно получить доступ к контексту вызывающего объекта изнутри функции

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

alert(wF.h())

Ответ 3

Ключевое слово this относится к вызывающему контексту, а не к объекту.

Вам нужно сделать это в два этапа:

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

Ответ 4

Вам не нужно обертывать {...} в Object(). Это уже литерал объекта.

this не работает внутри объектного литерала, он указывает на объект, который в настоящее время работает в этой функции:

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

fn();

приведет к тому, что this укажет на объект window.

EDIT: предыдущий код не был предназначен для ответа, просто демонстрация того, что 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.

Ответ 5

Когда вы используете это в объявлении объекта JSON, он указывает на текущий экземпляр.

Вы можете попробовать этот код в консоли, чтобы лучше понять его:

Object({ w : 560, h : (312 - 42) / (560 / function(e){console.log(e);return e.w;}(this)) + 42 });