同系列文章请查看：Github：pre-interview

先复习一下函数的定义方式：

1.声明式函数定义： function 函数名(){}；这种定义方式，会将函数声明提升到该函数所在作用域的最开头，也是就无论你在这个函数的最小作用域的那儿使用这种方式声明的函数，在这个作用域内，你都可以调用这个函数为你所用。

2.函数表达式：let fun = function(){}; 此方式定义的函数，只能在该作用域中，这段赋值代码执行之后才能通过fun() 调用函数，否则，由于变量声明提升，fun === undefined。

3.new Function 形式： var fun = new Function (arg1 , arg2 ,arg3 ,…, argN , body )；Function构造函数所有的参数都是字符串类型。除了最后一个参数, 其余的参数都作为生成函数的参数即形参。这里可以没有参数。最后一个参数, 表示的是要创建函数的函数体。

总结：

• 第一种和第二种函数的定义的方式其实是第三种new Function 的语法糖，当我们定义函数时候都会通过 new Function 来创建一个函数，只是前两种为我们进行了封装，我们看不见了而已，js 中任意函数都是Function 的实例。

• ECMAScript 定义的 函数实际上是功能完整的对象。

构造函数

定义：通过 new 函数名 来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要 功能为 初始化对象，特点是和new 一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写（规范）。

对 new 理解：new 申请内存, 创建对象,当调用new时，后台会隐式执行 new Object() 创建对象。所以，通过new创建的字符串、数字是引用类型，而是非值类型。

常用的构造函数：

1
2
3
4
5
6
7

var arr = [];   
var arr = new Array();语法糖

var obj = {}  
var obj = new Object();

var date = new Date();

构造函数的执行过程

先创建一个函数

1
2
3

function Animal(color) {
  this.color = color
}

当一个函数创建好以后，我们并不知道它是不是构造函数，即使像上面的例子一样，函数名为大写，我们也不能确定。只有当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。就像下面这样：

1

var dog = new Animal("black")

以下只讨论构造函数的执行过程，也就是以 new 关键字来调用的情况。

我们还是以上面的 Person 为例。

1
2
3
4
5
6
7
8

function Person(name, gender, hobby) {
  this.name = name;
  this.gender = gender;
  this.hobby = hobby;
  this.age = 6;
}

var p1 = new Person('zs', '男', 'basketball');

此时，构造函数会有以下几个执行过程：

(1) 当以 new 关键字调用时，会创建一个新的内存空间，标记为 Animal 的实例。

(2) 函数体内部的 this 指向该内存

通过以上两步，我们就可以得出这样的结论。

1
2

var p2 = new Person('ls', '女', 'dancing');  // 创建一个新的内存 #f2
var p3 = new Person('ww', '女', 'singing');  // 创建一个新的内存 #f3

每当创建一个实例的时候，就会创建一个新的内存空间(#f2, #f3)，创建 #f2 的时候，函数体内部的 this 指向 #f2, 创建 #f3 的时候，函数体内部的 this 指向 #f3。

(3) 执行函数体内的代码
通过上面的讲解，你就可以知道，给 this 添加属性，就相当于给实例添加属性。

(4) 默认返回 this

由于函数体内部的this指向新创建的内存空间，默认返回 this ，就相当于默认返回了该内存空间，也就是上图中的 #f1。此时，#f1的内存空间被变量p1所接受。也就是说 p1 这个变量，保存的内存地址就是 #f1，同时被标记为 Person 的实例。

以上就是构造函数的整个执行过程。

构造函数的返回值

构造函数执行过程的最后一步是默认返回 this 。言外之意，构造函数的返回值还有其它情况。下面就来聊聊关于构造函数返回值的问题。

(1) 没有手动添加返回值，默认返回 this

1
2
3
4
5

function Person1() {
  this.name = 'zhangsan';
}

var p1 = new Person1();

按照上面讲的，我们复习一遍。首先，当用 new 关键字调用时，产生一个新的内存空间 #f11，并标记为 Person1 的实例；接着，函数体内部的 this 指向该内存空间 #f11；执行函数体内部的代码；由于函数体内部的this 指向该内存空间，而该内存空间又被变量 p1 所接收，所以 p1 中就会有一个 name 属性，属性值为 ‘zhangsan’。

1
2
3

p1: {
  name: 'zhangsan'
}

(2) 手动添加一个基本数据类型的返回值，最终还是返回 this

1
2
3
4
5
6
7
8
9
10

function Person2() {
  this.age = 28;
  return 50;
}

var p2 = new Person2();
console.log(p2.age);   // 28
p2: {
  age: 28
}

如果上面是一个普通函数的调用，那么返回值就是 50。

(3) 手动添加一个复杂数据类型(对象)的返回值，最终返回该对象

1
2
3
4
5
6
7
8
9
10

function Person3() {
  this.height = '180';
  return ['a', 'b', 'c'];
}

var p3 = new Person3();
console.log(p3.height);  // undefined
console.log(p3.length);  // 3
console.log(p3[0]);      // 'a'

再来一个例子

1
2
3
4
5
6
7
8

function Person4() {
  this.gender = '男';
  return { gender: '中性' };
}

var p4 = new Person4();
console.log(p4.gender);  // '中性'

不用new关键字，直接运行构造函数，是否会出错？如果不会出错，那么，用new和不用new调用构造函数，有什么区别？

1.使用new操作符调用函数

例子：

1
2
3
4
5
6
7
8
9
10

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = new Person('nicole');
person1.say(); // "I am nicole"

用new调用构造函数，函数内部会发生如下变化：

创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；
属性和方法被加入到this引用的对象中；
隐式返回this对象（如果没有显性返回其他对象）
用伪程序来展示上述变化：

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name){
  // 创建this变量，指向空对象
  var this = {}; 
  // 属性和方法被加入到this引用的对象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this对象
  return this;
}

可以看出，用new调用构造函数，最大特点为，this对象指向构造函数生成的对象，所以，person1.say()会返回字符串： “I am nicole”。

如果指定了返回对象，那么，this对象可能被丢失。

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}

var person1 = new Person('nicole');
person1.name; // "It is that!"

2.直接调用函数

如果直接调用函数，那么，this对象指向window，并且，不会默认返回任何对象（除非显性声明返回值）。

还是拿Person函数为例，直接调用Person函数：

1
2
3

var person1 = Person('nicole');
person1; // undefined
window.name; // nicole

总结

为了防止因为忘记使用new关键字而调用构造函数，可以加一些判断条件强行调用new关键字，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa

• ← 上一篇
• 下一篇 →