现在的位置: 首页 > 综合 > 正文

Javscript 面向对象学习笔记(1)

2013年02月27日 ⁄ 综合 ⁄ 共 6016字 ⁄ 字号 评论关闭

1. 基本 构造函数 和 property

<!--script>
///在这个例子中有需注意的地方:
    // 1. Schedule 传入的参数必须要是数组类型,如果只是一个Lecture 的实例,那么Length 是undefined .
    // 2. 这个例子是书上抄的他的 display() 这个方法是没有写括号的,如果没有写括号那么会显示出display 这个函数的源代码.

// Lecture 类的构造函数
//用 name 和 teacher
    function Lecture(name, teacher) {

       //将参数保存为局部属性
        this.name = name;
        this.teacher = teacher;
    }

    //Lecture 类的一个方法 (method),用于生成一条显示Lecture 信息的字符串
    Lecture.prototype.display = function () {

        return this.teacher + "is teachering " + this.name;
    };

    //Schedule 类的构造函数,以课程的数组作为参数
    function Schedule(lecture) {

        this.lectures = lecture;

       

    }

    //构造一条字符串,表示课程的安排表
    Schedule.prototype.display = function () {

        var str = '';

        if (this.lectures.length == undefined) {

            return this.lectures.display();
        }

        //遍历每项课程,建立包含它们信息的字符串

 

        for (var i = 0; i < this.lectures.length; i++) {
            str += this.lectures[i].display() + " ";

        }

        return str;

    };

//    var lecture = new Lecture("小龙", "黎老师");
////    alert(lecture.display());

//    var schedule = new Schedule(lecture);
//    alert(schedule.display());

    var lecture = new Lecture("小龙", "Mr.Tome");

    var schedule = new Schedule(lecture);
    alert(schedule.display());

</script-->

***************************************************************************

2.事件处理

 

<!--script>

 

    window.onload = function () {
        var li = document.getElementsByTagName("li");
        for (var i = 0; i < li.length; i++) {

            var temp = li[i];

            temp.style.border = "1px solid red";

            ///下面这段js 报错 : temp的parentNode为空
            temp.onclick = function (temp) {

                temp.parentNode.removeChild(temp);

            };

            ///下面这段我执行的时候只会执行一次,我随便点哪个li只会删除最后一个li
            temp.onclick = function (temp) {

                temp.parentNode.removeChild(temp);

            };

 

        }

        ///删除某个DOM 不过还是不明白jquery 里面的click 事件是怎么弄的哈..这样的话可以弄可编辑表格了
      setTimeout(function () {

           var delDom = document.getElementById("div1");
          delDom.parentNode.removeChild(delDom);
       }, 10000);

 

    };

</script-->

<!--script>

 window.onload = function () {

        var li = document.getElementsByTagName("li");
        for (var i = 0; i < li.length; i++) {

            li[i].onmouseenter = function () {

                this.style.backgroundColor = 'black';
            };

            li[i].onmouseleave = function () {

                this.style.backgroundColor = 'white';

            };

            //onmouseenter 和 leave 优先级要高些下面的这段都没有效果的..I dont know.

            //这里的backgroundColor 要大区分大小写
            li[i].onmouseover = function () {
                this.style.backgroundColor = 'blue';

            };

            li[i].onmouseout = function () {
                this.style.backgroundColor = 'red';

            };

 

       //onclick的修正版.这里的this就是事件的发起者吧.猜想.

            li[i].onclick = function () {

                this.parentNode.removeChild(this);
            };

 <script-->

**********************************************************

3.引用类型

<!--script>

   ///引用类型

    var arrNumbers = new Array("one", "two", "three");

    var arrNumbersRef = arrNumbers;

    arrNumbersRef.push("four");

    var NumberClass = function (arrNumbers) {

        this.Numbers = arrNumbers;

    };

    NumberClass.prototype.display = function () {

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

            alert(this.Numbers[i]);

        }

    };

    var NumberInstance = new NumberClass(arrNumbers);

    NumberInstance.display();

    ////////分割线  和C#一样啊.字符串是特别的引用类型

    var str1 = "one";

    var str2 = str1;

    str1 += ",two";

    alert(str1 == str2);

</script-->

4.函数重载和类型检查

<!--script>

    //函数重载和类型检查

   //arguments 判断进来的参数.

    function sendMessage(msg, obj) {

        if (arguments.length == 2) {

            obj.handleMsg(obj.name, msg);

        

         }

        else {return false;}

    }

    sendMessage("Hello,World");

    //对象是用Json类组来表示的吧.不知道了,有点想打牌了啊..不想写得了.

    sendMessage("Hello,World", { handleMsg: function (name, message) {

        alert(name + "发送消息" + message);

    }, name: "小王"

    });

</script-->

**************************分割线*********************

5.类型检查和一个小例子转换成为一个 array

<script>

    ///任意对象转换成为数组

    function makeArray() {

        var arr = [];

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

            arr.push(arguments[i]);

        }

        return arr;

    }

    var strArray = makeArray("小王");

    alert(strArray.length);

    //分割线 下面的是类型判断

    function message() {

        this.display = function () {

            //实例化过后 这边的 msg 不是undefined 是 null;如果没有这个属性再加上才是undefined吧. 

            //实践证明是这样的.如果这个类里面本来有msg实例化过后是null,没有再加上就是undefined. C# 实例化是null.

            //或者

            // if(typeof this.msg=='undefined')

            //书上说可以使用构造函数 就是下面的 constructor  但是我在使用的时候提示为空..不知道了.先记下吧.一般就typeof 或者用值来判断吧.

            if (this.msg.constructor != String) {

                //            if (this.msg == undefined) {

                alert("正确");

                return true;

            }

            alert(this.msg);

            return false;

        };

    }

    var msg = new message();

    msg.msg = "hello";

    msg.display();

    var msg2 = new message();

    msg2.display();

    

</script>

  

***********************************

6.Javascript 特权方法相当于这个方法是动态生成的.

<!--script>       

 function User(properties) {
            for (var i in properties) {
                (function (which) {

                    var p = i;
                    which["get" + p] = function () {
                        return properties[p];

                    };

                    which["set" + p] = function (val) {

                        properties[p] = val;
                    };

                })(this);

            }

        }

        //传值
        var user = new User({ name: "bob", age: "44" });

        //user.name为空,是私有变量
        alert(user.name == null);
<script-->

 

    <!--script>

        function Person(name) {

            this.name = name;
        }

        Person.prototype.getName = function () {
            return this.name;
        };

        function User(name, password) {
            this.name = name;
            this.password = password;

        }

        User.prototype = new Person();

        User.prototype.getPassword = function () {
            return this.password;

        };

        //简单的辅助函数,让你可以将新函数绑定到对象的prototype上
        Function.prototype.method = function (name, func) {
            this.prototype[name] = func;
            return this;

        };

        //一个相当复杂的函数,允许你方便地从其它对象继承函数
        //同时仍然可以调用属于父对象的那些函数
        Function.method("inherits", function (parent) {
            //记录我们所在父层次的级数
            var depth = 0;

            var proto = this.prototype = new parent();

            //创建一个新的名为'uber'的特权函数
            //调用它时会执行所在继承时被重写的函数
            this.method('uber', function uber(name) { });

 

        });

       
       

    </script-->

抱歉!评论已关闭.