面向对象---函数重复---原型 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        var arr1 = new Array(12, 22, 23, 454, 34);
        var arr2 = new Array(23, 234, 23);
        Array.prototype.sum = function () {  //class  原型 
　　　　　　//arr1.sum=function (){　　　　　　　　//行间样式  给对象加东西
            var result = 0;

            for (var i = 0; i < this.length; i++) {
                result +=this[i];
            }

            return result;
        };

        alert(arr1.sum());
        alert(arr2.sum());
    </script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>  \\混合的构造函数/原型方式  
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        function createPerson(name, qq) {     \\构造函数
            this.name = name;
            this.qq = qq;
        }
        //createPerson.prototype  是原型
        createPerson.prototype.showName = function () {

            alert("我的名字：" + this.name);
        };

        createPerson.prototype.showQQ = function () {
            alert("我的QQ" + this.qq)
        }；

        var obj = new createPerson("bule", "234234234");
        var obj2 = new createPerson("234", "23423453");

        obj.showName();
        obj.showQQ();

        obj2.showName();
        obj2.showQQ();
        //alert(obj);
        alert(obj.showName == obj2.showName);
    </script>
</head>
<body>

</body>
</html>

用构造函数加属性

用原型加方法

-------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        #div1 input {background:white;}
        #div1 input.active {background:yellow;}
        #div1 div {width:200px; height:200px; background:#ccc; display:none;}
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var aBtn = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');

            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].index = i;
                aBtn[i].onclick = function () {
                    for (var i = 0; i < aBtn.length; i++) {
                        aBtn[i].className = '';
                        aDiv[i].style.display = 'none';
                    }
                    this.className = 'active';
                    aDiv[this.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;">aaa</div>
        <div>sdfsdf</div>
        <div>sdfsdfsdf</div>
    </div>
</body>
</html>

 

（上面）面向过程  改  面向对象

window.onload     　　　　　　　　　　构造函数

　　　　初始化整个程序　　　　　　　　　　初始化整个对象

变量　　　　　　　　　　　　　　　　属性

函数　　　　　　　　　　　　　　　　方法

 

函数没有嵌套

可以有全局变量

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        #div1 input {
            background: white;
        }

            #div1 input.active {
                background: yellow;
            }

        #div1 div {
            width: 200px;
            height: 200px;
            background: #ccc;
            display: none;
        }
    </style>
    <script>
        //var index = null;
        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;">aaa</div>
        <div>sdfsdf</div>
        <div>sdfsdfsdf</div>
    </div>
</body>
</html>

 

posted @ 2020-03-19 16:08  八风不动  阅读(153)  评论(0)    收藏  举报