• JS面向对象编程学习


    学习目标:
    1、掌握JS中的类(原型对象)和对象。2、什么是成员变量和成员方法。3、掌握构造方法的使用。
    补充:关于双等号(==):
    1、如果等号两边都是字符串时,则比较内容是否相等
    2、如果等号两边是数字时,则比较数值大小是否相等
    3、如果等号两边是对象或者对象的函数,则比较地址是否相等(即判断两者是否引用的同一对象)
            function Person(){
            }
            var p1=new Person();
            var p2=new Person();
            alert(p1==p2);//这里结果是false,因为地址不相等
            var p3=p2;
            alert(p3==p2);//这里是true
     
     
    javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象!
    var a=123;
    window.alert(a.constructor);//这里会打出a的构造函数是Number
    var b='abc';
    //同样能打出来b的构造函数是String
    function Person(){}
    window.alert(Person.constructor);
    //这里能打印出Person的构造函数是 function Function(){}
     
    从上面可以看出,javascript中所有的东西都是对象!!!
     
     
    基于对象和面向对象实际上都是以对象的概念来编写程序,从本质上讲没有区别。javascript中没有class(类),所以有人把类叫作原型对象,因为两个概念从在编程中发挥的作用看都是一个意思。
     
    //定义一个类(原型对象)
    function Cat(){
     
    }
    //看起来和函数一样的,主要是看怎么去用
    Cat();//这样用,它就是一个函数
    var cat1 = new Cat();//这里cat1就是一个对象(实例)了;
    //定义这个对象的属性
    cat1.name="小白";
    cat1.age=3;
    cat1.color="白色";
    //从上面可以看出:
    //1、JS中的对象的属性可以动态的添加
    //2、属性没有限制
     
    例:
    function test(){
        alert(this.v);
    }
    var v=90;
    //函数默认都是属于window对象的,window是默认的对象,所以可以不打
    window.test();//这里输出为90,因为函数 是在var后面才调用的
     
     
    关于用var定义和不用var定义变量的区别例:
            //在函数外面用var和不用都可以
            var abc=89;
            function test(){
                //在函数里面,不用var,则表示用全局的abc(即外面的)
                //用了var 则表示在test()函数中定义一个新的变量
                abc=900;
            }
            alert(abc);
     
    访问对象的属性有两种方法:
    1、普通方式
            对象名.属性名
    2、动态访问
            对象名['属性名']
        例:
            function Person(){}//定义一个类
            var p1=new Person();//创建一个对象
            p1.name="qqzone";//给对象的name属性赋值
            alert(p1.name);//这里是普通方式访问
            alert(p1['name']);//这里是动态方式访问
            var val = 'qq'+'zone';
            alert(p1[val]);//这里就体现出动态的好处了,属性名可以是字符串拼接出来的
     
    JS中对象的传值是引用方式var a=new Person();
    a.name="test1";
    var b=a;//把a的值赋给了b,这里其实是b引用了a【传地址】
    b.name="test2";//这里b.name改变了那么a.name也一样改了
     
    JS中有垃圾对象自动回收机制,也可以主动删除1、当一个对象没有任何引用指向它的时候,就会被自动删除掉
            var a=new Person();
            var b=a;//这里对象a是被引用两次
            b=null;//这里变回1
            a=null; //这里就没有任何引用指向原来的对象了
     
    2、使用delete,主动删除对象的某个属性
            var a=new Person();
            a.name='test1';
            var b=a;
            delete b.name;//删除name属性,那么通过a.name也无法访问了
           
     
     
    一、如何定义一个原型对象
        1、使用构造函数来定义
                基本语法
                function 类名(){   //类名即原型对象名
                   
                }
                创建对象 www.2cto.com
                var 对象名=new 类名;
                window.alert(对象名.constructor); //对象实例的构造方法
     
                如何判断一个对象是否属于某个类?
                1、使用instanceof
                    if(a instanceof Person){
                        alert('yes');
                    }
                2、使用constructor
                    if(a.constructor == Person){
                        alert('yes');
                    }  
           
        2、工厂方法,使用new Object创建对象,并添加相关属性
                    function Person(){
                    }
                    var p1=new Person();
                    p1.name='test';
        3、使用prototype(原型)
     
     
        4、构造函数及原型混合方式
     
        5、动态原型方式
     
    二、this关键字
            function Person(){
                //这里定义了一个属性后,创建对象时将自动赋值给新对象
                this.name='test';
                //如果这样使用,则表示该属性是私有的
                var age = 90;
                //下面使用this,表示这是Person类的一个公开方法,可以访问私有方法
                this.show=function(){
                    window.alert(age+''+name);
                }
                //这里表示是Person的一个私有的方法
                function show2(){
                }
            }
            var p1=new Person;
            var p2=new Person;
            alert(p1.name+' '+p2.name);//这里都为test,this为公开属性
            //p1.show2();  这里show2();是私有方法 ,所以如果在这里使用就会报错
     
     三、对象成员方法(函数)
            1、方法一:
               function Person(name,age){
                    this.name=name;
                    this.age=age;
                    //输出名字,this.show就是一个公开的函数(每个对象都有),函数名show
                    this.show=function(n){//可带参数
                        alert(this.name);
                    }
                }
            2、方法二:
                function Person(name){
                    this.name=name;
                }
                function show(){
                    alert(this.name);
                }
                p1=new Person();
                //这种方法,就不是每个对象都有的函数了
                p1.abc=show;//这里不带括号,表示把show的构造函数传给p1.abc
                p1.abc();
     
                同样也可以直接用p1.abc创建函数
                p1.abc = function show(){
                    alert(this.name);
                }
            3、方法三
                function Person(name){
                    this.name=name;
                }
                var p1=new Person();
                //使用prototype创建的方法是所有对象都共享的
                Person.prototype.age=function(){
                    this.age="12";
                }
                var p2=new Person();
                p1.age();
                alert(p1.age);//输出12
                alert(p2.age);//这里不会输出 ,因为p2还没有运行age(),运行后就可以获取age属性;
               
     四、Object类(基类)
                Object是javascript中所有类的基类
     
            var p1=new Object();//通过Object直接创建对象,这里p1就是对象了
            p1.name='test';//给p1的属性赋值
            通过Object创建的类有以下主要属性:
            1、contructor 对象构造函数
            2、prototype  原型,获得类的prototype对象,static属性
           
                var a=10;
                //给Number类添加一个add方法
                Number.prototype.add=function(a){
                    return this+a;//使用这个方法,会增加a
                }
                alert(a.add(10).add(10));//这里a.add(10)运行后结果为20,那么20.add(10)运行后结果为30
           
    成员函数小结:
    1、成员函数的参数可以是多个
    2、成员函数可以没有返回值,如果有返回值,最多只返回一个
    3、JS中不支持函数重载,如果有多个函数名相同,则以最后一个为准
    4、在js中直接定义一个函数或变量实际上就是全局函数和全局变量,他们是属于window的
            var a=90;
            alert(this.a);//这里输出就是90,因为都属于window

    摘自 贝尔的技术博客

  • 相关阅读:
    动手动脑5
    每日日报
    每日日报
    每日日报
    每日日报
    每日日报
    每日日报
    每周总结
    2020/10/13
    2020/10/20
  • 原文地址:https://www.cnblogs.com/huangye-dream/p/3222323.html
Copyright © 2020-2023  润新知