作者:Topcss QQ:419074376 E-mail:andpai1.0@gmail.com Time:2008-11月
背景:接触JavaScript快两年了。从最开始对她充满着好奇,到现在的学习了许多关于她的框架。朋友问我:都有这么多框架,你为何还要去学最底层的面向对象呢?其实这个问题:另一个朋友已经替我回答了。无论以后框架在怎么变,只要了解底层的原理,学起来都是很容易上手的。好了,我们开始学习了。
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');
在创建nahao对象并且按照构造函数初始化对象的同时,会悄悄给nahao对象设置一个内部属性,我们暂且将其命名为xxx,并且将其赋值为Person.prototype的值,也就是上面提到的对象字面量Proto,JavaScript的动态继承也就是由这个xxx实现的。(这个JavaScript的内部实现机制不是我拍脑门想出来的,是Netscape的工作人员的一篇文章里提到的,下面也会用程序来证明这个流程。)然后,
Person.prototype
= {
mark:'Person.NewProto'
}
这里我们将创建另外一个对象字面量NewProto,并且赋值给Person.prototype。到这里就很明显了,尽管我们修改了
Person.prototype,但是并没有影响到nahao对象。当我们访问nahao.mark的时候,它首先在自己内部找,找不到就会去找xxx,自然就找到了Proto,而非NewProto。那么xxx这个实现动态继承的关键究竟是什么呢?在FireFox中它是__proto__,有以下代码为证。至于在IE中xxx是什么我还没找到。
Person.prototype
= {
mark:'Person.Proto'
}
var
nahao = new
Person('Topcss','male',1989,'www.nahao8.com');
nahao.prototype
= {
mark:'Person.NewProto'
}
alert(nahao.mark);
alert(nahao.__proto__.mark);//两次alert的结果都是一样的,都是Proto。
alert(nahao.__proto__===Person.prototype);//结构为true。
以上代码经过测试适用于FireFox和chrome。NetScape应该也可以,IE不行。
个人观点:Person.prototype =
{}的方式最好只在定义构造函数的时候使用一次,而且要紧跟着构造函数写,以后修改prototype的时候都使用Person.prototype.protertyA =
‘valueA’的形式。
10、
最后的构造函数我们在上面看到了定义对象,以及设这和修改其属性的各种方法,我们可以在构造函数中定义属性,可以在对象外部定义(静态)属性,也可以在对象的prototype中定义属性。下面是我使用的大致格式:
function
Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
//公有属性
this.name
= nameArg;
this.gender
= genderArg;
this.yearOfBirth =
yearOfBirthArg;
this.site
= siteArg;
//私有属性
var privacy
= privacyArg;
//特权方法
this.showPrivacy =
function(){
};
}
Person.prototype
= {
//公有方法
info : function(){
},
func:function(){
}
}
分享到:
相关推荐
JavaScript面向对象编程指南.pdf
JavaScript面向对象的支持,PPT精简版
作者: [日]井上诚一郎 / [日]土江拓郎 / [日]滨边将太 出版社: 人民邮电出版社
**基于原型:**JavaScript 使用原型继承,而不是传统的面向对象编程中的类继承。 **函数式编程:**JavaScript 支持函数式编程,包括高阶函数、闭包和箭头函数。 **事件驱动:**JavaScript 是一种事件驱动的语言,...
利用面向对象的方法,实现贪吃蛇。 1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。 2. 在使用××.prototype= {}重写原型对象的时候,一定要加上一句constructor:该对象。不然会造成...
JavaScript实现简易轮播图最全代码解析(ES6面向对象) 本文实例为大家分享了JavaScript实现简易轮播图的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html> <head> ...
利用JavaScript输出各种各样的星号图案,本代码举例手动输入行数,利用循环输出菱形
lluvia Project:: A Javascript community framework Copyright (C) <2009> This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as ...
题目: 代码如下: try{ var me = Man({ fullname: “小红” }); var she = new Man({ fullname: “小红” }); console.group(); console.info(“我的名字是:” + me.attr(“fullname”) + “\n我的性别是:” + me....
这里指的面向对象不单单适用于javascript,也适用其他语言。 万物皆对象,所以,任何事物都是有特征(属性)和动作(方法)的,一般拿到一份需求分档,或者你浏览一个网页看到一个画面的时候,脑子里就要有提炼出来的...
面向对象 OOjs 是一个用于处理对象的 JavaScript 库。 主要功能包括继承、mixin 和用于处理对象的实用程序。 /* Example */ ( function ( oo ) { function Animal ( ) { } function Magic ( ) { } function ...
JavaScript极速狂飙:组合拼接字符串的效率 JavaScript极速狂飙:CSS样式表的背景渲染效率 JavaScript面向对象的支持--(1) JavaScript面向对象的支持--(2) JavaScript面向对象的支持--(3) JavaScript...
我们看到这里继承的概念是多么的直白,“拷贝一个类的prototype 到另外一个类”,好,Code is cheap,看代码: function class1() { } function class2() { } class2.prototype = class1.prototype;...
虽然从技术上讲,javascript是一门面向对象的语言,但是javascript没有类的概念,一切都是对象。任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建;引用类型可以是原生的,也可以是自定义的。 1、...
****JavaScript入门经典(第4版 英文版+第3版中文版 附JavaScript参考手册)****《JavaScript入门经典(第4版)》主要内容:·循序渐进介绍JavaScript基础知识,包括JavaScript的含义、原理和功能·介绍用于创建...
比如 python 中函数和变量也都是对象, Javascript 中有很多的伪对象,Java 则是完全的面向对象,而 Java 和 PHP 等语言都只能使用单继承,而 C++则使用令人头疼的多继承、 虚函数、友元等等一些复杂的概念,导致了...
####一个简单的、基本的面向对象的javascript框架 ####扩展对象 /* * Inherit from classes with the extend method. * Call the constructor of the base class with this._super(args...) */ // orienteer is ...
Date对象有个getDay方法,它根据本地时间,返回一个具体日期中一周的第几天。返回值从0~6,分别对应周日~周六 getDay 0 1 2 3 4 5 6 星期几 周日 周一 周二 周三 周四 周五 周六 用到日期相关的需求时...
面向对象 OOjs是一个用于处理对象JavaScript库。 关键功能包括继承,mixin和用于处理对象的实用程序。 /* Example */ function Animal ( ) { } function Magic ( ) { } function Unicorn ( ) { Animal . call ( ...
/*****JavaScript URL字符串的提取**********************/ var urlstr = window.location.href; urlstr = urlstr.substr(urlstr.indexOf("=")+1,urlstr.length); var SalaryReocrd = urlstr.substr(0,urlstr.index...