给对象添加方法

对象的属性是以逗号结尾，写分号会报格式错误。最后一个逗号写不写都行。

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 = '![](rails.png)';
            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)

image.png

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 = '![](rails.png)';
            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 = '![](rails.png)';
                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 = '![](rails.png)';
            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 = '![](rails.png)';
            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>