码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-15 00:03:13      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:

   构造函数(方法)介绍

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

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

  1. 构造函数(方法)名和类名相同。

  2. 在创建一个对象实例时,系统会自动的调用该类的构造方法完成对新对象的初始化。

   构造函数基本用法

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>

   构造方法(函数)小结

  1. 构造方法名和类名相同

  2. 主要作用是完成对新对象实例的初始化

  3. 在创建对象实例时,系统自动调用该对象的构造方法   

   类定义的完善:

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

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>

 

 

  

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

标签:

原文地址:http://www.cnblogs.com/yerenyuan/p/5393212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!