javascript面向对象知识

<html>
<head>
    <script></script>
</head>
<body>
    <!-- <script>
        ///////////壹开始///////////
        //javascript创建对象
        //函数、方法、事件处理函数、构造函数
        //函数可独立存在;方法属于对象;事件处理函数处理事件;构造函数构造对象
        
        /*
         *    定义一个数组
         */
         var arr = [1,2,3,4,5];
    
         alert(typeof arr); // 弹出object,证明数组是对象
    
         arr.push(6);
         alert(typeof arr);
         ///////////壹结束///////////
    </script> -->

    <!-- <script>
        /**
         *定义一个全局函数
         */
         //function show(){
            //alert(this);
         //}
    
         window.show = function(){ // 为对象添加方法,不能太随意添加方法和属性,否则会覆盖已有方法和属性
            alert(this);
         }
    
         //调用show
         window.show();
    </script> -->
    <!-- <script>
        var arr = [1,2,3,4,5];
        arr.show = function(){ // 本例中this表示函数调用者,但是new创建对象,this并不是指向调用者
            alert(this);
        }
        arr.show();
    </script> -->

    <!-- <script>
        //构造工厂
        function personFactory(name,age){
            var person = new Object();
            person.name = name;
            person.age = age;
    
            person.showName = function(){
                alert("姓名:" + this.name);
            }
    
            person.showAge = function(){
                alert("年龄:" + this.age);
            }
    
            return person;
        }
    
        var p1 = personFactory("猪",23);
        var p2 = personFactory("狗",22);
    
        p1.showName();
        p1.showAge();
    
        p2.showName();
        p2.showAge();
    </script> -->

    <!-- <script>
        //使用new创建js对象
        function Person(name,age){
            
            //var this = new Object(); // 等效于这句话
    
            this.name = name;
            this.age = age;
            
            this.showName = function(){
                alert("姓名:"+this.name);
            }
            this.showAge = function(){
                alert("年龄:"+this.age);
            }
    
            //用new调用函数,函数内的this会指向新创建空白对象,而不是方法调用者,会自动返回该对象
    
            //return this; // 自动返回创建对象,等效于这句话
        }
    
        var p1 = new Person("小猪八",20);
        var p2 = new Person("小沙沙",19);
    
        alert(p1.showName == p2.showName); // == 仅仅数值是否相等,比较的是方法,而不是属性值
    </script> -->

    <!-- <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
    
        //添加原型方法,这样创建的对象都是用的同一套方法
        Person.prototype.showName = function(){
            alert("姓名:"+this.name);
        }
        Person.prototype.showAge = function(){
            alert("年龄:"+this.age);
        }
    
        //创建2个对象
        var p1 = new Person("小猪八",22);
        var p2 = new Person("我是沙沙",20);
    
        alert(p1.showName == p2.showName);
        alert(p1.showName == Person.prototype.showName);
        alert(p2.showName == Person.prototype.showName);
    
    </script> -->

    <script>
        Array.prototype.sum = function(){
            var sum = 0;
            for(var i=0;i<this.length;i++){ // this标示调用sum方法的数组对象
                sum += this[i];
            }
            return sum;
        }

        var arr1 = new Array(1,2,3,4,5,6);
        var arr2 = [11,22,33,44,55];

        alert(arr1.sum());
        alert(arr2.sum());

        alert(arr1.sum == arr2.sum);
        alert(arr1.sum == Array.prototype.sum);
        alert(arr2.sum == Array.prototype.sum);
    </script>

</body>
</html>

关于javascript的面向对象知识,可以亲自敲一遍加深理解。

posted @ 2018-10-15 17:19  好兵帥克  阅读(98)  评论(0编辑  收藏  举报