new关键字和构造函数
在文章JavaScript面向对象编程(一)原型与继承中讨论啦JavaScript中原型的概念,并且提到了new关键字和构造函数。利用new关键字构造对象的实例代码如下:
//define a constructor
var Func = function(name,id){
this.name = name;
this.id = id;
}
Func.prototype.className = "Func"
var obj = new Func("obj",1);//{name: "obj", id: 1, className: "Func"}
obj.hasOwnProperty("name");//true
obj.hasOwnProperty("id");//true
obj.hasOwnProperty("className");//false
new Func()生成一个对象,用跟在new后面的函数Func对所生成的对象进行初始化,并且将Func.prototype作为所生成对象的原型。在Func函数中的this指向的就是new所生成的对象,代码的第3和第4行是给这个对象添加两个属性name和id。在第6行中,给Func.prototype添加了属性为className,因为Func.prototype是所生成对象obj的原型,所以可以从obj中访问className的值。因为className属性是从原型Func.prototype中访问的,所以obj.hasOwnProperty("className")===false。
这样以来,就生成了一个原型链:obj->Func.prototype.
需要注意的是,构造函数中通过this.name给对象添加了属性,这个name属性将是生成对象所拥有的。虽然JavaScript没有强调类的概念,但是从某种意义上,定义了构造函数即是定义了类。构造函数是类的公共标识[1]。
constructor属性
每个JavaScript函数都自动拥有prototype属性,这个属性的值是一个对象(prototype属性的值可以被重新赋值)。prototype对象中包含一个属性,名为constructor。
Func.prototype.constructor === Func;//true
obj.constructor === Func;//true
可以看到,构造函数预定义的(可以重新赋值)prototype中的constructor属性是函数本身。因为new所构造的对象以Func.prototype为原型,所以也可以从obj中访问constructor属性。调用obj.constructor可以重新对obj进行“构造”。
1 obj.constructor("new name",2);//{name: "new name", id: 2, className: "Func"}
obj.constructor就是Func,因此Func中的this.name = name;this.id = id;重新对obj的属性进行了赋值。(初次使用new Func("obj",1)时因为对象没有name和id属性,所以是给对象添加属性)。
instanceof 运算符
obj instanceof Func//true
运算符可以判断obj是否以Func.prototype 为原型。需要注意的是,只需要以Func.prototype 为原型即可,不一定需要通过new关键字构造。如:
var obj2 = Object.create(Func.prototype);
obj2 instanceof Func//true
“继承”类
上文提到,定义了构造函数即是定义了类。并且将构造函数的prototype属性作为所构造的对象的原型。那么,如果用另外一个构造函数生成的对象给构造函数的prototype属性赋值,就可以在原型链中再添加一个节点,达到类继承的效果。
//a function which is used to generate a derived class
var inheritClass = function(baseClass){
if( typeof baseClass === "function"){
var derivedClass = function(){};
derivedClass.prototype = new baseClass();
derivedClass.prototype.constructor = derivedClass;
return derivedClass;
}
else{
throw TypeError();
}
}
//define the base class
var TransportTool = function(){};
TransportTool.prototype.accelerate = function(){
console.log("speed up!");
};
//define a derived class
var Plane = inheritClass(TransportTool);
Plane.prototype.rise = function(){
console.log("rise up!");
};
//define the object
var thePlane = new Plane();
thePlane.accelerate();
thePlane.rise();
上述代码中首先定义了一个函数inheritClass用于生成一个派生类。首先在代码的第5行将derivedClass的prototype赋值为new baseClass。这样一来就在原型链中加了一个节点:实例对象->derivedClass.prototype->baseClass.prototype。代码第6行derivedClass.prototype.constructor设置为derivedClass。因为第5行将derivedClass预设的prototype值修改了,所以在第6行之前derivedClass.prototype.constructor === baseClass。这不符合一个类的行为,所以要将其值修改。修改之后,对象thePlane.constructor === Plane,是make sense的。
thePlane是派生类Plane的实例,也是TransportTool的实例,原因是原型链为thePlane ->Plane.prototype->TransportTool.prototype
thePlane instanceof Plane//true
thePlane instanceof TransportTool//true
因为原型链的作用,thePlane可以同时进行“accelerate”和“rise”操作。
总结
主要从理论角度讨论了JavaScript的面向对象编程的方法,就是基于原型链。new操作符可以将构造函数的prototype属性作为所构造的函数的原型。派生的构造函数的prototype属性可以以另一个构造函数的prototype属性作为原型,形成了原型链。这就是类的“继承”。既然理论已经介绍了,那么接下来的文章JavaScript 面向对象编程(三)如何写类和子类
会介绍如何用JavaScript进行面向对象编程,如何模拟传统的类、成员、静态成员等。
参考文献
1)《JavaScript:The Definitive Guide》第六章,第九章
2)JavaScript的大师的个人博客:http://javascript.crockford.com/prototypal.html
3)将JavaScript OOP介绍的很好的文章:http://phrogz.net/JS/classes/OOPinJS2.html
4)JavaScript Garden:http://bonsaiden.github.io/JavaScript-Garden/
5)介绍原型及原型链的文章:http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html