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();