给对象添加方法
对象的属性是以逗号结尾，写分号会报格式错误。最后一个逗号写不写都行。
duck={
name: 'Kitty';
}
duck.introduction = function(){
console.log("Woof,the name is"+this.name+"!");
}
>> Uncaught SyntaxError: Unexpected token ;
duck={
name: 'Kitty',
}
duck.introduction = function(){
console.log("Woof,the name is"+this.name+"!");
}
function (){
console.log("Woof,the name is"+this.name+"!");
}
duck.introduction()
>> Woof,the name isKitty!
this关键字
方法中使用 this 关键字来表示当前在其上调用方法的对象实例。例如,当在 duck.introduction()方法调用的时候,this 引用的就是duck对象实例,因此 this.name就是duck.name。
在多个对象之间共享方法
就是一个函数作为属性值，赋值给多个不同对象
var introduction = function(){
console.log(this.sound+ "! My name is " + this.name+ "!");
};
var cat ={
sound: "Miao,Miao",
name: "Kitty",
introduction: introduction
};
var pig = {
sound: "O.O,O.O",
name: "bajie",
introduction: introduction
};
cat.introduction();
pig.introduction();
>> Miao,Miao! My name is Kitty!
>> O.O,O.O! My name is bajie!
使用构造方法创建对象
向上面那个例子，如果我们几百只不同物种的动物，那么我们就需要为为每个动物定义几百次的属性和属性值。这样很麻烦，于是就可以使用构造方法创建对象。
如下，我们的构造方法是Car，使用new关键字调用创建了两个对象Car对象，名为tesla和nissan。对象保存图片的坐标位置，然后我们根据这两个对象实例的坐标属性绘制出两张图片。也就是我们每次定义一个新的对象，都可以直接调用绘制图片方法，而不是每次都要给对象设置一个属性值为绘制方法后才能调用。
0，每次调用一个构造方法,它都会创建一个对象,调用构造方法与调用普通方法区别在于需要new关键字。
1，carHtml变量保存了HTML代码的字符串，用单引号创建这个字符串,从而允许我们在 HTML 中使用双引号"rails.png"。
2，carHTML 传递给 $ 函数,该函数将其从一个字符串转换为一个 jQuery 元素,像我们前面用过的$("#map")这种就是jQuery元素。
3，carElement 上使用 css 方法来设置图像在浏览器窗口的位置，注意css里面设置属性是键值对所以是逗号结尾不然报格式错误（构造方法this.x=x;是赋值语句，所以结尾是分号）。
注意，构造方法中设置对象的属性，是使用this.x= x这样或者this.run=function(){}这样，也就是说构造方法中this.x = x这样完成两件事：1是实现定义属性，2是初始化属性值。
<body>
<script type="text/javascript">
var Car=function(x,y){
this.x=x;
this.y=y;
};
var drawCar=function (car){
var carHtml = '';
var carElement = $(carHtml);
carElement.css({
position: "absolute",
left: car.x,
top: car.y
});
$("body").append(carElement);
};
var tesla = new Car(20,20);
var nissan = new Car(100,200);
drawCar(tesla);
drawCar(nissan);
</script>
</body>
效果如下，两个图像左上角坐标分别是(20,20),(100,200)
css 方法就像我们前面用来在页面上移动像素的 offset 方法一样工作。遗憾的是,offset 不能用于多个元素,由于我们想要绘制多个图片,因此这里使用 css 来替代它。
用原型定制对象
在这个例子中,drawCar 函数总是drawCar(tesla)这样的使用方式，更加对象化的使用方式应该是tesla.draw()这种。
JavaScript 原型使得很容易在不同的对象之间共享功能(作为方法)。所有的构造方法都有一个 prototype 属性,并且可以为其添加方法。给构造方法的 prototype 属性添加方法都相当于该构造方法里面直接定义的方法。使用原型就是可以在构造方法确定之后，后面动态地拓展构造方法。
<body>
<script type="text/javascript">
var Car=function(x,y){
this.x=x;
this.y=y;
};
Car.prototype.huihua = function (){
var carHtml = '';
var carElement = $(carHtml);
carElement.css({
position: "absolute",
left: this.x,
top: this.y
});
$("body").append(carElement);
};
var tesla = new Car(20,20);
var nissan = new Car(100,200);
tesla.huihua();
nissan.huihua();
</script>
</body>
上方的代码等价于如下代码：
<body>
<script type="text/javascript">
var Car=function(x,y){
this.x=x;
this.y=y;
this.huihua=function(){
var carHtml = '';
var carElement = $(carHtml);
carElement.css({
position: "absolute",
left: this.x,
top: this.y
});
$("body").append(carElement);
}
};
var tesla = new Car(20,20);
var nissan = new Car(100,200);
tesla.huihua();
nissan.huihua();
</script>
</body>
如果写成如下形式也是一样的效果，不过为构造方法添加了一个新的属性carElement
<body>
<script type="text/javascript">
var Car=function(x,y){
this.x=x;
this.y=y;
};
Car.prototype.huihua =function (){
var carHtml = '';
this.carElement = $(carHtml);
this.carElement.css({
position: "absolute",
left: this.x,
top: this.y
});
$("body").append(this.carElement);
};
var tesla = new Car(20,20);
var nissan = new Car(100,200);
tesla.huihua();
nissan.huihua();
</script>
</body>
同理，我们多次拓展构造方法，如下定义了绘制 图片修改位置的方法
<body>
<script type="text/javascript">
var Car=function(x,y){
this.x=x;
this.y=y;
};
Car.prototype.huihua =function (){
var carHtml = '';
this.carElement = $(carHtml);
this.carElement.css({
position: "absolute",
left: this.x,
top: this.y
});
$("body").append(this.carElement);
};
Car.prototype.moveToLeft = function(){
this.x-=80;
this.carElement.css({
left: this.x,
top: this.y,
});
};
var tesla = new Car(20,20);
var nissan = new Car(100,200);
tesla.huihua();
nissan.huihua();
nissan.moveToLeft();
</script>
</body>
