现在来创建一个Car构造方法,它将为所创建的每一个新的对象都添加一个x和y属性。这些属性将用来设置在屏幕上绘制每一个汽车的位置。

创建HTML文档

  在开始构建构造方法之前,需要先创建一个新的HTML文档。创建一个名为cars.html的新文件,并且在其中输入如下的HTML:

<!DOCTYPE html>
<html>
<head>
<title>Cars</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
// Code goes here
</script>
</body>
</html>

Car构造方法函数

  现在,将如下的代码添加到car.html中的空的<script>标签中(替换掉注释//Code goes here),以创建Car构造方法,它会给每一辆汽车一组坐标。

<script>
var Car = function (x, y) {
this.x = x;
this.y = y;
};
</script>

  新的构造方法Car接受参数x和y。我们已经添加了属性this.x和this.y,将传递给Car的x值和y值存储到新的对象中。通过这种方法,每次把Car当作一个构造方法调用的时候,都会创建一个新的对象,并且将其x和y属性设置为我们所指定的参数。

调用Car构造方法

  正如前面所提到的,关键字new告诉JavaScript我们要调用一个构造方法来创建一个新的对象。例如,要创建一个名为tesla的新的汽车对象,在Web浏览器中打开car.html,然后在Chrome JavaScript控制台中输入如下的代码:

  代码new Car(10,20)告诉JavaScript使用Car作为构造方法创建一个对象,传入参数10和20作为其x和y属性,并且返回该对象。使用var tesla 将返回的对象赋值给变量tesla。

  然后,当输入tesla的时候,Chrome控制台将返回构造方法的名称以及其x和y values:Car{x:10,y:20}。

《javascript-少儿编程》第12章面向对象编程之创建构造方法

本站内容未经许可,禁止任何网站及个人进行转载。

   口袋儿题库-青少儿编程自测题库