JavaScript 构造函数及内置构造函数的详解

在JavaScript中，构造函数是一种特殊的函数，用于初始化对象。当使用new关键字调用构造函数时，它会创建一个新的对象实例，并将构造函数内部的this关键字绑定到这个新对象上。构造函数通常用于定义对象的属性和方法，以及创建对象的实例。

1. 构造函数的定义和调用

• 构造函数通常以大写字母开头，以便与普通函数区分。
• 它们可以包含属性和方法，这些属性和方法通过this关键字添加到新创建的对象上。
• 调用构造函数时，需要使用new关键字，这样可以确保this正确地指向新创建的对象实例。
• 构造函数内部无需写return，返回值即为新创建的对象。

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

var person1 = new Person('Alice', 25);

2. 实例成员&静态成员

• 实例成员：通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
• 静态成员：构造函数的属性和方法被称为静态成员

function Person(name, age) {
    this.name = name; // 实例成员
    this.age = age; // 实例成员
}

// 静态成员
Person.species = 'Homo sapiens';

// 注意：
// 1.name和age是每个通过Person构造函数创建的对象实例所独有的实例成员。
// 2.species是Person构造函数本身的静态成员，它与任何特定的Person实例无关。

当创建Person的实例时，可以像下面这样访问实例成员：

var alice = new Person('Alice', 30);
console.log(alice.name); // 输出: Alice
console.log(alice.age); // 输出: 30

而静态成员可以通过构造函数本身来访问：

console.log(Person.species); // 输出: Homo sapiens

3. 内置构造函数

JavaScript内置构造函数是语言提供的一组预先定义的函数，用于创建和管理不同类型的对象。这些构造函数不仅提供了创建对象的快捷方式，还定义了对象的默认行为和属性。内置构造函数包括但不限于Object、Array、String、Number、Boolean、Date、RegExp等。

4. 内置构造函数的常用方法

4.1 Object构造函数

• Object.keys(obj)：静态方法获取对象中所有属性。
• Object.values(obj)：静态方法获取对象中所有属性值。

const obj = { name: 'Alice', age: 30 };
console.log(Object.keys(obj)); // ["name", "age"]
console.log(Object.values(obj)); // ["Alice", 30]

• Object.assign(target, ...sources)：用于合并对象。

let obj1 = { name: 'zs', age: 20 }
let obj2 = { height: 180, weight: 80 }
// let obj3 = {}

// 作用：将 第2个参数、第3个参数，第.....个参数中的属性，合并到第1个参数中
// 语法一：
// Object.assign(obj3, obj1, obj2)
// console.log(obj3)

// 语法二：
// let obj = Object.assign({}, obj1, obj2)
// console.log(obj)


// 使用它，实现对象的拷贝
let obj = Object.assign({}, obj1)

// 拷贝之后，两个对象独立。（修改一个对象，另一个不受影响）
obj.name = 'lisi'

console.log(obj) // { name: 'lisi', age: 20 }
console.log(obj1) // { name: 'zs', age: 20 }

4.2 Array构造函数

• forEach(): 迭代数组中的每个元素。

let nums = [1, 2, 3];
nums.forEach(function(item, index, arr) {
    console.log(item * 2); // 分别输出 2, 4, 6
});

• filter(): 创建过滤后的新数组

let nums = [1, 2, 3, 4, 5];
let evens = nums.filter(num => num % 2 === 0);
console.log(evens); // 输出 [2, 4]

• map(): 创建映射后的新数组 

let doubles = [1, 2, 3].map(x => x * 2);
console.log(doubles); // 输出 [2, 4, 6]

• join(): 将数组转换为字符串

let words = ['Hello', 'world'];
let str = words.join(' ');
console.log(str); // 输出 "Hello world"

• find(): 找到第一个匹配的元素

let array = [1, 2, 3, 4, 5];
let found = array.find(element => element > 3);
console.log(found); // 输出 4

• every(): 检查所有元素是否符合条件

let bool = [2, 4, 6].every(n => n % 2 === 0);
console.log(bool); // 输出 true

• some(): 是否存在至少一个元素符合条件

bool = [2, 4, 6, 7].some(n => n % 2 !== 0);
console.log(bool); // 输出 true

• concat(): 合并多个数组

let array1 = [1, 2];
let array2 = [3, 4];
let combined = array1.concat(array2);
console.log(combined); // 输出 [1, 2, 3, 4]

• sort(): 对数组排序

let arr = [3, 1, 4, 1, 5, 9];
arr.sort();
console.log(arr); // 输出 [1, 1, 3, 4, 5, 9]

• splice(): 修改数组

// 语法：arr.splice(位置, 删除的数量, 新增的元素, 新增的元素, ........)
let list = ['a', 'b', 'c', 'd'];
list.splice(1, 2, 'x'); // 删除从第1索引开始的2个元素，插入'x'
console.log(list); // 输出 ['a', 'x', 'd']

• reverse(): 反转数组顺序

let reversed = ['one', 'two', 'three'].reverse();
console.log(reversed); // 输出 ['three', 'two', 'one']

• findIndex(): 查找符合条件元素的索引

let index = [1, 2, 3, 4].findIndex(value => value > 2);
console.log(index); // 输出 2

• reduce是一个累加器，可以求和、查找最大值、最小值、计算产品、转换数据结构等

// 示例一：计算数组中所有数值的总和
const arr= [1, 2, 3, 4, 5];
const sum = arr.reduce((total, curr) => total+ curr, 0);
console.log(sum); // 输出: 15

// 示例二：将数组转换为一个对象，统计每个元素出现的次数
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCounts = fruits.reduce((total, curr) => {
  total[curr] = (total[curr] || 0) + 1;
  return total;
}, {});
console.log(fruitCounts); // 输出: { apple: 3, banana: 2, orange: 1 }

4.3 String构造函数

• length：获取字符串长度，反映字符串中字符的数量。

let str = "Hello World";
console.log(str.length); // 输出 11

• split：将字符串按照指定的分隔符切分为数组。

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

• substring：从原字符串中抽取部分字符串形成新的字符串，不改变原始字符串。

let str = "Hello World";
console.log(str.substring(1, 5)); // 输出 "ello"

•  includes：判断字符串中是否包含某个字符，包括则返回true，不包含则返回false。

console.log('hello'.includes('h')) // true
console.log('hello'.includes('ell')) // true
console.log('hello'.includes('ho')) // false
console.log('hello'.includes('h', 2)) // false 从2的位置往后数，看字符串中是否包含h

• startsWith：检查字符串是否以指定的子字符串开始，返回布尔值。

console.log('hello'.startsWith('h')) // true
console.log('hello'.startsWith('he')) // true
console.log('hello'.startsWith('hello')) // true
console.log('hello'.startsWith('e')) // false
console.log('hello'.startsWith('e', 1)) // true。从位置1开始算起，看这段字符串的开头是否是e

• endsWith：检查字符串是否以指定子字符串结尾，返回布尔值。

console.log('hello'.endsWith('llo')) // true
console.log('hello'.endsWith('ll', 4)) // true，4个长度，意思是先截取4个字符hell，然后看这4个字符的结尾是否是ll

• toUpperCase：将字符串中所有字符转为大写。

let str = "hello world";
console.log(str.toUpperCase()); // 输出 "HELLO WORLD"

• toLowerCase：将字符串中所有字符转为小写。

let str = "HELLO WORLD";
console.log(str.toLowerCase()); // 输出 "hello world"

• trim()：去除字符串两边的空白，常用于输入框校验

console.log('    hello   ')  //     hello   
console.log('    hello   '.trim()) // hello

• search：在字符串中搜索字符。如果有这个字符，则返回第1个找到的位置；没有找到返回-1

console.log('hello'.search('e')) // 1
console.log('hello'.search('l')) // 2
console.log('hello'.search('a')) // -1

• indexOf：返回第一个与给定字符串相匹配的子字符串的位置；如果没有找到，则返回 -1。

let str = "hello world hello again";
console.log(str.indexOf("hello")); // 输出 0

• replace：替换字符串中的一部分，可使用正则表达式作为模式。

let str = "hello world hello again";
console.log(str.replace(/hello/g, "hi")); // 输出 "hi world hi again"

4.4 Number构造函数

• toFixed：用于设置保留小数位的长度。

const number = 123.456;
console.log(number.toFixed(2)); // "123.46" 最后一位符合四舍五入