js教程（14）——构造函数

什么是构造函数和JS中的使用 

构造函数是一种特殊的函数，在创建一个对象时被调用，用于初始化对象的成员变量。构造函数的名称与类名相同，没有返回类型，并且可以有参数。

构造函数在对象创建时自动调用，可以用来执行一些初始化操作，例如给对象的成员变量赋初值、分配内存空间等。当使用 new 关键字创建一个对象时，会调用相应的构造函数。

构造函数有以下特点：

• 构造函数没有返回值，包括 void 类型。
• 构造函数可以重载，即一个类可以拥有多个构造函数，只要它们的参数类型或个数不同即可。
• 如果不显式定义构造函数，则编译器会默认生成一个无参的构造函数。
• 如果定义了带参数的构造函数，则编译器不会自动生成无参的构造函数。

构造函数的作用是初始化对象的状态，确保对象在创建后可以正确地使用。它可以在对象创建时执行一些特定的操作，例如设置默认值、分配内存等。通过构造函数的参数，可以根据不同的需求创建不同的对象。

在js中，构造函数和其构造出的对象的类型需要我们自己规定，它可以帮助我们快速的创建多个类似的对象，例：

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

  console.log(new Person("Qgy",20,"男"),new Person("张三",114514,"男"));

结果：

 

js构造函数有两个约定：

1. 只能用new操作符来操作；
2. 命名开头大写（不强制）；

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

  console.log(person("Qgy",20,"男"),new person("张三",114514,"男"));

结果：

 

实例成员和静态成员

实例成员

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

举例：

  function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender
    this.say = function() {
      console.log("what can I say");
    }
  }

  const person = new Person("qgy",20,"男");

  const person2 = new Person("Q",22,null);

  console.log(person.name,person2.name);
  person.say();

 结果：

上述代码中name、age、gender和say()方法，都是person的实例成员。

注意：

1. 实例对象的属性和方法即为实例成员；
2. 为构造函数传入参数，动态创建结构相同但值不同的对象；
3. 构造函数创建的实例对象彼此独立互不影响；

静态成员

       构造函数的属性和方法被称之为静态成员。

举例：

  function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender
    this.say = function() {
      console.log("what can I say");
    }
  }

  const person = new Person("Qgy",20,"男");

  Person.say = () => {
    console.log("我是静态成员");
    console.log(this.name);
  }
  Person.name = "我是构造函数";
  person.say();
  Person.say();

结果：

 

注意点：

1. 构造函数的属性和方法被称之为静态成员；
2. 一般公共特征的属性或方法设置为静态成员；
3. 静态成员方法中的this指向函数本身；

内置构造函数

Object

      object用于创建普通对象和操作对象，其有四个常用方法：

1.创建对象并遍历对象的成员变量

  function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender
    this.say = function() {
      console.log("what can I say");
    }
  }

  const person = new Person("Qgy",20,"男");

  for(let obj in person){
    console.log(obj,person[obj]);
  }

 结果：

这里省略了用Object创建对象（用正常方式创建对象就行，没必要用new Object()）

2.获取对象中的所有属性名

  function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender
    this.say = function() {
      console.log("what can I say");
    }
  }

  const person = new Person("Qgy",20,"男");

  console.log(Object.keys(person));

结果：

这里用Object.keys()这个静态方法获取了person的属性，并返回了一个数组。

3.获得对象中所有的属性值

  function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender
    this.say = function() {
      console.log("what can I say");
    }
  }

  const person = new Person("Qgy",20,"男");

  console.log(Object.values(person));

结果：

 

这里用Object.values()这个静态方法获取了person的属性值，并返回了一个数组。

4.将一个对象的属性和值拷贝到另一个对象中

  function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender
    this.say = function() {
      console.log("what can I say");
    }
  }

  const person = new Person("Qgy",20,"男");

  const obj = {
    "obj1": 111
  };

  const person2 = new Person("q",null,null);

  console.log(Object.assign(person,obj));
  console.log(Object.assign(person,person2));

结果：

这里用Object.assign()将obj和person2的属性和值拷贝到person，这个方法一般用于给一个已有的对象增加属性，但要注意的是，如果拷贝对象的属性名相同，会覆盖原来那个对象。

Array

        Array一般用于对数组进行操作，也有四个比较常用的方法：

1.遍历数组

        没有返回值，用于不改变值查找打印输出值。

  var fruits = ["apple", "banana", "orange"];

  fruits.forEach(function (fruit, index, array) {
    console.log("Index: " + index + ", Fruit: " + fruit);
    console.log("array：" + array);
  });

结果：

2.过滤数组

        筛选数组元素，并生成新数组。

var numbers = [1, 2, 3, 4, 5, 6];

var evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);
 

结果：

3.迭代数组

        返回新数组，经常用于处理数据。

var numbers = [1, 2, 3, 4, 5];

var squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers);
 

结果：

 4.累计器

  var numbers = [1, 2, 3, 4, 5];

  var sum = numbers.reduce(function (total, number) {
    console.log(total,number);
    return total + number;
  }, 0);

  console.log(sum);

结果：