JavaScript面向对象理解

最新推荐文章于 2024-07-03 14:20:15 发布

南方不暖

最新推荐文章于 2024-07-03 14:20:15 发布

阅读量115

点赞数

分类专栏：作业

作业专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解JavaScript中的面向对象编程，包括对象的概念、封装、继承、多态等特性，以及对象的创建方式，如工厂模式、构造函数模式和原型模式。同时，通过实例展示了如何在网页表单中应用面向对象思想。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JS中的对象就是普通名值对的集合
2.使用对象时，只关心对象提供的功能，不用关注内部细节
3.面向对象的特点
　　a.封装
　　b.继承
　　c. 多态
4.依附于对象的变量叫属性
依附于对象的函数叫方法
5.创建对象的三种方式
　　a.工厂模式，使用简单的函数创建对象，为对象添加属性和方法，然后返回对象
　　b.构造函数模式，创建自定义引用类型，可以像创建内置对象实例一样使用new操作符，这种方法的缺点是，构造函数的每个成员都无法复用，每次创建出的对象都只有私有变量和私有方法，不能实现共用
　　c.原型模式，使用构造函数的prototype属性来指定共享的属性和方法，即使用构造函数定义实例属性，使用原型定义共享的属性和方法
6.继承
　　JS主要通过原型链实现继承，原型链是通过将一个类型的实例赋值给一个构造函数的原型实现的
　　面向对象实例

<!DOCTYPE html>

<html>

    <head>

        <meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">

        <title>JSP Page</title>

        <script
src="js/jquery-1.10.2.min.js"></script>

        <script
src="js/My97DatePicker/WdatePicker.js"></script>

        <script src="js/jquery.serializeJSON/jquery.serializejson.js"></script>

        <script
src="testjs/testUtil.js"></script>

        <script
src="testjs/test.js"></script>

    </head>

    <body>

        <form name="search_form"
id="search_form">

        <table>

            <tr>

                <td>姓名:</td>

                <td><input
type="text" name="userName"/> </td>

            </tr>

            <tr>

                <td>年龄:</td>

                <td><input
type="text" name="age"/> </td>

            </tr>

            <tr>

                <td>性别:</td>

                <td>

                    <select
name="sex">

                        <option
value="">请选择</option>

                        <option value="man">男</option>

                        <option
value="woman">女</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td>出生日期:</td>

                <td> 

                  <input
type="text" name="birth"
"WdatePicker({dataFmt:'yyyy-MM-dd HH:mm:ss'})"/>

                </td>

            </tr>

            <tr>

                <td>爱好:</td>

                <td><input
type="checkbox" name="love" value="game"/>游戏<input type="checkbox"
name="love" value="basketball"/>篮球 </td>

            </tr>

            <tr>

                <td>级别:</td>

                <td><input
type="radio" name="major" value="1"/>初级程序员 <input type="radio"
name="major" value="2"/>中级程序员</td>

            </tr>

            <tr>

                <td
colspan="2">

                    <button value="查询" id="search_btn"
class="search_btn">查询</button>

                </td>

            </tr>

        </table>

        </form>

        <script>

            // 注意实例化 需要的js对象

            var test ;

            $(function(){

                test = new Test();

            })

        </script>

    </body>

    <html>