JS构造函数知多少

发表于

最近看了一些原型链的文章，发现对于经常在用的构造函数还是有一些模糊的地方，在这里稍微整理一下：
任何使用new关键字调用的函数都可当做是构造函数，命名规则上一般是首字母大写（普通函数采用驼峰命名法）
一个真正意义上的构造函数一般满足两个条件：

  1. 在函数内部为新对象的属性和方法赋值；
  2. 构造函数可以包含return，虽然不推荐。

先来看一个例子：

1
2
3
4
function Bar() {
    return 2;
}
new Bar(); // a new object：{}

再来一个例子：

1
2
3
4
5
6
7
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
new Test(); // the returned object:{foo:1}

恩毫无压力？那再来一个：

1
2
3
4
5
6
7
8
9
10
function Foo(a, b){
    this.p = a + b;
    this.alertP = function(){
        alert(this.p);
    }
    return this.p;//此返回语句在Foo作为构造函数时没有意义
}
var foo = new Foo(2,3); //foo:{p:5;alertP:function(){alert(this.p)}}
foo.alertP();//结果为5
alert(Foo(2, 3)); //结果为5

result

上述的例子说明了构造函数的返回值：

  • 有默认的返回值，即新创建的对象实例；
  • 手动添加的返回值：
    • 基本数据类型：真正返回的是新创建的一个对象实例；
    • 引用类型：返回的是该对象。

那么使用new关键字到底发生了什么呢？其实就是四件事：

1
2
3
4
var obj  ={};   //创建一个空对象obj
obj.__proto__ = Foo.prototype;  //将这个空对象obj的__proto__成员指向构造函数Foo的prototype成员对象
Foo.call(obj); //将构造函数中的this对象赋给新对象
return obj; //返回新对象obj

其中第三行js高程是这么解释的：

将构造函数的作用域赋给新对象

看不懂==! 于是查了下原版：

Assign the this value of the constructor to the new object (so this points to the new object)

哦原来是说将构造函数中的this对象赋给新对象（所以this指向了新对象）

get !
@.@