写在前面

废话不多说，请看下面3道题，把6个console.log()的答案写下来，然后对照着在Console控制台里敲一遍，校验一下结果。

代码片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var A = function() {};

a.prototype = {
    num : 1,
    text : 'aaa'
};

var x = new A();

// 第一题
console.log(x.num);
console.log(x.text);

// --这里是分割线--

var y = new A();
A.prototype = {
    num : 2
};
// 第二题
console.log(y.num);
console.log(y.text);

// --这里是分割线--

y.num = 3;
var z=new A();
// 第三题
console.log(z.num);
console.log(z.text);

答题时间

题目都看明白了吧，给你10秒钟赶紧在纸上把6个console.log()的结果写下来吧。

计时开始咯
… 1 …
… 2 …
… 3 …
… 4 …
… 5 …
… 6 …
… 7 …
… 8 …
… 9 …
… 10 …

公布答案

6个console.log()的结果如下：

1
2
3
4
5
6

1
aaa
1
aaa
2
undefined

好了，你对了几题呢？如果都对了说明你已经理解prototype的精髓了，可以离开这篇文章了。但如果你没有全对，还是建议看一下下面的解析。

答案解析

第一题

x对象是A类的一个实例，x继承A的原型，所以它具备了A的num和text属性，因此输出的结果是 1和aaa。

注意： 其实JavaScript并不是严格的面相对象语言，它没有类的概念，所谓的面向对象是用函数模拟出来的，这里暂且引用Java里面向对象的理论帮助大家更好理解。

第二题

y对象是A类的一个实例，y继承A的原型，所以它的num和text属性值也是1和aaa。

注意：y实例化之后虽然对A的原型进行了操作，但是并不会影响到y，而会影响到第三题的z对象。

第三题

上一题已经说到A的原型已经发生了重新定义，相比之前，缺少了对text的定义，因此z对象的num属性为 2，而text属性未定义是 undefined。