JavaScript学习笔记-构造函数

什么是构造函数

简单说构造函数是类函数，函数名与类名完全相同，且无返回值。构造函数是类的一个特殊成员函数。

JavaScript构造函数

* 在JavaScript的世界里没有类的概念，JavaScript是一种基于对象的语言，它包含5中原生数据类型：number，boolean，string，null，undefined

* 除此之外，其他的所有都是对象，函数也是一个对象

* 而所谓Js中的构造函数，就是一个普通的函数，与其他函数没有任何区别，可以理解为： 构造函数==函数

* 对于Js内置对象，Object、Array、Date等等这些都是构造函数。

//有参构造函数==带参数的函数
function mod(uu) {
    var test = uu;
    alert(test);
}
//无参构造函数==不带参数的函数
function mod() {
    var test = "初始化";
    alert(test);
}

* 无参函数主要用于初始化默认值，在部分编程语言中有参函数当不传参的时候默认会有一个无参函数加载，用于初始化类函数

JavaScript构造函数的调用

* Js中使用new运算符来调用构造函数

* 一般称为类的实例化，Js中可以称为对象的实例化

* 构造函数一经实例化后，即会立即执行构造函数内的所有代码

* 而Js中所谓的构造函数与普通函数最大的区别就在于是否使用new调用

//普通函数
function mod(uu) {
    var test = uu;
    alert(test);
}
mod("这是一个普通函数");

//构造函数
function Mod(uu) {
    var test = uu;
    alert(test);
}
m = new Mod("这是一个构造函数");

* 这两个函数最终都会立即弹窗，并弹窗赋值内容，也许你会发其实都一样，然而并不是这样的。

真正的JavaScript构造函数

* 首字母大写，以区别于其他函数

* 使用关键字new调用构造函数

* 调用后自动创建this对象，且类型为构造函数类型，可以使用 instanceof 这个运算符进行校验

* 在函数内部对新对象（this）的属性进行设置，通常是添加属性和方法

* 通常没有return语句，但可以使用（不推荐），使用时返回值必须是this，或者其它非对象类型的值

* 对象有一个constructor属性，指向它的构造函数，即他返回构造函数本身

* 当方法被实例化后，构造函数会立即执行它所包含的任何代码

1、构造函数如何访问对象中的属性和方法

//构造函数访问公有变量
function Mod() {
    //公有属性
    this.name = "测试模板";
    this.use = "可以直接通过调用对象访问";

    //公有方法
    this.func = function () {
        console.log("公有方法也可以通过调用对象之间访问");
    }
}
M = new Mod();

console.log(M.name)//Output:测试模板
console.log(M.use)//Output:可以直接通过调用对象访问
M.func();//Output:公有方法也可以通过调用对象之间访问

//构造函数访问私有变量
function Mod2() {
    //私有属性
    var name = "测试私有";
    var use = "通常不能访问";

    //私有方法
    var func = function () {
        console.log("与私有属性一样，通常不能访问，但可以立即执行");
    }

    //他会立即执行
    console.log(name + "----" + use);//Output:测试私有----通常不能访问
    func();//Output:与私有属性一样，通常不能访问，但可以立即执行
}
M2 = new Mod2();

//却不可以被被外部所直接访问
console.log(M2.name + "----" + M2.use)//Output:undefined----undefined
M2.func();//Output:报错信息Uncaught TypeError: M2.func is not a function

//可以使用return返回私有变量，从而使得外部可以访问（不推荐）
function Mod3() {
    //私有属性
    var name = "测试私有";
    var use = "通常不能访问";

    //私有方法
    var func = function () {
        console.log("与私有属性一样，通常不能访问，但可以立即执行");
    }

    //使用return返回私有变量
    this.getVal = function (v) {
        switch (v) {
            case "n": return name;
                break;
            case "u": return use;
                break;
            case "f": return func();
                break;
        }
    }
}
M3 = new Mod3();

console.log(M3.getVal("n") + "----" + M3.getVal("u"))//Output:测试私有----通常不能访问
M3.getVal("f");//Output:与私有属性一样，通常不能访问，但可以立即执行

2、构造函数如何为对象中的属性和方法赋值

//公有变量赋值
function Mod4(name, age, gender, text) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.func = function () {
        document.write(text);
    }
}
M4 = new Mod4("leona", "18", "女", "公有变量的赋值");

console.log(M4.name + "-----" + M4.age + "-----" + M4.gender);//Output:leona-----18-----女
M4.func();//Html:公有变量的赋值

//私有变量赋值
function Mod5(name, age, gender, text) {
    var name = name;
    var age = age;
    var gender = gender;
    var func = function () {
        document.write(text);
    }

    console.log(name + "-----" + age + "-----" + gender);//Output:leona-----18-----女
    func();//Html:公有变量的赋值

}
M5 = new Mod5("leona", "18", "女", "公有变量的赋值");
//我们发现我们不能从外部直接访问私有变量，但我们可以直接为其赋值

3、构造函数如何访问对象的静态变量

//访问静态变量
function Mod6() {
    var name = "非静态变量";
    var use = "我和name都是非静态变量，我们的生命周期存在于这个函数本身";
    var func = function () {
        document.write("      我们可以直接访问静态变量,比如：");
        document.write(Mod6.attr1);
        document.write(Mod6.attr2);
        document.write(Mod6.attr3);
        document.write(Mod6.attr4 + "      ");
    }
    func();//html:我们可以直接访问静态变量,比如：苹果香蕉芒果柚子
};
Mod6.attr1 = "苹果";
Mod6.attr2 = "香蕉";
Mod6.attr3 = "芒果";
Mod6.attr4 = "柚子";
Mod6.htmlFunc = function () {
    document.write("我和attr1~4都是静态变量，我们的生命周期存在于实例化函数的整个周期");
}

M6 = new Mod6();

document.write(M6.attr1);
document.write(M6.attr2);
document.write(M6.attr3);
document.write(M6.attr4);
//M6.htmlFunc();
//Html:undefinedundefinedundefinedundefined
//Output:报错信息Uncaught TypeError: M6.htmlFunc is not a function

//我们发现我们并不能直接访问到构造函数的静态变量，这是因为，静态变量是通过构造函数本身去创建的变量，因此我们需要用到constructor获取到构造函数本身，从而达到访问静态变量的目的

document.write("     " + M6.constructor.attr1);
document.write(M6.constructor.attr2);
document.write(M6.constructor.attr3);
document.write(M6.constructor.attr4 + "     ");
M6.constructor.htmlFunc();
//Html:苹果香蕉芒果柚子 我和attr1~4都是静态变量，我们的生命周期存在于实例化函数的整个周期