构造函数内部原理、原型讲解、写法、运用

最新推荐文章于 2025-04-25 17:39:49 发布

&XYZ&

最新推荐文章于 2025-04-25 17:39:49 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/JEFF_luyiduan/article/details/100174852

JavaScript 专栏收录该内容

73 篇文章

订阅专栏

本文深入探讨了构造函数的工作原理，包括如何初始化对象实例、设置属性，并通过原型链实现属性和方法的共享。同时，文章详细讲解了如何利用原型进行属性的修改、删除以及查找构造函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构造函数内部原理

1.在函数体最前面隐私的加上this={}
2.执行this.xxx=xxx
3.隐式的返回this

// 注意：构造函数要用大驼峰命名
    function Constructor(name,sex) {
        this.name = name;
        this.sex = sex;
    }

    let msg = new Constructor('XYZ',22);
    let msg1 = new Constructor('LM',21);
    console.log(msg);
    console.log(msg1);

原型讲解

    //Constructor.prototype --原型
    //Constructor.prototype={} 是祖先
    Constructor.prototype.surname = 'xie';

    function Constructor() {

    }

    let msg = new Constructor();

    console.log(msg.surname);//xie

原型简单写法：

    //原型简单写法
    Constructor.prototype = {
        profession: '前度开发',
        tool: '计算机',
    };

    function Constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age
    }

    let msg = new Constructor('xyz', '男', 22);
    console.log(msg);

原型运用:提取公共部分

    Constructor.prototype.profession = '前端开发';
    Constructor.prototype.tool = '计算机';

    function Constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age
    }

    let msg = new Constructor('xyz', '男', 22);
    let msg1 = new Constructor('lm', '女', 21);

    console.log(msg);
    console.log(msg1);

原型运用：修改原型里面的信息

    Constructor.prototype.profession = '前度开发';
    Constructor.prototype.tool = '计算机';

    function Constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age
    }

    let msg = new Constructor('xyz', '男', 22);
    //修改原型里面的信息
    Constructor.prototype.profession = 'WEB前度开发工程师';

    console.log(msg);

原型运用：删除属性

    Constructor.prototype.profession = '前度开发';
    Constructor.prototype.tool = '计算机';

    function Constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age
    }

    let msg = new Constructor('xyz', '男', 22);
    //删除属性
    delete msg.name;
    //现在我想删除原型里面的属性，这个时候计算机会给你返回true，其实并没有删除掉
    delete msg.profession;

    console.log(msg);

查看对象的构造函数（简单点就是说，现在msg不知道是谁生的它，它想找到它的爸爸）

  function Constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age
    }

    let msg = new Constructor('xyz', '男', 22);
    //现在我想查看对象的构造函数（简单点就是说，现在msg不知道是谁生的它，它想找到它的爸爸）
    console.log(msg.constructor);