JavaScript 面向对象基础知识

虽然 JavaScript 本身是没有的概念,但它仍然有面向对象的特性,虽然和一般常见的面向对象语言有所差异。

简单的创建一个对象的方法如下:

function myObject() {

};

JavaScript 中创建对象的方法一般来说有两种:函数构造法和字面量法,上面这种属函数构造法。下面是一个字面量法的例子:

var myObject = {

};

如果仅仅需要一个对象,而不需要对象的其它实例的情况下,推荐用字面量法。如果需要对象的多个实例,则推荐函数构造法。

定义属性和方法

函数构造法:

function myObject() {
	this.iAm = 'an object';

	this.whatAmI = function() {
		console.log('I am ' + this.iAm);
	};
};

字面量法:

var myObject = {
	iAm : 'an object',

	whatAmI : function() {
		console.log('I am ' + this.iAm);
	}
};

以上两种方法创建的对象中,都有一个名为 “iAm” 的属性,还有一个名为 “whatAmI” 的方法。属性是对象中的变量,方法则是对象中的函数。

如何获取属性及调用方法:

var w = myObject.iAm;

myObject.whatAmI();

调用方法的时候后面一定要加上括号,如果不加括号,那么它只是返回方法的引用而已。

两种创建对象方法的区别

  • 函数构造法里面定义属性和方法的时候,都要用前缀 this,字面量法不需要。
  • 函数构造法给属性和方法赋值的时候用的是 =,字面量法用的是 :
  • 如果有多个属性或方法,函数构造法里面用 ; 隔开,字面量法用 , 隔开。

对于字面量法创建的对象,可以直接用对象的引用调用其属性或方法:

myObject.whatAmI();

而对于函数构造法而言,需要创建对象的实例,才能调用其属性或方法:

var myNewObject = new myObject();
myNewObject.whatAmI();

使用构造函数

现在再来回归一下之前的函数构造法:

function myObject() {
	this.iAm = 'an object';
	this.whatAmI = function() {
		console.log('I am ' + this.iAm);
	};
};

其实它看起来就是个函数,既然是函数,能不能给它传参数呢?将代码再稍作修改:

function myObject(what) {
	this.iAm = what;
	this.whatAmI = function(language) {
		console.log('I am ' + this.iAm + ' of the ' + language + ' language');
	};
};

再将对象实例化,并传入参数:

var myNewObject = new myObject('an object');
myNewObject.whatAmI('JavaScript');

程序最终输出 I am an object of the JavaScript language

两种创建对象的方法,我该用哪种?

对于字面量方法而言,因为它不需要实例化,所以如果修改了某对象的值,那么这个对象的值就永久地被修改了,其它任何地方再访问,都是修改后的值。而对于函数构造法而言,修改值的时候是修改其实例的值,它可以实例化 N 个对象出来,每个对象都可以拥有自己不同的值,而且互不干扰。比较以下几段代码。

先看字面量法:

var myObjectLiteral = {
	myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

myObjectLiteral.myProperty = 'this is a new property';

console.log(myObjectLiteral.myProperty);  // log 'this is a new property'

即便创建了一个新的变量指向这个对象,结果还是一样的:

var myObjectLiteral = {
	myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

var sameObject = myObjectLiteral;

myObjectLiteral.myProperty = 'this is a new property';

console.log(sameObject.myProperty); // log 'this is a new property'

再看函数构造法:

// 用函数构造法
var myObjectConstructor = function() {
    	this.myProperty = 'this is a property'
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
console.log(constructorOne.myProperty); // log 'this is a property'

// 输出
console.log(constructorTwo.myProperty); // log 'this is a property'

和预期一样,两个对象的属性值是一样的。如果修个其中一个对象的值呢?

// 用函数构造法
var myObjectConstructor = function() {
	this.myProperty = 'this is a property';
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 修改对象的属性
constructorOne.myProperty = 'this is a new property';

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
alert(constructorOne.myProperty); // log 'this is a new property'

// 输出
alert(constructorTwo.myProperty); // log 'this is a property'

可以看到,用函数构造法实例化出来的不同对象,相互是独立的,可以各自拥有不同的值。所以说,到底用哪种方法来创建对象,需取决于各自实际情况。

via http://net.tutsplus.com/tutorials/javascript-ajax/the-basics-of-object-oriented-javascript/

Posted on 2012-03-20

No Comments

Leave a Comment