confusing js objects propertis

Question

var dataset = { num: 20 };
var svg = { w: 600 };
var column = {
    padding: 0.2,
    w: (svg.w/dataset.num)/(this.padding + 1),
    print: function(){
      console.log("through obj methord:" +
      (svg.w/dataset.num)/(this.padding + 1)
      );}
    };
column.print();
console.log(column);

above is the code, and it could be executed, and in the result, you could see the result of column.w is NAN, while the same calculation in the obj's method: print could give back the right answer: 25.

how could it be? even though i replaced (svg.w/dataset.num)/(this.padding + 1) by svg.w/(dataset.num*(this.padding + 1)) ,it is exactly the same. after i replace the variables like svg.w, dataset.num with its values, column.w becomes value 25 of course.

without knowing what your `this` variable reffers to, it's hard to tell. — Adam Baranyai, Jan 11 '19 at 13:32
if you replace your w: ..... with w: function() {return (svg.w/dataset.num)/(this.padding + 1); and then call it with column.w() it will work — Nicolo Lüscher, Jan 11 '19 at 13:37
yeah, I have done it already, i just confuse why @Bolphgolph — Huang Qinlai, Jan 11 '19 at 13:42
@HuangQinlai I recommend you read the answers under this Question https://stackoverflow.com/a/2787621/7241459 — Nicolo Lüscher, Jan 11 '19 at 13:46

Adam Baranyai · Accepted Answer · 2019-01-11T13:41:30.960

0

Try changing the this.padding to the value 0.25.

Javascript does not know what your this variable reffers to.

The “this” variable is a variable that each and every execution context gets, in a regular function call the “this” variable points at the global object or the window in the browser, which is the default. In a method call, which is a function within a variable, the “this” variable points at the method calling the object. The “this” variable is not assigned a value until the function where it is defined is actually called.

When you are using this in your code, it still points to the object which method you called. That object does not have a padding property, that's why your calculation can not be executed.

Read more about the this variable here

edited Jan 11 '19 at 13:41

answered Jan 11 '19 at 13:34

Adam Baranyai

3,635
3
29
68

you mean only in functions, *this* keyword will know which object it refers to? – Huang Qinlai Jan 11 '19 at 13:37
thank you, because this is a default global variable in the property, so it can't refer to the *column* object. and I also tried to replace *this* with *column*, and it says column is undefined without running over the column definition statement, so I think I should use the method when need *this* – Huang Qinlai Jan 11 '19 at 13:58

confusing js objects propertis

1 Answers1