最近在学js,体会了一点点它的灵活性。对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享。
JavaScript中的prototype和_proto_:
我们先了解一点js中的基础知识,首先我们先看一段js代码:
var object = new Object;
console.log("object:", object);
object.member1 = "abcd"; var obj = {};
obj.member1 = 10;
console.log("obj:", obj);
console.log(window);
输出结果:
对于上面输出结果,我总结了几点:
1.js的对象事实上是关联数组;
2.js对象中的成员的增加,可以通过直接赋值即可。
3.“值”是由键值对组成。
我们再来看一段代码(真是不得不说代码是最值得信赖的。)
var Klass = function() {};
var Fun = new Function();
Klass.mem = 10;
Fun.mem = true; var klass = new Klass; //klass是Klass的一个对象。
console.log(klass instanceof Klass);
console.log(window);
输出结果:
首先,我们不得不承认,js中的一个function,拥有三个身份:对象、函数、类。
上述代码(var klass = new Klass;)的执行过程是:
1.申请一个Klass的对象klass实例空间;
2.将空间首地址赋值给对象klass;
3.执行Klass的构造方法;这个构造方法就是函数本身;
4.这个构造方法在执行时,是有前缀的(有对象的),而这个对象就是Klass;那么,构造方法中的this就是klass。
(第四点用Java语言讲是最合适不过了,Java中的类都有构造方法,构造方法中的this相当于new出来的对象实例,不管有多少个实例,他们都是this。)
下面进行主题:继续看代码:
function Fun() {
this.num = 22;
};
var fun = new Fun;
var func = new Fun;
console.log(window);
console.log("Fun:", Fun);
console.log("fun:", fun);
console.log("func:", func);
var Klass = function() {}; // Klass是类
var Fun = new Function(); //Fun是类
console.log("Klass:", Klass);
console.log("Fun:", Fun);
结果:
1.从结果可以看到:类Fun、 Klass、Fun显示有prototype成员,而对象klass和func没有prototype成员。
所以只有类(函数)才有prototype成员,这个成员被称为“原型对象”,它指向一个空间,称为原型空间。 2.还有结结果:fun和func有num成员,但是类没有。这就证实了我们刚刚的说法: (var fun = new Fun;var func = new Fun;的执行过程)再强调一遍:1.申请一个对象实例空间;
2.将空间首地址赋值给对象fun和func;
3.执行Klass的构造方法;这个构造方法就是函数本身;
4、这个构造方法在执行时,是有前缀的(有对象的),而这个对象就是fun和func;那么,构造方法中的this就是fun和func (第四点用Java语言讲是最合适不过了,Java中的类都有构造方法,构造方法中的this相当于new出来的对象实例,不管有多少个实例,他们都是this。)console.log("Fun.prototype:", Fun.prototype);
从以上代码和结果,我们可以看到:类的原型本身也是对象(object),那么,既然是对象,就可以增加成员:
Fun.prototype.member = "这是prototype的一个成员";
console.log("fun.prototype:", fun.prototype);
上上面的代码和结果,我们可以更加坚定的得出结论是:
所以只有类(函数)才有prototype成员,对象不存在prototype成员。这也是检验对象是否是函数的一种判断方法。
console.log("fun.member:", fun.member);
console.log("func.member:", func.member);
console.log("fun.__proto__:",fun.__proto__);
console.log("func.__proto__:", func.__proto__);
从上面的代码和结果我们可以看到:
我们并没有给fun和func增加过__proto__成员,输出结果却有,而我们仔细一点打开Fun类的成员prototype,
他们三个的输出结果居然一模一样,所以,我给出一个结论:对象__proto__这个隐藏的成员,这个隐藏成员指向prototype所指向的原型空间。
func.__proto__.member = 100;
console.log("Fun.prototype.member:", Fun.prototype.member);
console.log("Fun.member:", Fun.member);
给对象func的__proto__成员增加一个成员member,即__proto__指向prototype原型空间,所以有了member成员。
但是我们从结果可以看出:类不能直接访问原型对象的member成员,只能通过prototype访问其原型对象的member成员。
我再总结一点关于js中的左值和右值的不同处理过程:
右值:
1、右值被看成空间,严格地说,右值也被看成“键”;
2、对于形如“xxx.成员”的右值,首先在xxx的键值对中查找,若存在,则,取出其值,并结束查找;
若不存在,则,会自动沿着__proto__所指向的原型空间进行查找;
3、prototype本身也是对象,也应该存在__proto__隐含成员;
4、第2步的查找,会沿着这个隐含原型链,查找所有“祖先”原型空间中的“右值”;
5、当遍历了所有原型空间,依然找不到这个“键”(右值),则,其值为undefined。
左值:
1、左值被看成空间,严格地说,左值也被看成“键”;
2、对于形如“xxx.成员”的左值,首先在xxx的键值对中查找,若存在,则,用=右侧的表达式的值覆盖其值;
3、若不存在,则,增加一个成员,再完成赋值。
(例如:若func.__proto__.member = 18;在func.__proto__的键值对中查找,没有找到member成员,则增加了一个func.__proto__成员,并赋值为18。)
console.log("Function:", Function);
console.log("Object.__proto__:", Object.__proto__);
console.log("Object.__proto__ === Function.prototype:", Object.__proto__ === Function.prototype);
Function的__proto__成员指向Function的原型空间。
console.log("Function.prototype.__proto__:",Function.prototype.__proto__);
console.log("Object.prototype:",Object.prototype);
从上面的代码可以看出:
Function的原型空间prototype的__proto__成员指向Object的原型空间,显示的是相同的结果。
最后稍微的总结一下:
1、只有类(函数)才有prototype成员,这个成员被称为“原型对象”,它指向一个空间,称为原型空间;
2、类的原型本身也是对象,可以增加成员;
3、对象不存在prototype成员,这是检验对象是否是函数的一种判断方法;
4、对象存在__proto__这个隐藏的成员,这个成员指向prototype所指向的原型空间;
5、通过类(函数)不能直接访问其原型的成员,必须通过prototype访问原型成员。
画出手工图:
补充一点:
1、在类构造方法中,用this定义的成员,可以等效为Java的public成员;
2、在类.prototype中定义的成员,可以等效为Java的public staitc成员,即,该类的所有对象共享同一副本;
3、对原型成员的标准访问方法是:类.prototype.成员。
4、以上若有错误请指正!