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();
            
原文地址:https://www.cnblogs.com/youguess/p/10551782.html