js - 什么是构造函数，它和普通函数区别在哪？

1.什么是“构造函数”？

用new关键字来调用的函数，首字母一般大写

用this来构造它的属性以及方法

function Log(name, desc) {
            this.name = name;
            this.desc = desc;
            this.code = function(){
                console.log('code...')
            }
        }

2.构造函数和普通函数区别在哪？

我们写普通函数时一般习惯用驼峰命名，而构造函数一般首字母大写（约定俗成）以及构造函数是用来新建实例对象。

3.为什么要用它？

假设我们每天写一些日志，习惯性添加自己称呼

            // 1.1 重复添加
let to1 = {
    name: 'Sunsin',
    desc: '今天注意啥1'
};
let to2 = {
    name: 'Sunsin',
    desc: '今天注意啥2'
};
let to3 = {
    name: 'Sunsin',
    desc: '今天注意啥3'
};
 
// 1.2 写个构造函数进行添加
function Log(name, desc) {
    this.name = name;
    this.desc = desc;
}
 
let to4 = new Log('Sunsin', '今天注意啥4');
let to5 = new Log('Sunsin', '今天注意啥5');
console.log(to4, to5);
 
// 1.3 写个普通函数再return
function Logs(name, desc) {
    return {
        name,
        desc
    };
}
 
let to6 = Logs('Sunsin','今天注意啥6');
console.log(to6);        

4. 构造函数的执行过程

在new关键字调用时会创建一个新的空间，每当创建实例时函数体内部this都会指向当前

　 4.1、立刻在堆内存中创建一个新的对象

4.2、将新建的对象设置为函数中的this

4.3、逐个执行函数中的代码

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

5. 构造函数的返回值

// 1.4 基本类型的返回值返回this它的指向
function Hello() {
    this.name = 'sunsin';
    return 'sunsins';
}
// 1.5 引用类型(对象)的返回值，最终返回该对象
function Hello1(){
    this.sex = '女';
    return{
        sex:'男'
    }
}
console.log(new Hello().name,new Hello1().sex);

6. 检查一个对象是否是一个类的实例

用instaceof

function Log(name, desc) {
    this.name = name;
    this.desc = desc;
}
 
let to4 = new Log('Sunsin', '今天注意啥4');
let to5 = new Log('Sunsin', '今天注意啥5');
console.log(to4, to5, to5 instanceof Log);

点击展开所有例子

// 1.1 重复添加
            let to1 = {
                name: 'Sunsin',
                desc: '今天注意啥1'
            };
            let to2 = {
                name: 'Sunsin',
                desc: '今天注意啥2'
            };
            let to3 = {
                name: 'Sunsin',
                desc: '今天注意啥3'
            };

            // 1.2 写个构造函数进行添加(代码复用)
            function Log(name, desc) {
                this.name = name;
                this.desc = desc;
                this.code = function(){
                    console.log('code...')
                }
            }

            let to4 = new Log('Sunsin', '今天注意啥4');
            let to5 = new Log('Sunsin', '今天注意啥5');
            console.log(to4, to5, to5 instanceof Log);

            // 1.3 写个普通函数再return,而构造函数则将该新对象直接返回
            function Logs(name, desc) {
                return {
                    name,
                    desc
                };
            }

            let to6 = Logs('Sunsin', '今天注意啥6');
            console.log(to6);


            // 1.4 基本类型的返回值返回this它的指向
            function Hello() {
                this.name = 'sunsin';
                return 'sunsins';
            }
            // 1.5 引用类型(对象)的返回值，最终返回该对象
            function Hello1(){
                this.sex = '女';
                return{
                    sex:'男'
                }
            }
            console.log(new Hello().name,new Hello1().sex);