JS技术

Javascript类_Javascript教程

字号+ 作者:H5之家 来源:H5之家 2015-09-26 08:01 我要评论( )

Javascript类,学习Javascript类,Javascript类,查看Javascript类,1、 创建对象:var obj = new Object();//第一种方式。var obj = {};//第二种方法。顺带一句可以

1、    创建对象:
var obj = new Object();//第一种方式。

var obj = {};//第二种方法。顺带一句可以通过var arr = [] 来创建数组

2、    给对象的属性赋值

nahao.gender = 'male';

nahao.yearOfBirth = 1989;

nahao.name = 'Topcss'; //对象的属性也可以叫做对象的成员。像普通的变量一样,JS对象的属性可以是是字符串,数组,数字,甚至可以是对象或者是函数。

3、    给对象添加方法其实对象的属性如果是函数,那么这个属性就可以叫做对象的方法

nahao.gender = 'male';

nahao.yearOfBirth = 1989;

nahao.name = 'Topcss';

nahao.info = function(){

var str = '姓名:' +

this.name + ',性别:' +

this.gender + ',出生年:' +

this.yearOfBirth;

alert(str);

}

nahao.info();

4、    我们可以使用下面的简略语法定义上面的对象:
var nahao = {

gender : 'male',

yearOfBirth : 1989,

name : 'Topcss',

info : function(){

var str = '姓名:' + this.name + ',性别:' + this.gender + ',出生年:' + this.yearOfBirth;

alert(str);

}

};//如果调用nahao.info(),将会得到和上面一样的结果。需要注意的是,属性之间使用逗号隔开,最后一个属性之后没有逗号。

5、 构造函数构造函数可以帮助我们来缩减代码量。首先,构造函数也是一个函数。雏形如下:

function Person(){}/和定义普通的函数没有什么区别。下面就来向Person构造函数中添加内容:

function Person(name,gender,yearOfBirth,site){

this.name = name;

this.gender = gender;

this.yearOfBirth = yearOfBirth;

this.site = site;

this.info = function(){

var str = '姓名:' + this.name + ',性别:' + this.gender

+ ',出生年:' + this.yearOfBirth + '网站:' + this.site;

alert(str);

}

}//这样,构造函数就完成了。我们现在就可以使用如下语句来定义多个对象了:

var nahao = new Person('Top css',male,1989,'www.javava.org);

var gaoshou = new Person('Widen','male',1980,'www.baidu.net');

var wudi = new Person('不详','不知道','保密','bbs.blueidea.net');通过他们的方法来调用

nahao.info();

gaoshou.info();

wudi.info();

注意:在上面的构造函数中,参数的名字和对象属性的名字是相同的,例如:

this.name = name;虽然这样是合法的,但是如果要定义私有属性的话就不行了(后面会提),而且看起来比较混乱。所以最好将构造函数修改如下:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg){

this.name = nameArg;

this.gender = genderArg;

this.yearOfBirth = yearOfBirthArg;

this.site = siteArg;

this.info = function(){

var str = '姓名:' + this.name + ',性别:' + this.gender

+ ',出生年:' + this.yearOfBirth + '网站:' + this.site;

alert(str);

}

}

6、 静态方法什么是静态方法呢?就是直接添加在某个对象上的属性或者方法,它仅对一个对象有效,例如:

nahao.skill = '会点XHTML,CSS,现在还会说JavaScript了';添加完这个语句之后,nahao就拥有了skill属性。但是出自同一个构造函数的gaoshou和wudi却不受任何影响。当然了,我们可以给它们也加上这个属性:

gaoshou.skill = '精通HTML,CSS,JS,FLEX,PHP,.NET,Linux编程,Perl,Ruby,XXX...';

wudi.skill = '能用啤酒瓶盖与沙子手工打磨出CPU等PC基本零部件。';

同样,我们也可以给构造函数添加静态方法,但是这同样不会影响使用该构造函数定义的对象。例如:

Person.showName = function(){

alert(this.name);

};

Person.showName();

nahao.showName();//我们给Person定义了一个showName函数,但是它只对构造函数Person本身有用(但是没有什么实际意义),如果在nahao对象上调用这个方法将会出错。

7、 给对象定义私有成员公开的对象?在前面定义的所有对象,其所有的属性都是暴露在外的,可以随便访问,甚至修改也没问题。例如我们可以通过nahao.name直接访问到对象的名字等等属性。如果我们希望有一个属性对外保密,就可以给对象定义私有属性:
function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
……

var privacy = privacyArg;

……

}

var nahao = new Person('Top css',male,1989,'www.javava.org','有10跟脚趾头');

alert(nahao.privacy); //对构造函数作出一定修改之后,我们给nahao对象添加了一个privacy属性,如果试图alert它的值的话将会显示undefined。

下面再来看看私有方法,如果我们对Person构造函数作出如下修改:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){

function insideOnly(){

alert('我只在对象内部可以调用!');

}

}//那么insideOnly将不能被外部所访问,如果试图执行这个函数将会出错。需要注意的是,私有方法并没有绑定到对象上,它的this关键字也并不指向对象。如果需要在私有方法内引用对象,那么可以使用如下方法:
function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
……

var myOwner = this;

function insideOnly(){

alert(myOwner.name);
}

}//首先在构造函数中定义一个myOwner变量,将this关键字赋给它,之后就可以在私有函数里使用这个变量来访问对象本身了。

8、 特权方法私有成员不能在对象的外部访问,不能访问的对象有什么用?我们可以使用特权方法来访问这些私有属性。所谓特权方法就是使用this关键字定义的函数,例如:

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){

this.showPrivacy = function(){

var str = '秘密:' + this.name + privacy + '!';

alert(str);

};

}

var nahao = new Person('Top css',male,1989,'www.javava.org','有10跟脚趾头');

nahao.showPrivacy();

我们首先给Person构造函数添加了一个showPrivacy特权方法,方法中使用了私有变量privacy的值。最后我们在nahao对象上调用该方法,结果如下:

9、 prototype浅析首先,我们要否定上面这句话“对Person.prototype的修改同样会影响到使用Person定义的对象。”请看如下代码:

Person.prototype = {

mark:'Person.Proto'

}

var nahao = new Person('Top css',male,1989,'www.javava.org');

Person.prototype = {

mark:'Person.NewProto'

}

alert(nahao.mark);

 

alert的输出会是什么呢?根据上面的经验,在alert之前,对Person.prototype的最后修改将它的mark属性赋值为'Person.NewProto'。但是实际的输出结果:Person.Proto

这不是bug,而且各个浏览器里都一样。原因分析如下:

Person.prototype = {

mark:'Person.Proto'

}

一段首先创建一个对象字面量,并且赋值给Person.prototype,我们称这个对象字面量为Proto。

var nahao = new Person('Top css',male,1989,'www.javava.org');

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 学习JavaScript之this,call,apply

    学习JavaScript之this,call,apply

    2016-01-28 20:45

  • 轻松学习JavaScript十五:JavaScript之BOM简介 - 连宏伟 - 博客频道 - CSDN.NET 连宏

    轻松学习JavaScript十五:JavaScript之BOM简介 - 连宏伟 - 博客频道

    2015-12-13 11:34

  • 一个非常实用的Javascript类库_javascript教程教程

    一个非常实用的Javascript类库_javascript教程教程

    2015-10-07 16:12

  • javascript类设计模式_javascript教程教程

    javascript类设计模式_javascript教程教程

    2015-10-04 11:14

网友点评