什么是构造函数?
构造函数 是一种特殊的方法 主要用来在创建对象时初始化对象 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中 特别的一个类可以有多个构造函数 可根据其参数个数的不同或参数类型的不同来区分它们 即构造函数的重载 ---引自百度百科
在JavaScript中是没有类的,但是我们有构造函数(是不是很怪),很深的东西我也说不来,直接上代码:
```javascript //工厂模式 function createCat(name){ var o = {}; o.name = name; o.cry = function(){ console.log(this.name + " : " + "喵喵喵!"); }; return o; } var tom = createCat("tom"); tom.cry(); //构造函数模式 function Mouse(name){ this.name = name; this.cry = function(){ console.log(this.name + " : " + "吱吱吱!"); } } var jerry = new Mouse("jerry",5); jerry.cry(); ```
以上实例代码分别是工厂模式和构造函数模式,构造函数模式相比于工厂模式,存在一下几个不同之处:
- 没有显式的创建对象
- 直接将属性和方法赋给了this对象
- 没有return语句
实际上,调用构造函数会经历以下几个步骤:
- 创建一个新对象
- 将构造函数的作用域赋给新对象(因此this就指向了新对象)
- 执行构造函数中的代码(给这个新对象添加方法和属性)
- 返回这个新对象
我们要注意以上是JS隐式执行的,我们也可以显式的来,上代码:
```javascript function Mouse(name){ var o = {}; var that = o; that.name = name; that.cry = function(){ console.log(that.name); } return that; } var jerry = new Mouse("jerry",5); jerry.cry(); ```
在隐式的构造函数中,我们要注意一个问题,return是隐式返回this的,但是我们可以手动return ,可是这有可能会return我们意料之外的结果:
```javascript function Mouse(name){ this.name = name; this.cry = function(){ console.log(this.name + " : " + "吱吱吱!"); } return "WeiRan" } Mouse.prototype.a = {}; var jerry = new Mouse("jerry",5); jerry.cry(); // jerry : 吱吱吱! ```
以上代码,虽然我们手动返回的是字符串但是真正返回的还是this,其实JS会判断我们返回的是不是对象,数组,function 如果不是这还是会返回this(即便是undefined,null,空)
对象识别
虽然工厂模式解决了多个相似对象的问题,却没有解决对象识别的问题,但是构造函数模式却解决了这个问题,在构造函数模式中,每一个实例都有一个属性constructor,该属性指向他么的构造函数,可以这样来检测对象的类型
```javascript console.log(jerry.constructor == Mouse); //true ```
但是这样做其实是不严谨的,可能会出现以下的问题:
```javascript //构造函数模式 function Mouse(name){ this.name = name; this.cry = function(){ console.log(this.name + " : " + "吱吱吱!"); } return; } var jerry = new Mouse("jerry",5); Mouse.prototype.constructor = {}; console.log(jerry.constructor);//Object {} ```
这段代码说明,jerry的constructor其实指向的是Mouse的prototype的constructor,这样很不严谨,故我们可以采用instanceof来检测对象类型
```javascript //构造函数模式 function Mouse(name){ this.name = name; this.cry = function(){ console.log(this.name + " : " + "吱吱吱!"); } return; } var jerry = new Mouse("jerry",5); Mouse.prototype.constructor = {}; console.log(jerry.constructor == Mouse);//false console.log(jerry instanceof Mouse); //true ```
将构造函数当作函数
构造函数与其他函数的唯一不同,就在于调用他们的方式不同。但是构造函数也是函数,故我们可以以普通函数的方式执行构造函数,任何函数也可以通过new来调用(慎用),下面我列举了几个调用方式:
```javascript //构造函数模式 function Mouse(name){ this.name = name; this.cry = function(){ console.log(this.name + " : " + "吱吱吱!"); } } //当作构造函数使用 var m1 = new Mouse("m1"); m1.cry(); //m1 : 吱吱吱! //当作普通函数使用 Mouse("m2"); window.cry(); //m2 : 吱吱吱! //在其他作用域调用 var obj = {}; Mouse.call(obj,"m3"); obj.cry(); //m3 : 吱吱吱! ```
第一种是用最常见的调用构造函数的方式,第二种,所有的属性和方法都被添加到Global对象上去了(在浏览器中就是window),第三种,我们制定了作用域,所以obj就有了所有的属性和方法
构造函数的问题
构造函数虽然好用,但是他也有缺点,使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍,即每个实例的方法都是不同的(虽然代码一样),上代码:
```javascript //构造函数模式 function Mouse(name){ this.name = name; this.cry = function(){ console.log(this.name + " : " + "吱吱吱!"); } } var m1 = new Mouse(); var m2 = new Mouse(); console.log(m1.cry == m2.cry); //false ```
然而,创建两个完成相同功能的Function实例的确没有必要,而且有this对象在,根本没有必要在执行代码前就把函数绑定到特定的对象上去,以此我们可以用下面的代码来解决这个问题:
```javascript //构造函数模式 function Mouse(name){ this.name = name; this.cry = cry; } function cry(){ alert(this.name); } ```
在上面的例子中我们把cry方法定义在了构造函数外部,这样大大避免了资源的浪费,我们创建的实例调用的都是同一个cry方法,但是新问题又来了,如果这种方法很多,我们就不得不在全局定义很多函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了,好在这些我们可以用原型模式来解决(下一篇,呵呵)
后记 :
关于这篇,我开始是想写的非常全,但是奈何经验不足,大体框架也是按照书上的逻辑,最大的收获就是真的用心去看书了。如果在文中发现错误,请指正,共同进步