您好,欢迎访问一九零五行业门户网

JavaScript原型与原型链的详细分析

javascript没有类的概念,但几乎所有的东西又是基于对象的,同时也能实现继承,这就是js跟其他oop语言最大的不同之处,这也是js最难理解的一块。下面我来说说我个人的理解。
首先从创建对象说起,一般会有下面几种方法:
1.创建一个object实例,然后给它添加属性和方法。
var person() = new object(); person.name = 'mikej'; person.sayname = function(){ alert(this.name); }
2.也可以这样写:
var parson = { name : 'mikej', sayname : function(){ alert(this.name); } }
3.这两种创建对象的方法很简单,但都有缺陷,使用同一个模式创建对象的时候,会产生大量重复代码。于是就有了工厂模式:
function createperson(name){ var p = new object(); p.name=name; p.sayname = function(){ alert(this.name); }; return p; } var p1 = createperson('mikej'); var p2 = createperson('tom');
这样就可以无限创建对象了。
4.还有一种方法,跟工厂模式异曲同工,叫做构造函数模式:
function person(name){ this.name=name this.sayname = function(){ alert(this.name); } this.say = function(){ alert('hi'); } } var p1 = new person('mikej'); var p2 = new person('tom');
这里有几个值得关注的地方:没有显示的创建对象、函数名person使用的是大写字母p(这是必须的)、p1和p2中都有一个constructor(构造函数)属性,指向person。同时p1和p2既是object的实例,也是person的实例。
alert(p1.constructor == person); //true alert(p1 instanceof object); //true alert(p1 instanceof person); //true
//5.11更新:以一个phper的角度看的话,之前很容易将创建对象的流程想成这样,person就是一个“类”,然后用new person('mikej')实例化了这个类,并且传入参数。但实际上并不是这样的,创建的流程应该是这样:首先,创建一个空对象,然后用apply方法,第一个参数是这个空对象,第二个参数是上下文的参数,这样person中的this就会指向这个对象,也就是p1。
var p1 = new person('mikej'); //上面代码就相当于 var p1 = {}; person.apply(p1, ['mikej']);
构造函数模式看上去很好,但是它有一个弊端就是浪费内存,接上例
alert(p1.say == p2.say) //false
.为了避免这个缺陷,可是使用原型模式来创建对象,js中的每个对象都有一个prototype属性用来指向另外一个对象,这个对象的所有属性和方法都会被构造函数的实例继承,是共享的,这就意味着,我们可以把那些不变的属性和方法,定义到prototype对象上。
function person(name){ this.name = name; } //person的原型对象 person.prototype = { say: function(){ alert('hi'); }, sayname: function(){ alert(this.name); } }; var p1 = new person("mikej"); var p2 = new person("tom"); p1.sayname(); p2.sayname(); //下面就可以看出方法实现了共享 alert(p1.say == p2.say) //true alert(p1.sayname == p2.sayname) //true
再来扩展一下上面的例子,使用原型来实现继承。
function person(name){ this.name = name; } person.prototype = { say: function(){ alert('hi'); }, sayname: function(){ alert(this.name); } }; function programmer(){ this.say = function(){ alert('im programmer, my name is ' + this.name); } } programmer.prototype = new person('mikej'); //手动修正构造函数 programmer.prototype.constructor = programmer; var p1 = new programmer(); console.dir(programmer.prototype.constructor);//programmer console.dir(p1.constructor);//programmer console.dir(p1);
programmer的原型指向了person的一个实例,那么所有的programmer的实例都能继承person和person的原型了。
这里会有一个问题。
默认原型对象里有一个constructor属性,指向它的构造函数。而每一个实例也有一个constructor属性,会默认调用prototype对象的constructor属性。
假设没有programmer.prototype = new person('mikej');
programmer.prototype.constructor是指向programmer的。p1的构造也指向programmer
alert(programmer.prototype.constructor == programmer) //true alert(p1.constructor == programmer) //true
但有了这句programmer.prototype = new person('mikej');之后,
programmer.prototype.constructor就指向了object,也就是person.prototype指向的对象的构造。p1.constructor也指向了object。但p1明明是构造函数programmer生成的,这就造成了继承的混乱,所以我们必须手动修正构造函数,也就是下面这代码。
programmer.prototype.constructor = programmer;
好了,现在我们再来看看原型链:
console.dir(p1);
这句代码的结果是
可以看出,p1是programmer的实例,programmer的原型是person,person的原型是object,再网上就是js的对象了。这就是原型链,也就是说,javascript的继承是基于原型链来实现的。
以上就是javascript原型与原型链的详细分析的详细内容。
其它类似信息

推荐信息