返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS构造函数和实例化的关系及原型引入
  • 815
分享到

JS构造函数和实例化的关系及原型引入

2024-04-02 19:04:59 815人浏览 薄情痞子
摘要

目录1、 构造函数与实例化2、构造函数与实例化之间的关系?3、per1.say是否等于per2.say4、per1.say不等于per2.say得出的结论5、举例代码问题5.1代码出

1、 构造函数与实例化

当我们的编程面向对象的时候,先是抽象的过程=>然后实例化的过程,比如我们抽象一个人,我知道一个人的基本信息。名称,年龄,性别,....等等

我们把先是抽象的,在抽象完成后,我们在实例化。

2、构造函数与实例化之间的关系?


//这个自定义的构造函数在抽象

function Person(name,age,sex){

    this.name=name;

    this.age=age;

    this.sex=sex;

    this.say=function(){

        console.log("我叫",name)

    }

}

// 这个过程是实例化

let per1=new Person('司藤',300,'女');

per1.say();//调用





//let per1=new Person('司藤',300,'女');

通过上面这一行代码。

我们可以得出一个结论:

构造函数与实例对象之间的关系是:

实例对象需要通过构造函数来创建的。

同时:我们可以知道实例对象的构造器就是构造函数

我们来证明这一句话是否正确;上面的代码不改变。


console.log( per1.constructor===Person ) //返回的是true

充分说明:实例对象的构造器就是构造函数这一句话是正确的。

3、per1.say是否等于per2.say


 function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=function(){

        console.log('我可以不吃饭');

    }

}

var per1=new Person("司藤",300,'耍');

var per2=new Person('白浅','10000','耍');

per1.say();

per2.say();

console.log( per1.say==per2.say ) //false

4、per1.say不等于per2.say得出的结论

因为console.log( per1.say==per2.say ) //false

我们可以得出一个结论。

那就是per1.say()和per2.say()调用的不是同一个方法

那么他们的内容是否是相等的的呢?

console.log( per1.say()==per2.say() ) //true

说明内容是相等的

5、举例代码问题

5.1代码出现的问题


function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=function(){

        console.log('我可以不吃饭');

    }

};

for (var index = 0; index < 100; index++) {

    var per=new Person("司藤",300,'耍');

    per.say();

}

这一段代码:是它在内存中开辟了100个空间。每个空间都有一个say方法。但是每一个say方法都是不同的。可是他们输出的内容是相同。或者说执行的逻辑是相同的。这样就造成了空间浪费。所以在项目中,这样就造成了浪费空间。

我们可不可以来优化呢 ?

5.2优化代码解决造成空间浪费


function comSay(){

    // 执行相同的逻辑

    console.log('我可以不吃饭')

};



function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=comSay;//不要加括号

};

var per1=new Person("司藤",300,'耍');

var per2=new Person('白浅','10000','耍');

console.log( per1.say==per2.say ) //true

这样我们就节约了空间。每次调用的时候,都是同一个方法。

5.3处理使用这种方法,我们还可以使用原型的方式


function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

};

Person.prototype.comSay=function(){

    console.log('我可以不吃饭')

}

var per1=new Person("司藤",300,'耍');

var per2=new Person('白浅','10000','耍');

console.log( per1.comSay==per2.comSay ) //true

// 我们还可以通过原型来解决数据共享

原型的作用:数据共享,节约空间。

到此这篇关于js构造函数和实例化的关系及原型引入的文章就介绍到这了,更多相关JS构造函数和实例化的关系及原型引入内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS构造函数和实例化的关系及原型引入

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

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

猜你喜欢
  • JS构造函数和实例化的关系及原型引入
    目录1、 构造函数与实例化2、构造函数与实例化之间的关系?3、per1.say是否等于per2.say4、per1.say不等于per2.say得出的结论5、举例代码问题5.1代码出...
    99+
    2024-04-02
  • JS构造函数和实例化的关系及原型引入举例分析
    这篇文章主要介绍“JS构造函数和实例化的关系及原型引入举例分析”,在日常操作中,相信很多人在JS构造函数和实例化的关系及原型引入举例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS构造函数和实例化的关系...
    99+
    2023-06-21
  • JS构造函数实例对象和原型对象之间的关系是什么
    本篇内容介绍了“JS构造函数实例对象和原型对象之间的关系是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • JavaScript原型和原型链与构造函数和实例之间的关系详解
    目录原型原型链原型 如图所示: 1.instanceof检测构造函数与实例的关系: function Person () {.........} person = new Pers...
    99+
    2024-04-02
  • 实例详解JavaScript构造函数和原型
    以上就是实例详解JavaScript构造函数和原型的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-24
    javascript
  • JavaScript构造函数和原型使用实例分析
    本文小编为大家详细介绍“JavaScript构造函数和原型使用实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript构造函数和原型使用实例分析”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1...
    99+
    2023-07-04
  • javascript构造函数以及原型对象的示例分析
    小编给大家分享一下javascript构造函数以及原型对象的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!如果是实例方法,不同的实例化,它们引用的地址是不一样的,是唯一的。//定义...
    99+
    2024-04-02
  • javascript的构造函数, 原型,原型链和new是什么
    这篇“javascript的构造函数, 原型,原型链和new是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“j...
    99+
    2023-06-29
  • JavaScript构造函数与原型之间的联系
    目录一、构造函数和原型1、构造函数2、构造函数的问题3、构造函数原型 prototype4、对象原型 __proto__5、constructor 构造函数6、构造函数、实例、原型对...
    99+
    2024-04-02
  • JS继承、工厂构造及原型设计模式实例分析
    这篇文章主要介绍“JS继承、工厂构造及原型设计模式实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JS继承、工厂构造及原型设计模式实例分析”文章能帮助大家解决问题。正文正是由于:原型链继承和构...
    99+
    2023-07-02
  • JS精髓原型链继承及构造函数继承问题纠正
    目录前言原型链继承构造函数继承组合继承前言 先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用! 咱常说,面向对象三大特点,封装、继承、多态。 这三个特点,以&ldqu...
    99+
    2024-04-02
  • javascript的构造函数,原型,原型链和new你了解多少
    目录1、什么是构造函数?2、如何通过构造函数创建一个对象?3、new一个对象的过程发生了什么?4、什么是原型?5、原型、构造函数、实例的关系?6、什么是原型链?7、类?总结1、什么是...
    99+
    2024-04-02
  • JS创建对象常用设计模式工厂构造函数及原型
    目录引言工厂模式构造函数模式原型模式结语引言 很多工友们都说:设计模式根本用不到,然而它其实时刻就在我们身边,像王国维所说:众里寻他千百度,蓦然回首,那人正在灯火阑珊处。 工厂模式 ...
    99+
    2024-04-02
  • JavaScript构造函数与原型之间的联系是什么
    这篇文章主要介绍“JavaScript构造函数与原型之间的联系是什么”,在日常操作中,相信很多人在JavaScript构造函数与原型之间的联系是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScr...
    99+
    2023-06-21
  • 如何使用PHP8中引入的Constructor Property Promotion简化类的构造函数?
    如何使用PHP8中引入的Constructor Property Promotion简化类的构造函数?简介:在PHP8中,引入了Constructor Property Promotion的新特性,可以极大地简化类的构造函数。Constru...
    99+
    2023-10-22
    PHP 简化 Constructor Property Promotion
  • Python 根据相邻关系还原数组的两种方式(单向构造和双向构造)
    目录题目描述示例 2:示例 3:单向构造(哈希表计数)双向构造(双指针)最后题目描述 这是 LeetCode 上的 1743. 从相邻元素对还原数组 ,难度为 中等。 Tag : 「哈希表」、「双指针」、「模拟」...
    99+
    2022-06-02
    Python 相邻关系还原数组 Python 还原数组
  • C++构造函数的类型,浅拷贝与深拷贝实例分析
    本文小编为大家详细介绍“C++构造函数的类型,浅拷贝与深拷贝实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“C++构造函数的类型,浅拷贝与深拷贝实例分析”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、无...
    99+
    2023-06-29
  • JS中节流和防抖函数的实现及区别示例
    目录引言一、概念二、实现三、区别四、Lodash4-1.throttle4-2.debounce五、使用场景六、总结引言 在前端开发中,经常和DOM、BOM打交道,例如:窗口的res...
    99+
    2024-04-02
  • C++类的对象作类成员调用构造、析构函数及静态成员实例分析
    这篇文章主要介绍了C++类的对象作类成员调用构造、析构函数及静态成员实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇C++类的对象作类成员调用构造、析构函数及静态成员实例分析文章都会有所收获,下面我们一起...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作