web前端-JavaScript构造函数创建对象

简介: 什么是构造函数JavaScript 构造函数(Constructor)也称为构造器、类型函数,功能类似对象模板,一个构造函数可以生成任意多个实例,实例对象具有相同的属性、行为特征,但不相等。使用构造函数可以创建不同类的对象。

文章目录

什么是构造函数

构造函数的创建

构造函数与普通函数的区别

this指向问题

构造函数的执行流程

构造函数实例

instanceof关键字

性能优化

往期回顾

什么是构造函数

JavaScript 构造函数(Constructor)也称为构造器、类型函数,功能类似对象模板,一个构造函数可以生成任意多个实例,实例对象具有相同的属性、行为特征,但不相等。

使用构造函数可以创建不同类的对象。


构造函数的创建

构造函数就是一个普通的函数。创建方式和普通函数没有区别,构造函数习惯上首字母大写


构造函数与普通函数的区别

构造函数和普通函数的区别就是调用方式的不同


普通函数是直接调用

构造函数需要使用new关键字来调用

this指向问题

三种形式this的指向情况。


当以函数的形式调用时,this是window

当以方法的形式调用时,谁调用方法this就是谁

当以构造函数的形式调用时,this就是新创建的那个对象

构造函数的执行流程

立刻创建一个新的对象

将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象(即this指向新创建的对象)

逐行执行函数中的代码

将新建的对象作为返回值返回

image.png

使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象,称为是该类的实例。就上述而言Obj是一个类,而obj是Obj这个类的实例。

构造函数实例

创建两个类,一个Person类,一个Dog类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //构造一个创建人的类
        function Person(name , age , gender){
            console.log('指向:',this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = function(){
                console.log(this.name)
            }
        }
        //构造一个创建狗的类
        function Dog(name , age ){
            console.log('指向:',this);
            this.name = name;
            this.age = age ;
            this.sayHello = function(){
                console.log('汪汪汪~~');
            }
        }
        //创建一个人的实例
        var per = new Person('苏凉',21,'男');
        console.log(per);
        per.sayName();
        //创建一个狗的实例
        var dog = new Dog('旺财',5);
        console.log(dog);
        dog.sayHello();
    </script>
</head>
<body>
</body>
</html>

运行结果:

image.png构造函数的好处在于,我们可以区分很多不同的对象,也就是可以清楚的知道创建的对象属于哪一类,用普通创建对象和使用工厂模式创建对象都无法区分对象的种类,他们都属于一个大类(Object)。


instanceof关键字

使用instanceof可以检查一个对象是否是一个类的实例


语法:对象 instanceof 构造函数


如果是,则返回true,否则返回false

  console.log(dog instanceof Dog); //true
  console.log(dog instanceof Person); //false
  console.log(dog instanceof Object); //true


所有的对象都是Object的后代,所以任何对象和0bject做instanceof检查时都会返回true。


性能优化

创建一个Person构造函数


在Person构造函数中,为每一个对象都添加了一个sayName方法

目前我们的方法是在构造函数内部创建的,也就是构造函数每执行一次就会创建一个新的sayName方法

也就是所有实例的sayName都是唯一的。

这样会导致占用大量的内存,对于每一个新创建的对象就会重新创建一个新的方法。

58346bc066a64ba88b233d101ca6cfb9.png

解决方法:将新创建对象的方法单独提取出来,如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    //将新创建对象的方法单独提取出来
        function sayName(){
            console.log(this.name)
        }
        //构造一个创建人的类
        function Person(name , age , gender){
            console.log('指向:',this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = sayName;
        }
        var per = new Person('苏凉',21,'男');
        var per1 = new Person('小红',18,'女');
        console.log(per);
        per.sayName();
        per1.sayName();
        console.log(per.sayName == per1.sayName); //true
    </script>
</head>
<body>
</body>
</html>

image.png

可以看出per的sayName方法和per1的sayName方法是一样的。这样就解决了创建不同的实例都会重新创建一个新的sayName方法,大大减少了内存的占用。

相关文章
|
5天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
66 0
|
1天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
8 1
|
1天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
7 1
|
2天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
4天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
26 0
|
5天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
15 0
|
6天前
|
前端开发
web前端作业3
web前端作业3
10 1
|
6天前
|
前端开发 安全 数据安全/隐私保护
web前端第二天
web前端第二天
7 1
|
6天前
|
前端开发
web前端的作业1
web前端的作业1
7 1
|
8月前
|
JavaScript 前端开发 Java
JavaScript 高级2 :构造函数和原型
JavaScript 高级2 :构造函数和原型
62 0