Проблема с Javascript Классы

Question

Я играю с javascript, так что это может звучать как тривиальный вопрос. В части кода, как это:

function timeFunction(fn, nameOfFn){ 
var start = Date.now(); 
fn(); 
var end = Date.now(); 
var time = end - start; 
console.log(nameOfFn + ' took ' + time + 'ms'); 
} 

function Person(name){ 
this.name = name; 
this.sayName = function(){ 
    console.log(this.name); 
} 
} 

var bob = new Person('bob'); 
timeFunction(bob.sayName,'sayName'); 

Выход:

result 
sayName took 7ms 

(время будет каждый раз отличаться запуске кода)

Не уверен, где «результат» приходит и почему " Боб 'не показан.

Answer 1

В вашей sayName() функция this не то, что вы ожидаете. Это фактически window, и поэтому вы регистрируете свойство window.name (что, случается, «результат» в вашем случае - я бы предположил, что вы тестируете свой код в jsfiddle?).

Это потому, что this в JavaScript задано в соответствии с тем, как вызывается функция, это не автоматически любой объект, к которому принадлежит функция. (На самом деле, функции которых на самом деле не «принадлежат» к объектам на всех - ваш bob объект не «собственный» .sayName(), он просто имеет ссылку на него.)

MDN объясняет thisin detail.

Один из способов получить свой код, чтобы вести себя так, как вы ожидаете, чтобы использовать .bind() method:

timeFunction(bob.sayName.bind(bob),'sayName'); 

Answer 2

Bob не показывается из-за различного объема this внутри sayName метода: попробуйте

function Person(name){ 
    var _this = this; 

    this.name = name; 
    this.sayName = function(){ 
     console.log(_this.name); 
    } 
} 

или, еще лучше, используйте bind(), также предложенный @nnnnnn в предыдущем ответе.

(и я не могу видеть «результат» строку, когда я исполняю свой код, может быть, это происходит из другой части кода)