zoukankan      html  css  js  c++  java
  • Javscript 面向对象学习笔记(1)

    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-->

  • 相关阅读:
    Android Gallery和ImageSwitcher同步自动(滚动)播放图片库
    Android PullToRefreshListView和ViewPager的结合使用
    AndroidTagView云标签
    Android 两步搞定Fragment的返回键
    Android Fragment数据传递与数据回显
    Glide加载圆形图片第一次只显示默认图片
    Android 自定义EditText实现类iOS风格搜索框
    TabLayout中Indicator的样式修改
    Kali linux2.0里Metasploit的服务类型探测
    Kali linux 2016.2(Rolling)中的Nmap的端口扫描功能
  • 原文地址:https://www.cnblogs.com/fat_li/p/2218845.html
Copyright © 2011-2022 走看看