扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript知识:构造函数也是函数
  • 730

0
分享到

JavaScript知识:构造函数也是函数

2024-04-02 19:04:59 730人浏览 八月长安
摘要

目录1、构造函数的定义与调用2、new关键字的用途3、构造函数的问题：浪费内存总结首先要明确的是构造函数也是函数 我经常使用构造函数来创建实例对象，例如对象和数组的实例化可以通过相应

首先要明确的是构造函数也是函数

我经常使用构造函数来创建实例对象，例如对象和数组的实例化可以通过相应的构造函数Object()和Array()完成。

构造函数与普通函数在语法的定义上没有任何区别，主要的区别体现在以下3点。

(1)构造函数的函数名的第一个字母通常会大写。按照惯例，构造函数名称的首字母都是要大写的，非构造函数则以小写字母开头。这是从面向对象编程语言那里借鉴的，有助于在ECMAScript中区分构造函数和普通函数。

(2)在函数体内部使用this关键字，表示要生成的对象实例，构造函数并不会显式地返回任何值，而是默认返回“this”。在下面的代码段中，Person()函数并没有使用return关键字返回任何信息，但是输出的变量person1是一个具有name、age属性值的Person实例。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
      //1.定义构造函数
      function Person(name,age){
        this.age = age;
        this.name = name;
        this.sayName = function(){
            console.log(this.name);
        } 
      }
      // 2.生成实例对象
      var person1 = new Person('小苏','18');
      // 3.打印实例对象
      console.log(person1);
  </script>
</body>
</html>

显示效果如下


(3)作为构造函数调用时，必须与new操作符配合使用。这一点非常重要，任何函数只要使用new操作符调用就是构造函数，而不使用new操作符调用的函数就是普通函数。

1、构造函数的定义与调用

构造函数又称为自定义函数，以函数的形式为自己的对象类型定义属性和方法。

举例：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
      //1.定义构造函数
      function Person(name,age){
        this.age = age;
        this.name = name;
        this.sayName = function(){
            console.log(this.name);
        } 
      }
      // 2.生成实例对象
      var person1 = new Person('小苏','18');
      // 3.调用方法
      person1.sayName();
  </script>
</body>
</html>

2、new关键字的用途

构造函数在执行时，会执行以下4步：

  • 通过new关键字（操作符）创建实例对象，会在内存中创建一个新的地址。
  • 为构造函数中的this确定指向，指向实例的本身。
  • 执行构造函数代码，为实例添加属性。
  • 返回这个新创建的对象。

以前面生成person1实例的代码为例。

第一步：为person1实例在内存中创建一个新的地址。

第二步：确定person1实例的this指向，指向person本身。

第三步：为person1实例添加name、age和sayName属性，其中sayName属性值是一个函数。

第四步：返回这个person1实例。

举个实例


var person1 = new Person("Bob", 18);

这行代码，等价于


// 演示 new 的功能
function Person(name,age) {
  // 1.创建一个新对象
  var instance = new Object();
  // 2.将函数内部的 this 指向了这个新对象
  this = instance;
  // 3.执行构造函数内部的代码
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  };
  // 4.将新对象作为返回值
  return instance;
}

这就意味着，将instance 赋值给 person1，即person1 = instance。实际上又是这样的：


// 演示 new 的功能
function Person(name,age) {
  // 1.创建一个新对象
  var person1 = new Object();
  // 2.将函数内部的 this 指向了这个新对象
  this = person1;
  // 3.执行构造函数内部的代码
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  };
  // 4.将新对象作为返回值
  return person1;
}

3、构造函数的问题：浪费内存

基本事实：不同实例中的sayName属性是不同的。举个例子：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1.自定义构造函数
    function Person(name,age) {
      this.name = name;
      this.age = age;
      // this 内部的 type 属性值是不变的
      this.type = "human";
      // 每个对象的 sayName 方法也是一样的
      this.sayName = function () {
        console.log(this.name);
      };
    }
    
    var person1 = new Person('Bob',18);
    var person2 = new Person('Mike',20);
    // 2，判断各自的方法是否是同一个函数
    console.log(person1.sayName === person2.sayName); // false
  </script>
</body>
</html>

解释：通过console.log(person1.sayName === person2.sayName)方法可判断两个函数是否是是同一个，显然这不是同一个函数，那么两个函数就占用了两个内存空间，就会造成内存的浪费。

那如何解决函数占用内存的办法呢？答案是将对象内部函数提取出来作为公共函数


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 解决方法1： 将公共的函数提取到构造函数之外
    function sayName() {
      console.log(this.name);
    }
    function sayAge() {
      console.log(this.age);
    }
    //1.自定义对象
    function Person(name,age) {
      this.name = name;
      this.age = age;
      // this 内部的 type 属性值是不变的
      this.type = "human";
      // 每个对象的 sayName 方法也是一样的
      this.sayName = sayName;
      this.sayAge = sayAge;
    }
    //2.实例化对象
    var person1 = new Person('Bob',18);
    var person2 = new Person('Mike',20);
    console.log(person1.sayName === person2.sayName); // true
    </script>
</body>
</html>

此时，也存在一个问题，如果有多个公共函数，需要在外部创建多个函数，可能会造成命名冲突

解决办法，将多个公共的函数封装到一个对象


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 3.将多个公共的函数封装到一个对象
    var fns = {
      sayName : function () {
        console.log(this.name);
      },
      sayAge : function () {
        console.log(this.age);
      }      
    };    
    // 1.自定义对象
    function Person(name,age) {
      this.name = name;
      this.age = age;
      this.type = "human";
      this.sayName = fns.sayName;
      this.sayAge = fns.sayAge;
    }
    // 2.生成对象实例
    var person1 = new Person("Bob",18);
    var person2 = new Person("Mike",20);

    // person1.sayName();
    console.log(person1.sayName === person2.sayName);
    console.log(person1.sayAge === person2.sayAge);
  </script>
</body>
</html>

解释：将多个函数封装成一个对象即可解决函数名可能冲突的问题。

通过这种设置全局访问的函数，这样就可以被所有实例访问到，而不用重复创建。

但是这样也会存在一个问题，如果为一个对象添加的所有函数都处理成全局函数，这样并无法完成对一个自定义类型对象的属性封装（言外之意。指的是全局函数只可以封装函数，但无法封装属性，因为属性封装在函数外面，要定义为全局变量，才可以去调用，这反而会污染全局变量），因此这不是一个好的解决办法。

此时，便引用原型的概念，使用原型概念可以很好解决这个问题，可以很好解决这个问题。

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注编程网的更多内容！

--结束END--

本文标题: JavaScript知识:构造函数也是函数

本文链接: https://lsjlt.com/news/133133.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript知识:构造函数也是函数
    目录1、构造函数的定义与调用2、new关键字的用途3、构造函数的问题：浪费内存总结首先要明确的是构造函数也是函数 我经常使用构造函数来创建实例对象，例如对象和数组的实例化可以通过相应...
    99+
    2024-04-02
  • 快速入门：JavaScript 构造函数模式，小白也能秒懂！
    1. 简介 JavaScript 构造函数模式是一种创建对象的强大方法。通过使用构造函数，您可以创建具有相同属性和方法的对象实例。构造函数是用于创建对象的函数，它可以接受参数，并将这些参数分配给对象实例的属性。 2. 创建构造函数 要创...
    99+
    2024-02-23
    JavaScript 构造函数 对象 实例 原型 继承
  • C++的构造函数和析构函数是什么
    本篇内容主要讲解“C++的构造函数和析构函数是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“C++的构造函数和析构函数是什么”吧!目录一、构造函数二、C++类的内存模型1、只定义成员函数2、...
    99+
    2023-06-20
  • javascript构造函数怎么借用
    本篇内容主要讲解“javascript构造函数怎么借用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript构造函数怎么借用”吧!说明调用子类构造函数中的父类构造函数。采用apply...
    99+
    2023-06-20
  • JavaScript构造函数举例详解
    典型的面向对象编程语言（比如C++和Java），存在“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类&...
    99+
    2023-05-14
    js构造函数的作用 js构造函数定义方法 js构造函数实例
  • C++:构造函数,析构函数详解
    目录前言一、面向对象二、构造函数1.基本概念2.构造函数重载1.构造函数分类2.有参构造函数：3.有参构造函数3个调用规则：4.拷贝构造函数5.析构函数总结前言 上期了解C++类中有...
    99+
    2024-04-02
  • C++ 函数重载是否适用于构造函数和析构函数？
    c++++ 构造函数支持重载，而析构函数不支持。构造函数可具有不同的参数列表，而析构函数只能有一个空参数列表，因为它在销毁类实例时自动调用，不需输入参数。 C++ 中函数重载是否适用于...
    99+
    2024-04-14
    c++ 函数重载
  • 什么是java构造函数
    构造函数是面向对象中的一员，构造函数可以叫做构造器，它的函数名与类名相同，不用定义返回值类型，也没有具体的返回值。构造函数是在构建创造时对象时调用函数，作用是可以给对象进行初始化，创建对象都必须要通过构造函数初始化。一个类中如果没有定义过构...
    99+
    2021-05-19
    java入门 java 构造函数
  • 如何理解JavaScript中构造函数
    如何理解JavaScript中构造函数，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。JavaScript学习笔记...
    99+
    2024-04-02
  • JavaScript如何使用Function()构造函数
    这篇文章主要介绍JavaScript如何使用Function()构造函数，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！Function（）构造函数先看代码：var f&nb...
    99+
    2024-04-02
  • javascript new怎么调用构造函数
    本篇内容主要讲解“javascript new怎么调用构造函数”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript new怎么调用构造函数”吧!说明在内存中创建新对象。新对象内部的...
    99+
    2023-06-20
  • JavaScript构造函数怎么自定义
    这篇文章主要介绍“JavaScript构造函数怎么自定义”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript构造函数怎么自定义”文章能帮助大家解决问题。典型的面向对象编程语言（比如C+...
    99+
    2023-07-05
  • java中构造函数是什么
    构造函数是面向对象中的一员，构造函数可以叫做构造器，它的函数名与类名相同，不用定义返回值类型，也没有具体的返回值。构造函数是在构建创造时对象时调用函数，作用是可以给对象进行初始化，创建对象都必须要通过构造函数初始化。（推荐学习：java课程...
    99+
    2021-06-06
    java入门 java
  • C++修炼之构造函数与析构函数
    目录🌷默认成员函数🌷构造函数🌺引例🌺构造函数的概念及特性🌷析构函数🌺析构函数的特性🌷默认成员函数 上一章中我们谈到，如果一个类中什么成员也没有，那么这个类就叫作空类。其实这么说是不太...
    99+
    2023-05-14
    C++构造函数概念 C语言析构函数特性
  • C#中构造函数和析构函数的作用是什么
    本篇文章给大家分享的是有关C#中构造函数和析构函数的作用是什么，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。C#构造函数（constructor）包括实例C#构造函数和静态C#...
    99+
    2023-06-17
  • C#中构造函数和析构函数的区别是什么
    这篇文章将为大家详细讲解有关C#中构造函数和析构函数的区别是什么，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。C#构造函数和析构函数在你可以访问一个类的方法、属性或任何其它东西之前， ***...
    99+
    2023-06-18
  • JavaScript匿名函数知识点有哪些
    这篇文章主要介绍了JavaScript匿名函数知识点有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript匿名函数知识点有哪些文章都会有所收获，下面我们一起来...
    99+
    2024-04-02
  • javascript中的函数知识点有哪些
    这篇文章主要讲解了“javascript中的函数知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript中的函数知识点有哪些”吧！Ja...
    99+
    2024-04-02
  • JavaScript函数增强以及额外知识
    目录一、函数增强1.1 函数对象的属性1.2 arguments1.3 剩余rest参数1.4 纯函数的使用1.5 柯里化的过程1.6 组合函数的使用二、额外知识2.1 with2....
    99+
    2024-04-02
  • C++构造函数与析构函数怎么使用
    这篇文章主要讲解了“C++构造函数与析构函数怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C++构造函数与析构函数怎么使用”吧！对象的初始化和清理生活中我们买的电子产品都基本会有出厂...
    99+
    2023-07-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作