转行学开发，代码100天——2018-05-13

“面向对象”对于学习过C++及JAVA的开发者来说并不陌生。有意思的是面向对象的思路可以用于面对或解决生活工作中的其他问题，简单地说就是“只关注功能，不注重细节”。

产品上：只注重某模块的功能及接口，多个模块对象组合最终满足我的总体要求即可。

管理上：对于项目负责人进行进度跟踪，具体执行工作由负责人具体安排和部署。

...这里多多少少都有些面向对象的意思。

言归正传。JavaScript中的面向对象。

如：下面的一段程序代码中，通过工厂模式创建并使用对象。

<script type="text/javascript">

        function CreatePerson(name,qq)

        {

            var obj = new Object();

            obj.name =name;

            obj.qq = qq;

            obj.showName = function()

            {

                alert('我的名字叫：'+this.name);

            }

            obj.showQQ = function()

            {

                alert('我的QQ是：'+this.qq);

            }

            return obj;

        }

      //对象

      var obj1 = CreatePerson("allen","123558");

      obj1.showName();

      obj1.showQQ();

      var obj2 = CreatePerson("tom","8151875");

      obj2.showName();

      obj2.showQQ();

</script>

这里我们可以注意到我们的基本功能得到了实现，但是细想之下。这里依然存在一些问题。

问题1：不符合习惯的new方式。

new 对象 的对象创建方式有两个功能特点：

1 创建对象

2 返回对象

因此可以对上述的对象创建过程进行优化

<script type="text/javascript">

        function CreatePerson(name,qq)

        {

            var obj = new Object();

            this.name =name;

            this.qq = qq;

            this.showName = function()

            {

                alert('我的名字叫：'+this.name);

            }

            this.showQQ = function()

            {

                alert('我的QQ是：'+this.qq);

            }

            // return obj;

        }

      //对象

    　var obj1 = new CreatePerson("allen","123558");

      obj1.showName();

      obj1.showQQ();

      var obj2 = new CreatePerson("tom","8151875");

      obj2.showName();

      obj2.showQQ();

      alert(obj1.showName==obj2.showName);

    </script>

问题2：上述代码中

alert(obj1.showName==obj2.showName);

返回值均为false

也是说，showName()与showQQ()方法会随着对象创建而创建，且每个均不同。这就造成了资源的消耗和浪费。

解决这个问题的方式是将方法不再与对象绑定，而是添加到原型上。

    function CreatePerson(name,qq)  //构造函数

    {

        var obj = new Object();

        this.name = name;

        this.qq = qq;

    } 

    CreatePerson.prototype.showName = function(){

        alert('我的名字是：'+this.name);

    }

    CreatePerson.prototype.showQQ =function(){

        alert('我的QQ是：'+this.qq);

    }

    var obj1 = new CreatePerson('allen','123558');

    obj1.showName();

    obj1.showQQ();

    var obj2 = new CreatePerson('tom','8151875');

    obj2.showName();

    obj2.showQQ();

    alert(obj1.showName==obj2.showName);

 </script>
此时  alert(obj1.showName==obj2.showName);返回值为true，及说明虽然创建了两个对象，但是没有改变原型函数。

因此，上述的优化表现在：在构造函数上添加属性，在原型上添加方法。这种创建对象的方式又称混合方式创建对象。

最后，举一个应用的实例——面向对象的选项卡

<!DOCTYPE html>

<html>

<head>

    <title>面向过程的选项卡</title>

    <style type="text/css">

        #div1 input{background: white; }

        #div1 input.active{background: yellow;}

        #div1 div{width: 200px; height: 200px;background: #ccc;display: none;}

    </style>

    <script type="text/javascript">

        window.onload = function()

        {

            new TabSwitch("div1");

        };

        function TabSwitch(id){

            var _this = this;

            var oDiv = document.getElementById(id);

             this.aBtn = oDiv.getElementsByTagName("input");

             this.aDiv = oDiv.getElementsByTagName("div");

            for (var i = 0; i < this.aBtn.length; i++) {

                this.aBtn[i].index = i;

                this.aBtn[i].onclick = function()

                {

                    _this.fnClick(this);

                }

            }

        }

        //选项卡点击

        TabSwitch.prototype.fnClick = function(oBtn)

                {

                    for (var i = 0; i <this.aBtn.length; i++) {

                        this.aBtn[i].className ='';

                        this.aDiv[i].style.display ='none';

                    }

                    oBtn.className='active';

                    this.aDiv[oBtn.index].style.display ='block';

                };

    </script>

</head>

<body>

<div id="div1">

    <input class="active" type="button" value="aaa">

    <input type="button" value="bbb">

    <input  type="button" value="ccc">

    <div style="display: block;">aaaafds</div>

    <div>bbdsvsvvb</div>

    <div>ccsvsavc</div>

</div>

</body>

</html>

至此，逐步体验了通过面向过程到面向对象的转变，面向对象的一个特点在于：

1.对象中不能有函数套函数，可以有全局变量

2.代码方式改变：

onload ->构造函数

全局变量->属性

函数->方法

day58—JavaScript面向对象（一）的更多相关文章

  1. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  2. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  3. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  4. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  5. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  6. javascript面向对象系列第一篇——构造函数和原型对象

    × 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...

  7. Javascript面向对象(封装、继承)

    Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...

  8. 《javascript面向对象精要》读书笔记

    <javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js ...

  9. 【转】javascript面向对象编程

    摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...

随机推荐

  1. 原生js实现深度克隆

    总体思路: 判断对象当中的值为引用值还是原始值 如果是引用值,判断是数组还是对象,如果是原始值直接copy 递归 注意:不要忘了排除null,因为typeof null = 'object' func ...

  2. Linux学习--第四天--find、locate、帮助命令、grep、who、w、压缩命令、网络命令、mount

    find 命令格式:find 搜索范围 匹配条件find 搜索范围 匹配条件(搜索范围一定要填写,不写默认为当前文件夹,不包括子文件夹.) find /etc -name init #搜索文件和文件夹 ...

  3. 牛客假日团队赛5 F 随机数 BZOJ 1662: [Usaco2006 Nov]Round Numbers 圆环数 （dfs记忆化搜索的数位DP）

    链接:https://ac.nowcoder.com/acm/contest/984/F 来源:牛客网 随机数 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言6 ...

  4. CCPC-Wannafly Winter Camp Day1 (Div2, onsite) - I 起起落落

    题目描述 无聊的wlswls正在观察某个商品的价格,wlswls一共观察了nn天,每天这个商品都会有一个价格p_ipi​. 定义一个长度为2m+1(3\leq2m+1\leq n)2m+1(3≤2m+ ...

  5. PHP使用HighChart生成股票K线图详解

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  6. 常用windbg命令(转)

    1.查看版本信息:version.vertarget. 2.查看模块信息:lm.!dlls.!lmvi等. 3.调用栈:用k命令显示调用栈,用.frames命令切换栈帧. 4.内存操作:读内存用d命令 ...

  7. wpf socket 简单通讯示例

    源码下载地址:https://github.com/lizhiqiang0204/WPF-Socket 效果如下:

  8. DevExpress ASP.NET Core Controls 2019发展蓝图（No.5)

    本文主要为大家介绍DevExpress ASP.NET Core Controls 2019年的官方发展蓝图,更多精彩内容欢迎持续收藏关注哦~ [DevExpress ASP.NET Controls ...

  9. selenium定位

    https://www.cnblogs.com/programer-xinmu78/p/10881766.html https://www.cnblogs.com/eastonliu/p/908830 ...

  10. 微信小程序 背景音频播放遇到的深坑

    1.微信前台(聊天页)暂停后回到小程序,再点击播放,播放信息消失,无法续播 ios可以监听到 (onStop已经停止)事件, 安卓无法监听到,只能监听到普通的暂停事件. 2.