Question

如何用面向对象创建canvas

Answer 1

导读：经常看到一些JavaScript的代码脏乱得无法理解，到处都是属性和方法，或者一个循环套着一个循环。但如果使用面向对象就能很好的理清代码，并方便理解和修改代码。如果你不希望自己的代码只有上帝理解的话，就请尽量考虑使用面向对象的模式。　　译文正文：　　到处都是属性、方法，代码极其难懂，天哪，我的程序员，你究竟在做什么？仔细看看这篇指南，让我们一起写出优雅的面向对象的JavaScript代码吧！　　作为一个开发者，能否写出优雅的代码对于你的职业生涯至关重要。随着像Node.js这类技术的发展，你甚至可以在服务器端使用JavaScript了。同样的，你也可以使用JavaScript来控制MongoDB的持续数据存储。　　文本标记　　文本标记只是JavaScript里创建对象的一种方法，当然这里肯定不止这一种，但它是你在只打算创建一个对象实例时的首选方法。　　varbill={};　　上面的代码并不实用，它只是一个空对象。接下来我们动态地向这个对象中添加一些属性和方法。　　bill.name="BillEGoat";　　bill.sound=function(){　　console.log('bahhh!');　　};　　　　这里添加了属性name，并且给它分配了值"BillEGoat"。我们并不需要先创建一个空对象，而可以把所有代码直接写在一对括号里。　　varbill={　　name:"BillEGoat",　　sound:function(){　　console.log('bahhh!');　　}　　};　　　　是不是很美观？访问它的属性和方法就像呼吸一样简单、自然。　　bill.name;//"BillEGoat"　　bill.sound();//"bahhh"　　　　如果属性名不是一个合法的标志符，我们还可以这样访问它：　　bill['name'];//"BillEGoat"　　注意：我在调用方法时在其后添加了圆括号。现在，我们再重写一下当前的sound方法，并添加一个参数。　　bill.sound=function(noise){　　console.log(noise);　　};　　bill.sound("brrr!");//"brrr!"He'scold:)　　　　很好，我们已经传入参数了，并且在方法定义中访问了它。接下来，向对象中增加一个新方法来访问name属性。　　bill.sayName=function(){　　console.log("Hello"+this.name);　　};　　bill.sayName();//"HelloBillEGoat"　　　　我们可以使用this.propertyName（在本例中即this.name）在方法内访问属性。　　bill.sayName;//function　　怎么回事？访问sayName方法返回了一个方法定义。现在让我们再深入些。　　varsound=bill.sound;　　sound('moo!');//"moo!"　　　　现在我们指定了sound方法为一个局部函数，可以调用这个函数并且传递参数。你认为在复制bill的时候会发生什么？（类比下克隆羊Dolly）　　varsally=bill;　　sally.name;//"BillEGoat"，可它的名字是Sally　　sally.name="Sally";　　sally.name;//"Sally"，好些了　　bill.name;//"Sally"，问题又转移到bill身上了　　　　上面的例子中我们新建了一个变量sally，并使它和bill相同，所以bill和sally会在内存中引用了同一个对象。这时候给改变一块它们就会同时发生改变。再看看下面这段代码：　　bill.name="BillEGoat";　　bill.sayName();//"HelloBillEGoat";　　varsayName=bill.sayName;　　sayName;//function目前为止一切顺利　　sayName();//"Hello"，为什么这里又不再显示bill的名字了？　　　　转载