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);

结果:

相关推荐

  1. js--构造函数

    2024-07-11 02:14:03       26 阅读
  2. js教程10

    2024-07-11 02:14:03       22 阅读
  3. 11.【TypeScript 教程函数(Function)

    2024-07-11 02:14:03       42 阅读
  4. [C++11] 理解委托构造函数

    2024-07-11 02:14:03       17 阅读
  5. Ubuntu18.04安装Node.js教程

    2024-07-11 02:14:03       19 阅读

最近更新

  1. Python利用psutil库进行监控进程和资源

    2024-07-11 02:14:03       0 阅读
  2. SpringBoot RestHighLevelClient 按版本更新

    2024-07-11 02:14:03       0 阅读
  3. 跨域问题几种解决方法

    2024-07-11 02:14:03       0 阅读
  4. Python面试整理-文件处理

    2024-07-11 02:14:03       0 阅读
  5. 分式

    2024-07-11 02:14:03       0 阅读
  6. Spring WebFlux 介绍与效果演示示例

    2024-07-11 02:14:03       0 阅读
  7. django 需要修改的文件

    2024-07-11 02:14:03       0 阅读
  8. Random,ThreadLocalRandom,SecureRandom有什么区别

    2024-07-11 02:14:03       0 阅读
  9. Python 爬虫技术 第05节 异常处理

    2024-07-11 02:14:03       0 阅读

热门阅读

  1. 【个人笔记】跨域问题

    2024-07-11 02:14:03       5 阅读
  2. webpack 打包配置

    2024-07-11 02:14:03       4 阅读
  3. 人类历史时间轴

    2024-07-11 02:14:03       7 阅读
  4. 使用Python自动化收集和处理视频资源的教程

    2024-07-11 02:14:03       6 阅读
  5. 参数式确定的函数的导数公式及其推导过程

    2024-07-11 02:14:03       5 阅读
  6. 无题:天选之子?

    2024-07-11 02:14:03       5 阅读