2011-12-17 3 views
2

Привет, я довольно новичок в javascript. Поэтому я просто попытался создать простой объект, который рисует два квадрата в холст. Чтобы понять ориентацию объектов немного лучше, я помещаю их в разные объекты (где drawtest.js является основным). К сожалению, я не вижу, где моя ошибка. Я занимаюсь поиском сообщений в stackoverflow в течение нескольких часов, даже пример из моего взгляда (похожего) моего, как у меня, я не вижу разницы, но его версия работает. В поджигатель я получаю:instance.method не является функцией (javascript)

testobject.draw не является функцией

Что я забыл или сделал не так?

"index.html"

<!DOCTYPE html> 
<html> 

<head> 
<title>simple object test</title> 
<script src="js/drawtest.js" type="text/javascript"></script> 
<script src="js/testobject.js" type="text/javascript"></script> 

</head> 

<body> 

<canvas id="canvas" width="300" height="300"></canvas> 

</body> 

</html> 

TestFile "drawtest.js"

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

var canvas; 
var context; 

function init() 
{ 
canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 

testobject = new Test(context); 

testobject.draw(); //this is where I get testobject.draw is not a function 

} 

объект "testobject.js"

function Test(context){ 

this.context = context; 


Test.prototype= 
{ 

draw:. 
function() 
{ 
this.context.fillStyle = "rgb(200,0,0)"; 
this.context.fillRect (10, 10, 55, 50); 

this.context.fillStyle = "rgba(0, 0, 200, 0.5)"; 
this.context.fillRect (30, 30, 55, 50); 
} 
}; 
} 

ответ

3

несколько проблем:

  1. У вас есть ошибка синтаксиса:

    draw:. 
    // ^--- here 
    

    Удалить точку. Синтаксическая ошибка должна отображаться в консоли JavaScript/error любого браузера, который вы используете. Убейте систему меню вашего браузера, чтобы найти его инструменты для разработчиков; вы захотите ознакомиться с ними. Chrome имеет довольно хороший набор, последние версии Firefox встроены в них, более старые версии могут использовать плагин Firebug.

  2. Лучше не заменить функции конструктора prototype; вместо этого, просто добавьте к нему:

    Test.prototype.draw = function() { 
        this.context.fillStyle = "rgb(200,0,0)"; 
        this.context.fillRect (10, 10, 55, 50); 
    
        this.context.fillStyle = "rgba(0, 0, 200, 0.5)"; 
        this.context.fillRect (30, 30, 55, 50); 
    }; 
    
  3. Вы не хотите, чтобы ваши prototype изменения в функции конструктора, переместить эту часть за пределами функции конструктора. Таким образом, Test функции и связанные с ним свойства прототипа становится:

    function Test(context){ 
    
        this.context = context; 
    } 
    
    Test.prototype.draw = function() { 
        this.context.fillStyle = "rgb(200,0,0)"; 
        this.context.fillRect (10, 10, 55, 50); 
    
        this.context.fillStyle = "rgba(0, 0, 200, 0.5)"; 
        this.context.fillRect (30, 30, 55, 50); 
    }; 
    
+0

ах спасибо очень много, ошибка синтаксиса была ошибка при копировании пасты на этот сайт. но я попробую ваши советы – Eddy63

+0

Нет ничего плохого в замене всего прототипа собственным объектом, когда вы имеете дело со своими собственными функциями. Я просто рекомендую установить свойство constructor обратно в исходное, чтобы впоследствии вы могли использовать instanceof, если это необходимо. – zatatatata

+0

спасибо, что сделал трюк. Интересно, почему мой профессор тоже не делал этого? - – Eddy63

Смежные вопросы