0%

理解Javascript的prototype

写在前面

废话不多说,请看下面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的numtext属性,因此输出的结果是 1aaa

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

第二题

y对象是A类的一个实例,y继承A的原型,所以它的numtext属性值也是1aaa

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

第三题

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

我知道是不会有人点的,但万一有人想不开呢?