您的位置:首页 > Web前端 > JavaScript

javascript(十四) 自定义js对象

2016-06-04 00:00 656 查看
自定义js对象

[code=plain]​
var article=function(title){
this.title = title;
var arrys=new Array();
this.addPerson=function(person){
var i=arrys.length;
arrys[i]=person;
}

this.showPerson=function(){
var persons="";
for(var i=0;i<arrys.length;i++){
persons+=arrys[i];
}
return persons;
}
}

window.onload=function(){
var news=new article("nihao");//创建一个对象
news.addPerson("kebe");
news.addPerson("jardan");
news.addPerson("james");
document.open();
document.write(news.title);
document.write(news.showPerson());
document.close();

}
​

说到对象就必须要知道js里面的原型(prototype),它的作用是扩展任意对象(内建对象也可以扩展)。为指定对象增加属性或者方法。

这里的扩展既有扩展类,又有扩展实例对象,他们之间的范围域是不相同。

扩展类的方法/属性:

[code=plain]var article=function(title){
this.title = title;
var arrys=new Array();
this.addPerson=function(person){
var i=arrys.length;
arrys[i]=person;
}

this.showPerson=function(){
var persons="";
for(var i=0;i<arrys.length;i++){
persons+=arrys[i];
}
return persons;
}
}

window.onload=function(){
article.prototype.getTitles=function(name){return name;};//所有new出来的实例对象都使用这个方法
article.prototype.head="heihie";//所有实例对象都有这个属性
var news=new article("nihao");
document.open();
document.write(news.getTitles("nihao"));
document.close();

}

扩展实例对象:

[code=plain]var article=function(title){
this.title = title;
var arrys=new Array();
this.addPerson=function(person){
var i=arrys.length;
arrys[i]=person;
}

this.showPerson=function(){
var persons="";
for(var i=0;i<arrys.length;i++){
persons+=arrys[i];
}
return persons;
}
}

window.onload=function(){

var news=new article("nihao");
news.getTitles=function(name){return name;};//直接定义,不需要加上prototype对象,只有news才有这个扩展方法
document.open();
document.writeln(news.getTitles("gg"));
document.close();

}

必须要提一下,在对象中 this和var的区别//this修饰的属性是共有属性,var修饰的属性是私有属性。

新版本下getter/setter获取和修改对象,有实体bean的感觉

[code=language-javascript]function use(){
var chen=person.prototype;
chen.__defineGetter__("title",function(){ return "title is "+this.myTitle;});
chen.__defineSetter__("title",function(tt){this.myTitle=tt;});
chen.print=println;
var de=new person();
de.title="one title";
alert(de.title);

}

function println(){
document.writeln(this.title+" <br />")
}
//person 对象
function person(){

}

JS中的继承/构造函数链

[code=plain]function Tune(title,type){
this.title=title;
this.type=type;
this.getTitle=function(){
return "song: "+this.title;
}
}

function Ari_tune(title,type,artist){
this.artist=artist;
//this.toString("Artist is "+artist);
Tune.apply(this,arguments);//arguments是参数数组 Tune.call(this,title,type);可以指定参数个数,更灵活一点
this.toString=function(){
return "artist: "+this.artist+" "+this.getTitle();
}

}

window.onload=function(){
Ari_tune.prototype=new Tune();
var song=new Ari_tune("i want to hold your hand","rock","beatles");
document.writeln(song.toString());

}

除了用类来创建对象,js中还有一次性对象的说法

[code=language-javascript]var oneOff={
name:"chen",
age:18,
method:function(name,age){
return "name is "+name+" age is "+age;
}

}

window.onload=function(){
alert(oneOff.name);
alert(oneOff.method("nihao",19))
var obj=new Object();
obj.name="name";
obj.age=19;
obj.method=function(){
return "name is "+this.name+" age is "+this.age;
};
alert(obj.method());

var objName=new function(){
this.name="nihao";
this.metdod=function(){
return "function "+this.name;
}
};

alert(objName.metdod());

}

function 与new function 区别 //Function 的区别一个很不错的网站:
http://www.jb51.net/article/7955.htm
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: