导航：首页 > 开发技术 >

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

发表于：2025-01-19 作者：千家信息网编辑

千家信息网最后更新 2025年01月19日，这篇文章主要介绍"JS构造函数和实例化的关系及原型引入举例分析"，在日常操作中，相信很多人在JS构造函数和实例化的关系及原型引入举例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希

千家信息网最后更新 2025年01月19日JS构造函数和实例化的关系及原型引入举例分析

这篇文章主要介绍"JS构造函数和实例化的关系及原型引入举例分析"，在日常操作中，相信很多人在JS构造函数和实例化的关系及原型引入举例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"JS构造函数和实例化的关系及原型引入举例分析"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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// 我们还可以通过原型来解决数据共享