JS面向(基于)对象编程--构造方法(函数)

构造函数(方法)介绍

什么是构造函数呢？在回答这个问题之前，我们来看一个需求：前面我们在创建人类的对象时，是先把一个对象创建好后，再给他的年龄和姓名属性赋值，如果现在我要求，在创建人类的对象时，就直接指定这个对象的年龄和姓名，该怎么做？

构造函数(方法)是一种特殊的方法，它的主要作用是完成对对象实例的初始化。它有几个特点：

构造函数(方法)名和类名相同。
在创建一个对象实例时，系统会自动的调用该类的构造方法完成对新对象的初始化。

构造函数基本用法：

function 类名(参数列表){
    属性=参数值;//不带this为私有，带有this为共有。
}

如下例：

function Person(name, age) {
    this.name = name;//this指代当前对象(即实例化的对象)
    this.age = age;
}
//创建Person对象的时候，就可以直接给名字和年龄
var p1 = new Person("abc", 80);
var p2 = new Person("hello", 9);
window.alert(p2.name);

当然，在给一个对象初始化属性值的时候，也可以指定函数属性。如下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
    <script type="text/javascript">
        function jiSuan(num1, num2, oper) {
            if(oper == "+") {
                return num1+num2;
            } else if(oper == "-") {
                return num1-num2;
            } else if(oper == "*") {
                return num1*num2;
            } else if(oper == "/") {
                return num1/num2;
            }
        }

        function Person(name, age, fun) {
            this.name = name;
            this.age = age;
            this.myFun = fun;
        }
        var p1 = new Person("aa", 9, jiSuan);
        var p2 = new Person("aa", 9, null);
        // window.alert(p1.name);
        // window.alert(p1.myFun(89, 90, "+"));
        window.alert(p2.myFun(1, 2, "*"));//Uncaught TypeError: p2.myFun is not a function
    </script>
</head>
<body>
    
</body>
</html>

构造方法(函数)小结

构造方法名和类名相同
主要作用是完成对新对象实例的初始化
在创建对象实例时，系统自动调用该对象的构造方法

类定义的完善：

在介绍了构造函数(方法)后，我们类(原型对象)的定义就可以完善一步：

function 类名() {
    属性;
}

↓

function 类名() {
    属性;
    函数(方法);  
}

↓

function 类名(参数1, 参数2, ...) {
    属性 = 参数1;
    函数(方法) = 参数2;  
}

面向对象编程进一步认识：

创建对象的又一种形式：

1、对于比较简单的对象，我们也可以这样来创建(可以指定普通属性和函数属性)，如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
    <script type="text/javascript">
        var dog = {name:"小狗",
                    age:8, 
                    fun1:function(){window.alert("hello,world");},
                    fun2:function(){window.alert("ok");}
                   };
         window.alert(dog.constructor);
         window.alert(dog.name+dog.age);
         dog.fun1();
         dog.fun2();
    </script>
</head>
<body>
    
</body>
</html>

2、有时，会看到这样一种调用方法：

函数名.call(对象实例);

例，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
    <script type="text/javascript">
        var dog={name:'hello'};
        function test(){
            window.alert(this.name);
        }
        test();
        window.test();
        var name = "阿昀";
        //test.call(window);//输出阿昀
        test.call(dog); // <==> dog.test();
    </script>
</head>
<body>
    
</body>
</html>

3、for...in，如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
    <script type="text/javascript">
        var dog = {name:'小名',
                   sayHello:function(a,b){window.alert("结果="+(a+b));}
                  };
        //循环列出dog对象的所有属性和方法 对象名['属性名']
        for(var key in dog){
            window.alert(dog[key]);
        }
    </script>
</head>
<body>
    
</body>
</html>

记住：可以使用该形式—对象名['属性名']—访问该对象中的属性和方法。

又如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
    <script type="text/javascript">
        document.writeln("****当前浏览器window对象有属性和方法****<br/>");
        for(var key in window){
            document.writeln(key+":"+window[key]+"<br>");
        }
    </script>
</head>
<body>
    
</body>
</html>