JavaScript 面向对象

学习和使用Js有一段时间了,当初找工作的时候就怕问到面向对象、原型链和原型继承类似的问题。最近,用总结了一下相关的知识,做个小笔记。

对象的定义

JavaScript中的对象和其他语言中的对象有所不同。ECMAScript-262把对象定义为:“无序属性的集合,其属性可以是包含基本值、对象或者函数。”严格来讲,这就是相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数。

创建对象

创建自定义对象最简单方式就是创建一个Object的实例,然后再为它添加属性和方法。

example:

var person = new Object();
person.name = "zhishiqu";
person.age = 27;
person.job = 'Software Engineer';

person.sayName = function(){
	alert(this.name)
}

上面的例子创建了一个名为person的对象,并为它添加了三个属性(name、age和job)和一个方法(sayName())。早期的JavaScript开发人员经常使用这种模式创建新对象。几年后,对象字面量成为创建这种对象的首选模式。

example:

var person = {
	name: 'zhishiqu',
	age: 27,
	job: 'Software Engineer',

	sayName: function(){
		alert(this.name)
	}
}

虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。未解决这个问题,人们开始使用工厂模式的一种变体。

工厂模式

工厂模式是软件领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程。考虑到在ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节。

example

function createPerson(name, age, job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	}
	return o;
}

var person1 = createPerson('zhishiqu', 27, 'Software Engineer');
var person2 = createPerson('zhitongnian', 28, 'Doctor');

函数createPerson()能够根据接受的参数类构建一个包含所有必要信息的Person对象。可以无数次地调用这个函数,而每次它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。随着JavaScript的发展,又一个新的模式出现了。

构造函数模式

ECMAScript中构造函数可用来创建特定类型的对象。像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。例如,可以使用构造函数模式将前面的例子重写。

example:

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = function(){
		alert(this.name);
	}
}

var person1 = new Person('zhishiqu', 27, 'Software Engineer');
var person2 = new Person('zhitongnian', 28, 'Doctor');

在这个例子中,Person()函数取代了createPerson()函数。我们注意到,Person()中的代码除了与createPerson()中相同的部分外,还存在以下不同之处:

1.没有显示地创建对象;

2.直接将属性和方法赋给了this对象;

3.没有return语句。

此外,还应注意到函数名Person使用的是大写字母P。按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。这个做法借鉴自其它OO(Object-Oriented)语言,主要是为了区别于ECMAScript中的其它函数;因为构造函数本身也是函数,只不过可以用来创建对象而已。

要创建对象Person的新实例,必须使用new操作符。以这种方式调用构造函数实际上会经历一下四个步骤:

1.创建一个新对象;

2.将构造函数的作用域赋给新对象(因此this就指向了这个新对象);

3.执行构造函数中的代码(为这个新对象添加属性);

4.返回新对象;

构造函数的问题

构造函数模式虽然好用,但是并非没有缺点。使用构造函数的主页问题,就是每个方法都要在每个实例上重新创建一遍。在前面的例子中。person1和person2都有一个名为sayName()的方法,但那两方法不是同一个Function的实例。不要忘了——ECMAScript中的函数是对象,因此每定义一个函数,也就实例化了一个对象。从逻辑角度讲,此时的构造函数也可以这样定义。

example:

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = new Function('alert(this.name)');//与声明函数在逻辑上是等价的
}

从这个角度上来看构造函数,更容易明白每个Person实例都包含一个不同的Function实例的本质。说明白些,以这种方式创建的函数,会导致不同的作用域链和标识符解析,但创建Function新实例的机制仍然是相同的。因此,不同实例上的同名函数是不相等的,以下代码可以证明这一点。

alert(person1.sayName == person2.sayName);  //false
然而,创建两个完成同样任务的Function实例的确没有必要;况且有this对象在,根本不用在执行代码前就把函数绑定到特定对象上面。因此,大可像下面这样,通过把函数定义转移到构造函数外部来解决这个问题。
function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = sayName;
}
function sayName(){
	alert(this.name);
}

var person1 = new Person('zhishiqu', 27, 'Software Engineer')
var person2 = new Person('zhitongnian', 28, 'Doctor');
alert(person1.sayName == person2.sayName);   //  true

在这个例子中,我们把sayName()函数的定义转移到了构造函数外部。而在构造函数内部,我们将sayName属性设置成等于全局的sayName函数。这样一来,由于sayName包含的是一个指向函数的指针,因此person1和person2对象就共享了在全局作用域中定义的同一个sayName()函数。这样做确实解决了两个函数做同一件事的问题。而更让人无法接受的是:如果对象需要定义很多方法,那么就要定义很多全局函数,于是我们这个定义的引用类型就丝毫没有封装性可言了。好在,这些问题可以通过使用原型模式来解决。

原型模式

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来解释,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,example:

function Person(){}

Person.prototype.name = 'zhishiqu';
Person.prototype.age = 27;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function(){
	alert(this.name)
}
var person1 = new Person();
person1.sayName(); //'zhishiqu'

var person2 = new Person();
person.sayName();
alert(person1.sayName == person2.sayName);  //true

在此,我们将sayName()方法和所有属性直接添加到了Person的prototype属性中,构造函数变成了空函数。即使如此,也仍然可以通过构造函数来创建新对象,而且新对象还会具有相同的属性和方法。但与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。换句话说,person1和person2访问的都是同一个属性和同一个sayName()函数。

理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认的情况下,所有原型对象都会自动获得一个constructor属性,这个属性是一个指向prototype属性所在函数的指针。就拿前面的例子来说,Person.prototype。consrtuctor指向Person。而通过这个构造函数,我们还可以继续为原型对象添加其他属性和方法。

创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版中管这个指针叫[[Prototype]]。虽然在脚本中没有标准的方式访问[[Prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__;而在其他现实中,这个属性对脚本则是完全不可见的。不过,要明确的真正重要的一点就是,这个连接存在与实例与构造函数的原型对象之间,而不是存在与实例与构造函数之间。(当为对象的实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性;)。

更简单的原型语法。example:

function Person(){};

Person.prototype = {
	name: 'zhishiqu',
	age: 27,
	job: 'Software Engineer',
	sayName: function(){
		alert(this.name)
	}
}

重写原型对象会切断现有原型与任何之前已经存在的对象实例之间的联系;它们引用的仍然是最初的原型。example:

function Person(){};
var friend = new Person();

Person.prototype = {
	constructor: Person,
	name: 'zhishiqu',
	age: 29,
	job: 'Software Engineer',
	sayName : function(){
		alert(this.name)
	}
}

friend.sayName();  //error

原型对象的问题

原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题,原型模式的最大问题是由其共享的本性所导致的。

原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去,毕竟,通过在实例上添加一个同名属性,可以以藏原型中的对应属性。然而,对于包含引用类型值的属性来说,问题就比较突出了。

example:

function Person(){};

Person.prototype = {
	constructor: Person,
	name: 'zhishiqu',
	age: 29,
	job: 'Software Engineer',
	friends: ['Shelby', 'Court'],
	sayName : function(){
		alert(this.name)
	}
};

var person1 = new Person();
var person2 = new Person();

person1.friends.push('Van');

alert(person1.friends);
alert(person2.friends);
alert(person1.friends == person2.friends);  //true

在此,Person.prototype对象有一个名为friends的属性,该属性包含一个字符串数组。然后,创建了Person的两个实例。接着,修改了person1.friends引用的数组,向数组中添加了一个字符串。由于friends数组存在于Person。prototype而非person1中,所以刚刚提到的修改也会通过person2.friends(与person1.friends指向同一个数组)反映出来。假如我们的初衷就是像这样在所有实例中共享一个数组,那么我无话可说。可是,实例一般都是要有属于自己的全部属性的。而这个问题正是我们很少看到有人单独使用原型模式的原因所在。

组合使用构造函数模式和原型模式

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。另外,这种混成模式还支持向构造函数传递参数;可谓是集两种模式之长。

example:

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.friends = ['Shelby', 'Court'];
}
Person.prototype = {
	constructor :Person,
	sayName : function(){
		alert(this.name);
	}
}
var person1 = new Person('zhishiqu', 27, 'Software Engineer')
var person2 = new Person('zhitongnian', 28, 'Doctor');
person1.friends.push('Van');
alert(person1.friends); //'Shelby,Count,Van'
alert(person2.friends); //'Shelby,Count'
alert(person1.friends == person2.friends);  //false
alert(person1.sayName == person2.sayName);  //true

在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的。而修改了person1.friends(向其中添加一个新字符串),并不会影响到person2.friends,因为它们分别引用了不同的数组。

这种构造函数与原型混成的模式,是目前在ECMAScript中使用最广泛,认同度最高的一种创建自定义类型的方法。可以说,这是用来定义引用类型的一种默认模式。

动态原型模式

有其他OO语言经验的开发人员在看到独立的构造函数和原型时,很可能会感到非常困惑。动态原型模式正是致力于解决这个问题的一个方案,它把所有的信息封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。换句话说,可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。example:

function Person(name, age, job){

	//属性
	this.name = name;
	this.age = age;
	this.job = job;

	if(typeof this.sayName != 'function'){
		Person.prototype.sayName = function(){
			alert(this.name);
		}
	}
}
var friend = new Person('Nicholas', 29, 'Software Engineer');
friend.sayName();
注意构造函数代码中加粗的部分。这里只在sayName()方法不存在的情况下,才会将它添加到原型中。这段代码只会在初次调用构造函数时才会执行。此后,原型已经完成初始化,不需要做什么修改了。不过要记住,这里对原型所做的修改,能够立即在所有实例中得到反映。因此,这种方法确实可以说是非常完美。其中,if语句检查的可以是初始化之后应该存在的任何属性或方法——不必用一大堆if语句检查每个属性和每个方法;只要检查其中一个即可。对于采用这种模式创建的对象,还可以使用instanceof操作符确定它的类型。

寄生构造函数模式

通常,在前述的几种模式都不适用的情况下,可以使用寄生(parasitic)构造函数模式。这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装对象的代码,然后再返回新创建的对象;但是从表面上看,这个函数又像是典型的构造函数。example:

function Person(name, age, job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name)
	}
	return o;
}
var friend = new Person('zhishiqu', 27, 'Software Engineer');
friend.sayName();  //'zhishiqu'

在这个例子中,Person函数创建了一个新对象,并以相应的属性和方法初始化该对象,然后又返回了这个对象。除了使用new操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数的末尾添加一个return语句,可以重写调用构造函数是返回的值。

这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数,因此可以使用这个模式。

example:

function SpecialArray(){
	//创建数组
	var values = new Array();

	//添加值
	values.push.apply(values, arguments);

	//添加方法
	values.toPipedString = function(){
		return this.join('|');
	}

	//返回数组
	return values;
}

var colors = new SpecialArray('red', 'blue', 'green');
alert(colors.toPipedString());  //'red|blue|green'

在这个例子中,我们创建了一个名叫SpecialArray的构造函数。在这个函数内部,首先创建了一个数组。然后push()方法(用构造函数接受到所有参数)初始化了数组的值。随后,又给数组实例添加了一个toPipedString()方法,该方法返回以竖线分隔的数组值。最后,将数组以函数值的形式返回。接着,我们调用了SpecialArray构造函数,向其中传入了用于初始化数组的值,此后有调用了toPipedString()方法。关于寄生构造函数模式,有一点需要说明:首先,返回的对象与构造函数或者与构造函数的原型属性之间没有关系;也就是说,构造函数返回的对象与构造函数外部创建的对象没有什么不同。为此,不能依赖instanceof操作符来确定对象类型。由于存在上述问题,我们建议在可以使用其他模式的情况下,不要使用这种模式。

稳妥构造函数模式

道格拉斯。克罗克福德(Douglas Crockford)发明了JavaScript中稳妥对象(durable objects)这个概念。所谓稳妥对象,指的是没有公共属性,而且其他方法也不引用this的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用this和new),或者在防止数据被其他应用程序(如Mashup程序)改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的实例方法不引用this;二是使用new操作符调用构造函数。按照稳妥构造函数的要求,可以将前面的Person构造函数重写如下。

function Person(name, age, job){

	//创建要返回的对象
	var o = new Object();

	//可以在这里定义私有变量和函数

	//添加方法
	o.sayName = function(){
		alert(name);
	}

	//返回对象
	return o;
}

注意,在以这种模式创建的对象中,除了使用sayName()方法以外,没有其他办法访问name的值,可以像下面使用稳妥的Person构造函数。

var friend = Person('zhishiqu', 27, 'Software Engineer');
friend.sayName();   //'zhishiqu'
这样,变量friend中保存的是一个稳妥对象,而除了调用sayName()方法外,没有别的方式可以访问其数据成员。即使有其他代码会给这个对象添加方法或数据成员,但也不可能有别的办法访问传入到构造函数中的原始数据。稳妥构造函数模式提供的这种安全性,使得它非常适合在某些安全执行环境下使用。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值