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

构造函数(方法)介绍

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

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

  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>
时间: 2024-12-13 09:40:25

JS面向(基于)对象编程--构造方法(函数)的相关文章

JS面向(基于)对象编程--三大特征

抽象 在讲解面向对象编程的三大特征前,我们先了解什么叫抽象,在定义一个类时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模板).这种研究问题的方法称为抽象. 封装 什么是封装? 封装就是把抽象出来的属性和对属性的操作封装在一起,属性被保护在内部,程序的其它部分只有通过授权的操作(函数),才能对属性进行操作. 封装--访问控制修饰符 电视机的开关,对音量,颜色,频道的控制是公开的,谁都可以操作,但是对机箱后盖,主机板的操作却不是公开的,一般由专业维修人员来玩.那么在js中如

JavaScript学习总结(九)——Javascript面向(基于)对象编程

一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫"原型对象",因此"类=原型对象" 二.类(原型对象)和对象(实例)的区别与联系 1.类(原型对象)是抽象,是概念的,代表一类事物. 2.对象是具体的,实际的,代表一个具体的事物. 3.类(原型对象)是对象实例的模板,对象实例是类的一个个体. 三.抽象的定义 在定义一个类时,实际上就是把一类事物的共有属性和行为提取出来,形成一个物理模型(模板)

JavaScript基于对象编程

js面向对象特征介绍 javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDirven)并具有安全性能的脚本语言.它具有面向对象语言所特有的各种特性,比如封装.继承及多态等.但对于大多数人说,我们只把javascript做为一个函数式语言,只把它用于一些简单的前端数据输入验证以及实现一些简单的页面动态效果等,我们没能完全把握动态语言的各种特性.在很多优秀的Ajax框架中,比如ExtJS.JQuery等,大量使用了javascript的面向

C++学习之路: 线程封装(基于对象编程)

引言: 此次我们重新封装线程, 采用基于对象编程的方式,不用于面向对象编程中重定义虚函数的方式,这里我们用回调函数的方式. Thread.h 1 #ifndef THREAD_H_ 2 #define THREAD_H_ 3 4 #include <boost/noncopyable.hpp> 5 #include <functional> 6 #include <pthread.h> 7 8 class Thread : boost::noncopyable 9 {

《Essential C++》读书笔记 之 基于对象编程风格

<Essential C++>读书笔记 之 基于对象编程风格 2014-07-13 4.1 如何实现一个class 4.2 什么是Constructors(构造函数)和Destructors(析构函数) 4.3 何谓mutable(可变)和const(不变) 4.4 什么是this指针 4.5 Static Class Member(静态的类成员) 4.6 打造一个Iterator Class 4.7 合作关系必须建立在友谊的基础上 4.8 实现一个copy assignment operat

基于对象编程与面向对象编程(表达式计算器3)

基于对象编程与面向对象编程 我们的最终目的是用C++设计一个面向对象的表达式计算器,所以非常有必要弄清楚,什么是基于对象编程和面向对象的编程.而要弄清楚这一点,又要先弄明白什么是值语言,什么是对象语义 值语义:对象的拷贝与原对象无关,拷贝后与原对象脱离关系,互不影响.这种拷贝叫深拷贝.拷贝之后脱离关系,只要在拷贝的时候都为对象分配内存空间就行了.某种些情况下算是一种对资源的浪费 值语义例子 class Test { private: int * pNum_; public: Test(int n

js的面相对象编程小例子

<script type="text/javascript"> //1.hello js面向对象 function Hello(){ alert(99); } function _test1(){ var hello=new Hello(); } //2.定义实例变量 function Page(){} Page.prototype = { //2.1定义属性 类似于java的成员变量 name:'当前页', //该属性是共有属性 相当于java中的public修饰的变量

js的常用对象和方法

1.上节课内容回顾  * html里面form表单     * css     * javascript 2.内容补充  1.js和html两种结合方式   * 使用外部文件方式   * <script type="text/javascript" src="1.js">不能写js代码</script>    2.padding:内边距   * padding: 20px;   * 另外一种设置方式:   /*    设置内边距    按照顺

JS对象编程

在AJAX兴起以前,很多人写JS可以说都是毫无章法可言的,基本上是想到什么就写什么,就是一个接一个的函数function,遇到重复的还得 copy,如果一不小心函数重名了,还真不知道从何开始查找错误,因为大家总是用面向过程的编程思想来写JS代码,而且也由于网络上充斥了太多小“巧”的 JS代码段,很多都是随意而为,很不规范,这也就造成了大家对JS的“误解”,一味的认为它就是一个辅助的小东东,而不适合做大的东西开发.但是自从 AJAX兴起后,大量的JS代码编写要求人们具备像写JAVA类似的代码一样,