JS构造函数与实例化关系及原型链优化

作者：青柠时间：2026-10-24 19:54:00浏览：343

本文解析JavaScript中构造函数与实例化的核心关系，通过代码示例说明实例对象的constructor属性指向构造函数。针对在构造函数内部定义方法导致的内存浪费问题，对比了外部函数引用与原型链两种优化方案，重点阐述利用原型实现方法共享以节省内存空间的技术原理。

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,'女');

基于上述代码示例，

可以得出以下结论：

构造函数与其实例对象之间存在如下关系：

实例对象必须通过构造函数来创建。

同时可知，实例对象的构造器（constructor）指向该构造函数。

为验证上述结论是否正确，保持前述代码不变，


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构造函数和实例化的关系及原型引入内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

1、 构造函数与实例化