zoukankan      html  css  js  c++  java
  • JS OOP -01 面向对象的基础

    JS面向对象的基础:

    1.用定义函数的方式定义类

    2.用new操作符获得一个类的实例

    3.使用 [ ] 引用对象的属性和方法

    4.动态添加,修改,删除对象的属性和方法

    5.使用 { } 语法创建无类型的对象

    6.prototype原型对象

    1.函数的方式定义类

    function class1 () {.......}

    **class1既是一个函数也是一个类,可以将它理解为类的构造函数,负责初始化工作。

    2.new 操作符获得一个类的实例

    **JS中,函数和类是一个概念,当对一个函数进行new操作时,就会返回一个对象。如果这个函数中没有初始化类成员,那就会返回一个空的对象

           function Hello(){
                    alert('hello');
                };
                
                var obj = new Hello();//这里执行了alert('hello'); 把Hello当作是一个构造函数。
                alert(typeof(obj));//打印出obj变量是一个object。
                

    3.使用 [] 引用对象的属性和方法

    **在JS中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法),如下:

      对象名.属性(方法)名

      对象名["属性(方法)名"]

           var arr = new Array();
                
                arr.push('111');
                arr['push']('333');
                
                var len =arr.length;
                var len =arr['length'];
                alert(len);

    **这种引用属性(方法)的方式和数组类似,体现了JS对象就是一组属性(方法)的集合这个性质。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/0318.js" ></script>
            <script>
    
                function User(){
                    this.age=21;
                    this.sex='male';
                }
                
                var user = new User();
                function show(slt){
                    if(slt.selectedIndex!=0){
                        alert(user[slt.value]);
                    }
                }
                
            </script>
            
        </head>
        <body>
    
            <select onchange="show(this)">
                <option value="0">请选择信息</option>
                <option value="age">年龄</option>
                <option value="sex">性别</option>
            </select>
            
        </body>
    </html>

    **eval函数!!

    **eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。

    **如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。

    <script>
    eval("x=10;y=20;document.write(x*y)");
    document.write("<br>" + eval("2+2"));
    document.write("<br>" + eval(x+17));
    </script>

    输出:200  4  27

    4.动态添加,修改,删除对象的属性和方法

    **JS提供了灵活的机制来修改对象的行为,可以动态添加,修改,删除属性和方法。

                var user =new Object();
                user.id=1;//动态生成id属性
                user.name='zhang';//动态生成name属性
                
                alert(user.name);//访问东西生成的name属性
                
            
                user.show=function(){//动态添加方法
                    alert('ok');
                }
                user.show();//                        

    **动态生成的方法,可以如下:

           function Myshow(arg01){//声明一个函数
                    alert('ok'+arg01);
                }
                
                var user =new Object();
                user.id=1;//动态生成id属性
                user.name='zhang';//动态生成name属性
                
                user.show =Myshow;//将Myshow方法的指针指向user.show 
                user.show(' qq');

    **注意:undefined和null的区别

    **调试:console.log(obj);

    **修改就是重新赋值,谁在后把之前的覆盖!

    **JS里面不存在重载!

    **动态删除:

           function Myshow(arg01){//声明一个函数
                    alert('ok'+arg01);
                }
                
                var user =new Object();
                user.id=1;//动态生成id属性
                user.name='zhang';//动态生成name属性
                
                user.show =Myshow;//将Myshow方法的指针指向user.show 
                user.show(' qq');
                
                //动态删除
                user.id=undefined;
                user.name=undefined;
                delete user.show;
                
                alert(user.id);//undefined
                user.show('zq');//没有打印出来,没有该方法了

    **标准标签,可以动态添加额外的属性,不过要注意到浏览器的兼容性!!

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            
            <script>
                
                function TestTT(){
                    
                    var obj = document.getElementById('btn');//获取btn对象
                    obj.tab='ZQ';//给该对象添加一个tab的属性,但是input标准标签并没有这个属性的!动态添加后是可以访问的
                    
                    alert(obj.tab);
                    alert(obj.value);
                }
                
            </script>
            
        </head>
        <body>
            
            <input id="btn" type="text" value="123" />
            <button onclick="TestTT()" >TT</button>
            
        </body>
    </html>

    5.使用 { } 大括号语法创建无类型对象 --(更原生的语法,用处较多)

    **JS中的对象其实就是属性(方法)的一个集合,并没严格意义上的类的概念。所以可以使用 { } 直接声明一个对象,而不是类。

           var arr= new Array();
                var arr=[];
                
                var obj = new Object();
                var obj ={};
                
                //大括号创建的是对象不是类
                var user ={
                    name:'zq',
                    age:12
                };
                
                //alert(user.age);
                //var user1= new User();//js会报错
                //alert(user1.age);
                
                function User(){
                    
                };
                var user_1 = new User();
                
                user_1=
                {
                    name:'zq',
                    age:12
                };
                alert(user_1.name);
                

    6.prototype原型对象

    **prototype对象是实现面向对象的一个重要机制。每个函数(function)其实也是一个对象,它们对应的类是‘Function’,但它们的身份特殊,每个函数对象都具有一个子对象prototype。

    **即prototype表示了该函数的原型,而函数也是类,prototype就是表示了一个类的成员的集合。当通过 new 来获取一个类的对象时,prototype对象的成员都会成为实例化对象的成员。

    **这里可以理解为C#的静态成员,并且可以动态声明!

           function User(){
                    this.name='zq';
                    this.age=12;
                };
                
                User.prototype.show=function(){//给这个类的原型添加了一个show方法
                    alert('User Show!!!');
                };
                
                var  user1=new User();
                user1.name='qq';
                //alert(user1.name);
                user1.show();
                
                var user2=new User();
                //alert(user2.name);
                user2.show();
                
  • 相关阅读:
    hdu 4614 线段树 二分
    cf 1066d 思维 二分
    lca 最大生成树 逆向思维 2018 徐州赛区网络预赛j
    rmq学习
    hdu 5692 dfs序 线段树
    dfs序介绍
    poj 3321 dfs序 树状数组 前向星
    cf 1060d 思维贪心
    【PAT甲级】1126 Eulerian Path (25分)
    【PAT甲级】1125 Chain the Ropes (25分)
  • 原文地址:https://www.cnblogs.com/youguess/p/10551782.html
Copyright © 2011-2022 走看看