开篇
之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》,书中对原型对象和原型链的描述让我受益匪浅,下面仅用一个对比性的例子来说明。
我们经常会这么写
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype.say = function() {
console.log('Hello,' + this.name);
};
person.say();//Hello,John
上述代码非常简单,Person原型对象定义了公共的say方法,虽然此举在构造实例之后出现,但因为原型方法在调用之前已经声明,因此之后的每个实例将都拥有该方法。从这个简单的例子里,我们可以得出:
原型对象的用途是为每个实例对象存储共享的方法和属性,它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象,因此有别于实例方法或属性,原型对象仅有一份。
所有就会有如下等式成立:
person.say == new Person().say
可能我们也会这么写
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype = {
say: function() {
console.log('Hello,' + this.name);
}
};
person.say();//person.say is not a function
很不幸,person.say方法没有找到,所以报错了。其实这样写的初衷是好的:因为如果想在原型对象上添加更多的属性和方法,我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前,这样就会造成一个问题:
当var person = new Person()
时,Person.prototype为:Person {}
(当然了,内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言,其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象,即{}。接下来重置了Person的原型对象,使其指向了另外一个对象,即
Object {say: function}
,
这时person.proto的指向还是没有变,它指向的{}对象里面是没有say方法的,因为报错。
从这个现象我们可以得出:
在js中,对象在调用一个方法时会首先在自身里寻找是否有该方法,若没有,则去原型链上去寻找,依次层层递进,这里的原型链就是实例对象的__proto__属性
。
若想让上述例子成功运行,最简单有效的方法就是交换构造对象和重置原型对象的顺序,即:
function Person () {
this.name = 'John';
}
Person.prototype = {
say: function() {
console.log('Hello,' + this.name);
}
};
var person = new Person();
person.say();//person.say is not a function
一张图让你秒懂原型链
其实,只需要明白原型对象的结构即可:
Function.prototype = {
constructor : Function,
__proto__ : parent prototype,
some prototype properties: ...
};
总结:函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.prototype.__proto__ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。
注:本文与Github同步
GIthub文章请戳
网友评论
这句话没办法解释如下代码:
var Obj=function(){
this.param1="hello";
}
Obj.prototype.param2="world";
obj1=new Obj();
obj2=new Obj();
obj1.param2="hello";
console.log(obj2.param1+obj2.param2);//如果param2是所有实例对象共享的,这里应该输出“hello hello”才对,实际输出还是“helloworld”。
这应该如何解释这个共享的运作机理?
function Student(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
// this.sayHi = function () {
// console.log('test');
// }
}
Student.prototype.sayHi = function () {
console.log('大家好,我是' + this.name);
}
// 通过Student构造函数,创建的对象,可以访问Student.prototype中的成员
var s1 = new Student('lilei', 18, '男');
var s2 = new Student('hmm', 18, '女');
s1.sayHi();
console.dir(s1);
// 当调用对象的属性或者方法的时候,先去找对象本身的属性/方法 ,如果对象没有该属性或者方法。此时去调用原型中的属性/方法
// 如果对象本身没有该属性/方法,原型中也没有该属性或者方法,此时会报错
// s1.__proto__ 对象的__proto__ 等于 构造函数的Student.prototype
// __proto__属性是非标准的属性
//
// console.log(s1.__proto__ === Student.prototype);
// console.dir(s1.__proto__);
// console.dir(Student.prototype);
可能是手误