首页 > 代码库 > JavaScript面向对象编程
JavaScript面向对象编程
一、JS面向对象编程基础
对象的创建:
function Dog(name,age){ this.name = name; /*创建对象的属性和方法必须加上this*/ this.age = age; this.eat = function(){ alert(this.color+"、"+this.age+"岁、名字叫"+this.name+"的狗在吃骨头"); } } var dog = new Dog("Tom",2); dog.eat(); /* color未定义 */ /*动态添加属性方法*/ dog.color="黑色"; /*动态添加属性*/ dog.eat(); /*color为黑色*/ delete dog.color; /*删除属性*/ dog.run=function(){ /*动态添加方法*/ alert(this.color+this.age+"岁、名字叫"+this.name+"的狗在吃骨头,吃完就跑"); } dog.run();
with语句:将需要使用其属性和方法的对象用with语句包含起来
with(dog){ alert(color); alert(name); alert(age);
eat(); }
for语句:用于遍历一个对象的所有属性
for(var dog2 in dog){ /*for(var 变量(装对象的属性) in 对象) dog[dog2]是通过dog2属性找到dog对象的值*/
alert("属性名字:"+dog2+"-属性值:"+dog[dog2]);
}
二、创建自定义的JS类和对象
(一)工厂方式 (每个对象都有自己的方法 占用资源)function Po(name){ var obj = new Object(); obj.name=name; /*设置的是obj的属性而不是Po本身的属性 设置本身的属性要用this*/ obj.say=function(){ alert("我是"+obj.name); return obj; } var p = Po("张三"); /*获取返回值*/ var p1 = Po("李四"); var p = new Po("张三"); /*new的是Po对象 最好用上面的方式获取*/ p.say(); /*只设置了obj的属性而不是Po本身的属性,需要返回obj对象才能调用obj的方法*/ p1.say(); alert(p.say==p1.say); /*false*/
}
(二)构造函数方式(每个对象都有自己的方法 占用资源)
function Po(name){ this.name=name; this.say=function(){ alert("我是"+this.name); } } var p = new Po("张三"); var p1 = new Po("李四"); p.say(); p1.say(); alert(p.say==p1.say); /*false 不同对象调的方法不同 即每个对象都有自己的方法 占用资源*/
(三)原型方式原型方式 (方法共用 但是不能传参)
function Po(){ Po.prototype.name="李四"; Po.prototype.say=function(){ alert("我是"+this.name); } } var p = new Po(); var p1 = new Po(); p.say(); p1.say(); alert(p.say==p1.say); /*true 表示所有对象用同一个方法*、
(四)构造+原型方式(解决了前面提到的问题,但封装不够完美)
function Po(name){ //构造方法建原型对象 this.name=name; } Po.prototype.say=function(){ /*原型方式创建共用方法*/ alert("我是"+this.name); } var p = new Po("张三"); var p1 = new Po("李四"); p.say(); p1.say(); alert(p.say==p1.say); //true
(五)更好的构造+原型方式(一种完美的解决方案)
function Po(name){ this.name=name; if(Po.prototype.say==undefined){ Po.prototype.say=function(){ alert("我是"+this.name); } } } var p = new Po("张三"); var p1 = new Po("李四"); p.say(); p1.say(); alert(p.say==p1.say); //true
(六)JSON格式
var Po = { name:"张三", /*逗号隔开,不是分号*/ age:12, addr:"重庆", say:function(){ alert(this.age+"岁的"+this.name+"现居"+this.addr); } } alert(Po.name); alert(Po.age); alert(Po.addr); Po.say();
三、对象继承实现
(一)对象冒充
function Po(name){ this.name=name; this.say=function(){ alert("我是"+this.name); } } function FalsePo(name){ this.fpo=Po; this.fpo(name); delete this.fpo; /*冒充后必须删除冒充的对象*/ this.color=function(){ alert(this.name+"的肤色是黑的"); } } var falsePo = new FalsePo("lisi"); falsePo.say(); falsePo.color();
(二)call()
1 function Po(name){ 2 this.name=name; 3 this.say=function(){ 4 alert("我是"+this.name); 5 } 6 } 7 function FalsePo(name){ 8 Po.call(this,name); //基本类.call(对象,参数列表) 9 this.color=function(){ 10 alert(this.name+"的肤色是黑的"); 11 } 12 } 13 var falsePo = new FalsePo("lisi"); 14 falsePo.say(); 15 alsePo.color();
(三)apply()方式
1 function Po(name,age){ 2 this.name=name; 3 this.age=age; 4 this.say=function(){ 5 alert("我是"+this.name); 6 } 7 } 8 9 function FalsePo(name,age){ 10 Po.apply(this,[name,age]); /*基本类.apply(对象,参数数组)*/ 11 12 this.color=function(){ 13 alert(this.age+"岁的"+this.name+"的肤色是黑的"); 14 } 15 } 16 var falsePo = new FalsePo("lisi",20); 17 falsePo.say(); 18 falsePo.color();
(四)原型链
function Po(name){ this.name=name; } Po.prototype.say=function(){ alert("我是"+this.name); } function fPo(name,addr){ Po.call(this,name); this.addr=addr; } fPo.prototype=new Po(); fPo.prototype.live=function(){ alert(this.name+"住在"+this.addr); } var pp = new fPo("张三","重庆"); pp.say(); pp.live();
JavaScript面向对象编程
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。