Javascript 学习笔记六-CFANZ编程社区

1、javascript 面向对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
    <title>无标题文档</title>
    <script type="text/javascript">//oDiv.onclick = function () {
        //    alert(this);
        //};
        window.onload = function ()
            var arr = [12, 65, 87];
            //this：当前的方法，属于谁
            //arr.show = function () {
            //    alert(this);
            //};
            arr.sssss = function ()
                alert('123');
            };
            arr.sssss();
        }
    </script>
</head>

<body>
</body>
</html>

我擦，代码竟然可以这么写

2、构造函数与原型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
    <title>无标题文档</title>
    <script type="text/javascript">//构造函数
        function Person(name, sex)
            this.name = name;
            this.sex = sex;
        }
        //原型
        Person.prototype.showName = function ()
            alert(this.name);
        };
        Person.prototype.showSex = function ()
            alert(this.sex);
        };
        var p = new Person('blue', '男');
        p.showName();
        p.showSex();
    </script>
</head>
<body>
</body>
</html>

小注：
每个对象有差异的东东，可以放到构造函数中，通用的可以使用原型

3、原型的优先级

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
    <title>无标题文档</title>
    <script type="text/javascript">Array.prototype.a = 12;
        var arr = [1, 2, 3];
        alert(arr.a);   //12
        arr.a = 5;
        alert(arr.a);   //5
        delete arr.a;
        alert(arr.a);   //12</script>
</head>
<body>
</body>
</html>

4、[Javascript中this关键字详解]

5、事件绑定

IE方式

attachEvent(事件名称, 函数)，绑定事件处理函数
detachEvent(事件名称, 函数)，解除绑定

DOM方式

addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)

//1.谁
//2.事件
//3.函数
function AddEvent(obj, sEvent, fn)
    //IE
    if(obj.attachEvent)
    {
        obj.attachEvent('on'+sEvent, fn);
    }
    else
    {
        obj.addEventListener(sEvent, fn, false);
    }
}

6、绑定和this

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
    <title></title>
    <meta charset="utf-8"
    <script type="text/javascript">function ()
            var oBtn = document.getElementById('btn1');
            /*oBtn.onclick=function ()
            {
                alert(this);
            };*/
            //IE    事件绑定        this->window
            /*oBtn.attachEvent('onclick', function (){
                alert(this==window);
            });*/
            //FF
            oBtn.addEventListener('click', function ()
                alert(this);
            }, false);
        };
    </script>
</head>
<body>
    <input id="btn1" type="button" value="aaa"
</body>
</html>