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

在JavaScript中创建对象

2016-01-12 14:08 471 查看
这两天碰上了点儿前台的问题,大脑卡顿,Linux暂时顾不上了,/(ㄒoㄒ)/~~,为了调好程序,阅读了一些js代码,鉴于js就学了最基础的用法,看得迷迷糊糊的,好歹问题调好了,决定来补补js的课。

首先明确第一点:JavaScript中,所有的事物都是对象,字符串啦,数组啦,函数啦,统统都是对象!

第二点:对象拥有自己的属性和方法。

创建对象的方法呢,有以下几种,1是直接创建对象,2是使用构造器,3原型方法,4构造器与原型混合。

直接创建对象的语法是这样的:

car=new Object();
car.color="green";
car.owner="dad";
我创建了一个名叫car的对象,它有两个属性color和owner,创建该对象的方法还可以这么写:

car={color:"green",owner:"dad"};
在创建对象之后通过  对象名.属性名  可以读取指定对象的属性值,也可以通过  对象名.属性名="xxx"  ,为该对象的属性重新赋值,如
alert(car.color);
car.color="red";
alert(car.color);


对象还可以通过构造器来创建,比如:

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="javascript">function Car(color,owner,users){
this.color=color;
this.owner=owner;
this.users=users;
}
var car=new Car("red","mum","");
alert("car.color: "+car.color+"  car.owner: "+car.owner);
car.users="mum, dad and me";
alert("car.users: "+car.users);

这里 createcar() 就充当了一个构造器,通过 构造器 和 new 操作,我们又一次建立起了对象car,属性的读取、修改、增加操作与之前一样的啦。

对象除了拥有属性外,还可以拥有方法啦,让我们把上一段代码改一下,添加一个方法进去吧:



function Car(color,owner,users){
this.color=color;
this.owner=owner;
this.users=users;
this.getmsg=function(){alert("car.color: "+this.color+"  this.owner: "+this.owner+"  car.users: "+this.users);}
}
var car=new Car("red","mum","mum, dad and me");
car.getmsg();
注意哦,在调用 对象car 的方法 getmsg() 时,不要丢了括号,O(∩_∩)O~~

(~ o ~)~zZ,有没有把你们讲睡着……语言表达能力着实堪忧啊。

话说,第三种创建对象的方法就是原型方法了(第一次见这说法的时候,嗯,不明觉厉)。js里呢,对象都有一个叫做prototype的属性,原型就是指的它啦,与构造器不同,原型只能直接赋值,而不能根据需求传递(就是说,利用原型初始化的属性,其值是写死的,如果需要个性化设置,只能在对象创建后重新赋值)

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"><span></span></span><pre name="code" class="javascript">function Car(color,owner,users){

}

Car.prototype=
{
color:"white",
owner:"dad",
users:"mum, dad and me",
getcolor:function(){alert("car.color: "+this.color);},
getowner:function(){alert("car.owner: "+this.owner);},
getusers:function(){alert("car.users: "+this.users);}
};

var js_test=new Car("","","");
js_test.getcolor();
js_test.getowner();
js_test.getusers();




Car.prototype={......} 就是对于原型的定义啦,凭嘛car一定属于dad,凭嘛color一定是white,这样好不方便有木有!!!

于是有了第四种方法,原型与构造器结合的版本,例如:

function Car(color,owner){
this.color=color;
this.owner=owner;
}

Car.prototype=
{
users:"mum, dad and me",
getcolor:function(){alert("car.color: "+this.color);},
getowner:function(){alert("car.owner: "+this.owner);},
getusers:function(){alert("car.users: "+this.users);},
getmsg:function(){alert("car.color: "+this.color+"  this.owner: "+this.owner+"  car.users: "+this.users)}
};

var js_test=new Car("gray","me");
js_test.getmsg();
据说,通常是“用构造函数定义对象的所有非函数属性(包括普通属性和指向对象的属性),用原型方式定义对象的函数属性(方法)”

再有:

function Car(color,owner){
this.color=color;
this.owner=owner;
this.users="mum, dad and me";
Car.prototype.getmsg=function(){alert("car.color: "+this.color+"  this.owner: "+this.owner+"  car.users: "+this.users)}
}

var js_test=new Car("gray","me");
js_test.getmsg();
把对原型的定义挪到构造器的里面,据说这样看上去和类更像啦,不过,这样在构造器里定义的原型不能写成  Car.prototype={......}  的样子啦,要写  Car.prototype.属性或方法=......

欧啦,以上就是今天的分享了~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: