• 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();
                
  • 相关阅读:
    ★《唐琅探案》后记【2】
    ★《唐琅探案》后记【2】
    《OD学hadoop》第一周0625 LINUX作业一:Linux系统基本命令(一)
    《OD学hadoop》第一周0626
    《OD学hadoop》mac下使用VMware Fusion安装centos
    《OD学hadoop》第一周0625
    《OD学hadoop》第二阶段Java编程基础
    《OD学hadoop》Linux基础
    《OD学hadoop》Hadoop前置
    《OD学算法》常用算法集合
  • 原文地址:https://www.cnblogs.com/youguess/p/10551782.html
Copyright © 2020-2023  润新知