Javascript高手心得(中)



编程世界里只存在两种基本元素,一个是数据,一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。

JavaScript高手心得7GT思考者日记网-束洋洋个人博客

对象素描

已经说了许多了许多话题了,但有一个很基本的问题我们忘了讨论,那就是:怎样建立对象? 在前面的示例中,我们已经涉及到了对象的建立了。我们使用了一种被称为JavaScript Object Notation(缩写JSON)的形式,翻译为中文就是“JavaScript对象表示法”。7GT思考者日记网-束洋洋个人博客

JSON为创建对象提供了非常简单的方法。例如,创建一个没有任何属性的对象:7GT思考者日记网-束洋洋个人博客

var o = {};7GT思考者日记网-束洋洋个人博客

创建一个对象并设置属性及初始值:7GT思考者日记网-束洋洋个人博客

var person = {name: "Angel", age: 18, married: false};7GT思考者日记网-束洋洋个人博客

创建一个对象并设置属性和方法:7GT思考者日记网-束洋洋个人博客

var speaker = {text: "Hello World", say: function(){alert(this.text)}};7GT思考者日记网-束洋洋个人博客

创建一个更复杂的对象,嵌套其他对象和对象数组等:7GT思考者日记网-束洋洋个人博客

var company =
{
	name: "Microsoft",
	product: "softwares",
	chairman: {name: "Bill Gates", age: 53, Married: true},
	employees: [{name: "Angel", age: 26, Married: false}, {name: "Hanson", age: 32, Marred: true}],
	readme: function() {document.write(this.name + " product " + this.product);}
};

JSON的形式就是用大括“{}”号包括起来的项目列表,每一个项目间并用逗号“,”分隔,而项目就是用冒号“:”分隔的属性名和属性值。这是典型的字典表示形式,也再次表明了 JavaScript里的对象就是字典结构。不管多么复杂的对象,都可以被一句JSON代码来创建并赋值。 其实,JSON就是JavaScript对象最好的序列化形式,它比XML更简洁也更省空间。对象可以作为一个JSON形式的字符串,在网络间自由传递和交换信息。而当需要将这个JSON字符串变成一个JavaScript对象时,只需要使用eval函数这个强大的数码转换引擎,就立即能得到一个JavaScript内存对象。正是由于JSON的这种简单朴素的天生丽质,才使得她在AJAX舞台上成为璀璨夺目的明星。7GT思考者日记网-束洋洋个人博客

JavaScript就是这样,把面向对象那些看似复杂的东西,用及其简洁的形式表达出来。卸下对象浮华的浓妆,还对象一个眉目清晰!7GT思考者日记网-束洋洋个人博客

好了,接下我们来讨论一下对象的另一种创建方法。 除JSON外,在JavaScript中我们可以使用new操作符结合一个函数的形式来创建对象。例如:7GT思考者日记网-束洋洋个人博客

function MyFunc() {};         //定义一个空函数
var anObj = new MyFunc();  //使用new操作符,借助MyFun函数,就创建了一个对象

JavaScript的这种创建对象的方式可真有意思,如何去理解这种写法呢?其实,可以把上面的代码改写成这种等价形式:7GT思考者日记网-束洋洋个人博客

function MyFunc(){};
var anObj = {};     //创建一个对象
MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数

我们就可以这样理解,JavaScript先用new操作符创建了一个对象,紧接着就将这个对象作为this参数调用了后面的函数。其实,JavaScript内部就是这么做的,而且任何函数都可以被这样调用!但从 “anObj = new MyFunc()” 这种形式,我们又看到一个熟悉的身影,C++和C#不就是这样创建对象的吗?原来,条条大路通灵山,殊途同归啊!7GT思考者日记网-束洋洋个人博客

君看到此处也许会想,我们为什么不可以把这个MyFunc当作构造函数呢?恭喜你,答对了!JavaScript也是这么想的!请看下面的代码:7GT思考者日记网-束洋洋个人博客

1     function Person(name)   //带参数的构造函数
2     {
3         this.name = name;   //将参数值赋给给this对象的属性
4         this.SayHello = function() {alert("Hello, I'm " + this.name);};   //给this对象定义一个SayHello方法。
5     };
6 
7     function Employee(name, salary)     //子构造函数
8     {
9         Person.call(this, name);        //将this传给父构造函数
10         this.salary = salary;       //设置一个this的salary属性
11         this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);};  //添加ShowMeTheMoney方法。
12     };
13     
14     var BillGates = new Person("Bill Gates");   //用Person构造函数创建BillGates对象
15     var SteveJobs = new Employee("Steve Jobs", 1234);   //用Empolyee构造函数创建SteveJobs对象
16 
17     BillGates.SayHello();   //显示:I'm Bill Gates
18     SteveJobs.SayHello();   //显示:I'm Steve Jobs
19     SteveJobs.ShowMeTheMoney();   //显示:Steve Jobs $1234
20 
21     alert(BillGates.constructor == Person);  //显示:true
22     alert(SteveJobs.constructor == Employee);  //显示:true
23     
24     alert(BillGates.SayHello == SteveJobs.SayHello); //显示:false

这段代码表明,函数不但可以当作构造函数,而且还可以带参数,还可以为对象添加成员和方法。其中的第9行,Employee构造函数又将自己接收的this作为参数调用Person构造函数,这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思:BillGates是由Person构造的,而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数!7GT思考者日记网-束洋洋个人博客

其实,如果你愿意把函数当作“类”的话,她就是“类”,因为她本来就有“类”的那些特征。难道不是吗?她生出的儿子各个都有相同的特征,而且构造函数也与类同名嘛!7GT思考者日记网-束洋洋个人博客

但要注意的是,用构造函数操作this对象创建出来的每一个对象,不但具有各自的成员数据,而且还具有各自的方法数据。换句话说,方法的代码体(体现函数逻辑的数据)在每一个对象中都存在一个副本。尽管每一个代码副本的逻辑是相同的,但对象们确实是各自保存了一份代码体。上例中的最后一句说明了这一实事,这也解释了JavaScript中的函数就是对象的概念。7GT思考者日记网-束洋洋个人博客

同一类的对象各自有一份方法代码显然是一种浪费。在传统的对象语言中,方法函数并不象JavaScript那样是个对象概念。即使也有象函数指针、方法指针或委托那样的变化形式,但其实质也是对同一份代码的引用。一般的对象语言很难遇到这种情况。7GT思考者日记网-束洋洋个人博客

不过,JavaScript语言有大的灵活性。我们可以先定义一份唯一的方法函数体,并在构造this对象时使用这唯一的函数对象作为其方法,就能共享方法逻辑。例如:7GT思考者日记网-束洋洋个人博客

function SayHello()     //先定义一份SayHello函数代码
{
	alert("Hello, I'm " + this.name);
};

function Person(name)   //带参数的构造函数
{
	this.name = name;   //将参数值赋给给this对象的属性
	this.SayHello = SayHello;   //给this对象SayHello方法赋值为前面那份SayHello代码。
};

var BillGates = new Person("Bill Gates");   //创建BillGates对象
var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

alert(BillGates.SayHello == SteveJobs.SayHello); //显示:true

其中,最后一行的输出结果表明两个对象确实共享了一个函数对象。虽然,这段程序达到了共享了一份方法代码的目的,但却不怎么优雅。因为,定义SayHello方法时反映不出其与Person类的关系。“优雅”这个词用来形容代码,也不知道是谁先提出来的。不过,这个词反映了程序员已经从追求代码的正确、高效、可靠和易读等基础上,向着追求代码的美观感觉和艺术境界的层次发展,程序人生又多了些浪漫色彩。显然,JavaScript早想到了这一问题,她的设计者们为此提供了一个有趣的prototype概念。7GT思考者日记网-束洋洋个人博客

初看原型

prototype源自法语,软件界的标准翻译为“原型”,代表事物的初始形态,也含有模型和样板的意义。JavaScript中的prototype概念恰如其分地反映了这个词的内含,我们不能将其理解为C++的prototype那种预先声明的概念。7GT思考者日记网-束洋洋个人博客

JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”,那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以这么说,prototype提供了一群同类对象共享属性和方法的机制。7GT思考者日记网-束洋洋个人博客

我们先来看看下面的代码:7GT思考者日记网-束洋洋个人博客

function Person(name)
{
	this.name = name;   //设置对象属性,每个对象各自一份属性数据
};

Person.prototype.SayHello = function()  //给Person函数的prototype添加SayHello方法。
{
	alert("Hello, I'm " + this.name);
}

var BillGates = new Person("Bill Gates");   //创建BillGates对象
var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法
SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法

alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello,所以显示:true

程序运行的结果表明,构造函数的prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的。显然,把方法设置到prototype的写法显得优雅多了,尽管调用形式没有变,但逻辑上却体现了方法与类的关系,相对前面的写法,更容易理解和组织代码。7GT思考者日记网-束洋洋个人博客

那么,对于多层次类型的构造函数情况又如何呢?7GT思考者日记网-束洋洋个人博客

我们再来看下面的代码:7GT思考者日记网-束洋洋个人博客

1     function Person(name)   //基类构造函数
2     {
3         this.name = name;
4     };
5     
6     Person.prototype.SayHello = function()  //给基类构造函数的prototype添加方法
7     {
8         alert("Hello, I'm " + this.name);
9     };
10     
11     function Employee(name, salary) //子类构造函数
12     {
13         Person.call(this, name);    //调用基类构造函数
14         this.salary = salary;
15     };
16     
17     Employee.prototype = new Person();  //建一个基类的对象作为子类原型的原型,这里很有意思
18     
19     Employee.prototype.ShowMeTheMoney = function()  //给子类添构造函数的prototype添加方法
20     {
21         alert(this.name + " $" + this.salary);
22     };
23 
24     var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象
25     var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类Employee的SteveJobs对象
26 
27     BillGates.SayHello();       //通过对象直接调用到prototype的方法
28     SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法,关注!
29     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法
30 
31     alert(BillGates.SayHello == SteveJobs.SayHello); //显示:true,表明prototype的方法是共享的

这段代码的第17行,构造了一个基类的对象,并将其设为子类构造函数的prototype,这是很有意思的。这样做的目的就是为了第28行,通过子类对象也可以直接调用基类prototype的方法。为什么可以这样呢?7GT思考者日记网-束洋洋个人博客

原来,在JavaScript中,prototype不但能让对象共享自己财富,而且prototype还有寻根问祖的天性,从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时,如果该对象自身不存在这样的属性或方法,就会去自己关联的prototype对象那里寻找;如果prototype没有,又会去prototype自己关联的前辈prototype那里寻找,直到找到或追溯过程结束为止。7GT思考者日记网-束洋洋个人博客

在JavaScript内部,对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时,也会同时将构造函数的prototype对象指派给新创建的对象,成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的,尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象,但并不建议这样做。内置的原型对象本身也是对象,也有自己关联的原型对象,这样就形成了所谓的原型链。7GT思考者日记网-束洋洋个人博客

在原型链的最末端,就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先,这个老祖宗实现了诸如toString等所有对象天生就该具有的方法。其他内置构造函数,如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的,但他们各自又定义了自身的属性和方法,从而他们的子孙就表现出各自宗族的那些特征。7GT思考者日记网-束洋洋个人博客

这不就是“继承”吗?是的,这就是“继承”,是JavaScript特有的“原型继承”。7GT思考者日记网-束洋洋个人博客

“原型继承”是慈祥而又严厉的。原形对象将自己的属性和方法无私地贡献给孩子们使用,也并不强迫孩子们必须遵从,允许一些顽皮孩子按自己的兴趣和爱好独立行事。从这点上看,原型对象是一位慈祥的母亲。然而,任何一个孩子虽然可以我行我素,但却不能动原型对象既有的财产,因为那可能会影响到其他孩子的利益。从这一点上看,原型对象又象一位严厉的父亲。我们来看看下面的代码就可以理解这个意思了:7GT思考者日记网-束洋洋个人博客

function Person(name)
{
	this.name = name;
};

Person.prototype.company = "Microsoft"; //原型的属性

Person.prototype.SayHello = function()  //原型的方法
{
	alert("Hello, I'm " + this.name + " of " + this.company);
};

var BillGates = new Person("Bill Gates");
BillGates.SayHello();   //由于继承了原型的东西,规规矩矩输出:Hello, I'm Bill Gates

var SteveJobs = new Person("Steve Jobs");
SteveJobs.company = "Apple";    //设置自己的company属性,掩盖了原型的company属性
SteveJobs.SayHello = function() //实现了自己的SayHello方法,掩盖了原型的SayHello方法
{
	alert("Hi, " + this.name + " like " + this.company + ", ha ha ha ");
};

SteveJobs.SayHello();   //都是自己覆盖的属性和方法,输出:Hi, Steve Jobs like Apple, ha ha ha 

BillGates.SayHello();   //SteveJobs的覆盖没有影响原型对象,BillGates还是按老样子输出

对象可以掩盖原型对象的那些属性和方法,一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖其实只是在对象自己身上创建了新的属性和方法,只不过这些属性和方法与原型对象的那些同名而已。JavaScript就是用这简单的掩盖机制实现了对象的“多态”性,与静态对象语言的虚函数和重载(override)概念不谋而合。7GT思考者日记网-束洋洋个人博客

然而,比静态对象语言更神奇的是,我们可以随时给原型对象动态添加新的属性和方法,从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。我们来看下面的代码:7GT思考者日记网-束洋洋个人博客

function Person(name)
{
	this.name = name;
};

Person.prototype.SayHello = function()  //建立对象前定义的方法
{
	alert("Hello, I'm " + this.name);
};

var BillGates = new Person("Bill Gates");   //建立对象

BillGates.SayHello();

Person.prototype.Retire = function()    //建立对象后再动态扩展原型的方法
{
	alert("Poor " + this.name + ", bye bye!");
};

BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用

阿弥佗佛,原型继承竟然可以玩出有这样的法术!7GT思考者日记网-束洋洋个人博客

原型扩展

想必君的悟性极高,可能你会这样想:如果在JavaScript内置的那些如Object和Function等函数的prototype上添加些新的方法和属性,是不是就能扩展JavaScript的功能呢?7GT思考者日记网-束洋洋个人博客

那么,恭喜你,你得到了!7GT思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  •  感谢主机屋提供网站空间;
  •  感谢万网阿里云提供域名解析;
  •  感谢EmpireCMS提供CMS系统;
  •  感谢bootstrap展示本站前端页面;
  •  感谢Glyphicons Halflings提供字体;
  •  感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈

 

网友评论
我也来说两句