JS深入浅出Function与构造函数

什么是Function？

在JavaScript中，函数被看作是对象，函数也可以看作是特殊的对象。每个函数都是Function类型的实例，都有自己的属性和方法。Function类型的构造函数是用来创建函数对象的。

函数的作用是封装一段代码，并可以用来重复使用，降低代码复杂性，方便维护。一个函数可以有0个或多个参数，可以有0条或多条语句，函数可以返回值，也可以不返回值。

函数的声明与函数表达式

函数有两种声明方式：函数声明和函数表达式。

函数声明：

function add(num1, num2) {
    return num1 + num2;
}

函数表达式：

var add = function(num1, num2) {
    return num1 + num2;
};

在函数声明中，函数名add是必须的，而在函数表达式中，函数名add是可选的。

函数的调用

函数调用通常通过函数名后跟一对括号实现：

add(1, 2);

还可以通过apply()方法实现，apply()方法支持传递数组参数：

add.apply(null, [1, 2]);

函数的参数

函数参数的数量是不确定的，可以定义0个或多个参数。函数的参数可以看作是一个数组：

function sayHi() {
    for (var i = 0, len = arguments.length; i < len; i++) {
        console.log('Hi,' + arguments[i]);
    }
}

arguments是一个伪数组（Array-like object），其中保存着传入函数的所有参数。函数内部可以通过arguments对象来遍历参数。

函数也可以定义默认参数：

function greet(name, msg) {
    name = name || 'World';
    msg = msg || 'Hello';
    console.log(msg + ' ' + name);
}

当使用如下调用方式时，参数值undefined会被替换为默认值：

greet(); // "Hello World"
greet('Mike', 'Hi'); // "Hi Mike"
greet('Mike'); // "Hello Mike"

函数的返回值

函数可以返回一个值，也可以不返回值。有时候，函数返回的是一个对象或数组。

function getPerson() {
    return {
        name: 'Mike',
        age: 29
    };
}

在返回值的对象中，可以包含任意数量的属性。

函数的作用域

JavaScript中的函数作用域与其他编程语言中的作用域有所不同。在JavaScript中，函数在被调用时会创建一个新的作用域（函数内部作用域），其作用域链包含了外部作用域（函数被定义时所在的作用域）的变量与函数。

var name = 'Mike';

function greet() {
    var msg = 'Hello';
    console.log(msg + ' ' + name);
}

greet(); // "Hello Mike"

在函数内部，可以访问外部作用域的变量name。

函数的属性和方法

函数也是对象，所以函数也有属性和方法。其中，最常用的属性是length和prototype，而最常用的方法是call()和apply()。

function foo() {}

console.log(foo.length); // 0

console.log(typeof foo.prototype); // "object"

length属性记录了函数定义时声明的参数个数。prototype属性是一个指针，指向函数的原型对象。

call()和apply()方法用来调用函数，并指定函数内部的this值：

function sayHi() {
    console.log('Hi, ' + this.name + '!');
}

var person = {
    name: 'Mike'
};

sayHi.call(person); // "Hi, Mike!"

call()和apply()的区别在于传入参数的方式不同。对于call()，需要将参数一个一个传递进去：

sayHi.call(person, arg1, arg2, arg3);

对于apply()，需要将参数封装在一个数组中传递：

sayHi.apply(person, [arg1, arg2, arg3]);

什么是构造函数？

构造函数不同于普通函数，其主要使用场景是用于创建对象和对象的实例化。构造函数同样也是函数，只是其使用方式不同，构造函数通过new操作符来进行实例化。

构造函数的特点：

• 构造函数名通常首字母大写
• 构造函数内部使用this关键字代表对象实例
• 构造函数内部为对象实例添加属性和方法

以下是一个构造函数的示例：

function Person(name) {
    this.name = name;
    this.sayHi = function() {
        console.log('Hi, ' + this.name + '!');
    };
}

var person1 = new Person('Mike');
var person2 = new Person('Lucy');

实例化后，可以通过person1和person2访问对象的属性和方法：

console.log(person1.name); // "Mike"
console.log(person2.name); // "Lucy"

person1.sayHi(); // "Hi, Mike!"
person2.sayHi(); // "Hi, Lucy!"

构造函数可以通过prototype属性来添加所有实例都可以共享的属性和方法：

function Person(name) {
    this.name = name;
}

Person.prototype.sayHi = function() {
    console.log('Hi, ' + this.name + '!');
};

var person1 = new Person('Mike');
var person2 = new Person('Lucy');

最终代码示例：

function Person(name) {
    this.name = name;
    this.sayHi = function() {
        console.log('Hi, ' + this.name + '!');
    };
}

Person.prototype.sayBye = function() {
    console.log('Goodbye, ' + this.name + '!');
};

var person1 = new Person('Mike');
var person2 = new Person('Lucy');

console.log(person1.name); // "Mike"
console.log(person2.name); // "Lucy"

person1.sayHi(); // "Hi, Mike!"
person2.sayHi(); // "Hi, Lucy!"

person1.sayBye(); // "Goodbye, Mike!"
person2.sayBye(); // "Goodbye, Lucy!"

以上是JS深入浅出Function与构造函数的完整攻略。