jsFiddle не распознает классы?

Question

Первоначально зарегистрированный здесь: Why is my jsfiddle Javascript class not defined?

Однако, по моей реализации, я вижу подобное поведение, но ни один из ответов не применяется.

foo(); 
baz = new bar(); 
baz.getMessage(); 

function foo() { 
    $('#foo').html("I am foo."); 
} 

function bar() { 
    this.message = "I am bar."; 

} 
bar.prototype = { 
    getMessage: function() { 
     $('#bar').html(this.message); 
    } 
}; 

Fiddle расположен по адресу: http://jsfiddle.net/eggmatters/qeufnpoj/2/

Firebug отчетности: "TypeError: baz.getMessage не является функцией."

Answer 1

Это из-за местоположения bar.prototype. В частности потому, что после создания экземпляра и вызвать и как таковые не будут определены еще:

baz = new bar(); 
baz.getMessage(); 
... 
bar.prototype = { ... } 

Это означает, что getMessage() еще не определено, обратите внимание, что вы используете назначение =, а это означает, что getMessage() не будет пока эта строка не будет достигнута в коде. Решение состоит в том, что bar.prototype определяется первым:

bar.prototype = { ... } 
... 
baz = new bar(); 
baz.getMessage(); 

Fiddle Example

Answer 2

Во-первых, ваш JS не выполняется. Если вы измените нагрузку на JS с «Нет обертки» в < голова > «на« onLoad », она будет работать.

Или, вы можете просто обернуть JS в функции OnLoad:

$(function() { 
    ... 
} 

или

window.onload = function() { 
    ... 
} 

Во-вторых, вы должны объявить прототип, прежде чем попытаться выполнить:

foo(); 
bar.prototype = { 
    getMessage: function() { 
     $('#bar').html(this.message); 
    } 
}; 
baz = new bar(); 
baz.getMessage(); 

function foo() { 
    $('#foo').html("I am foo."); 
} 

function bar() { 
    this.message = "I am bar."; 

} 

JSFiddle: http://jsfiddle.net/5drcuwx5/