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