JavaScript for Kids 学习笔记11. 面向对象

1. 一个简单的 Object

var dog = {
    name: "Pancake",
    legs: 4,
    isAwesome: true
};

dog.name;

dog.age = 6;

2. 给Object添加成员函数

dog.bark = function() {
    console.log("Woof woof! My name is " + this.name + "!");
};

dog.bark();   // 调用一下试试

this.name    // this , 表示自己.   this.name 就是 “自己的名字”

3. 在多个Object之间共享一个成员函数

var speak = function () {
    console.log(this.sound + "! My name is " + this.name + "!");
};

var cat = {
    sound: "Miaow",
    name: "Mittens",
    speak: speak
};

var pig = {
    sound: "Oink",
    name: "Charlie",
    speak: speak
};

var horse = {
    sound: "Neigh",
    name: "Marie",
    speak: speak
};

4. 构造函数

var Car = function (x, y) {
    this.x = x;
    this.y = y;
};

var tesla = new Car(10, 20);
console.log(tesla);

var nissan = new Car(100, 200);
console.log(nissan);

这里的Car就是一个function，真的。虽然从名字来看，它更像其他语言中的 class，但它依然只是一个function。在调用这个函数时，前面加个new，就生成了一个Object。

下面是在Chome控制台的显示结果。 注意 Object.getPrototypeOf( ) 这个函数。

我们随便写个函数，在调用时前面加个new，都会生成一个Object。如下图所示：

5. 在html上显示一辆小汽车

var drawCar = function (car) {
    var carHtml = '<img src="img/car.png">';
    var carElement = $(carHtml);   // jQuery, 用html代码生成一个DOM元素
    carElement.css({               // jQuery函数 css( )，设置css
        position: "absolute",
        left: car.x,
        top: car.y
    });

    $("body").append(carElement);   // jQuery函数 append( ), 追加一个子节点
};

drawCar(tesla);
drawCar(nissan);

6. 把上面的drawCar函数变成Car的成员函数

Car.prototype.draw = function () {
     var carHtml = '<img src="img/car.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.draw();
 nissan.draw();

Car.prototype.draw 注意这里的 prototype ， 这是添加成员函数的方法。

7. 添加一个moveRight成员函数

Car.prototype.moveRight = function () {
    this.x += 5;
    this.carElement.css({
        left: this.x,
        top: this.y
    });
};
    
tesla.moveRight();
nissan.moveRight();

8. 添加动画，小汽车动起来

setInterval(function(){
        tesla.moveRight(10);
    }, 
    1000);