Javascript OOP Basics

1. Two Simplest Way to Create Object

(1) The One Way

1	var person = new Object();  <!-- or var person = {}; -->
2	person.name = 'Cent Wen';
3	person.age = 28;
4	person.email = 'fightingbull@163.com';
5	person.show = function(){
6	document.writeln('Name: ' +this.name+'<br>'+
7	'Age: ' + this.age+'<br>'+
8	'Email: '+this.email+'<br>');
9	};
10

(2) The Other Way (identical to The One Way)

1	var person = {
2	name:'Cent Wen',
3	age: 28,
4	email: 'fightingbull@163.com',
5	show: function(){
6	document.writeln('Name: ' +this.name+'<br>'+
7	'Age: ' + this.age+'<br>'+
8	'Email: '+this.email+'<br>');
9	}
10	};
11

2. Data Properties

• [configurable], Indicates if the property may be redefined by removing the property via delete, changing the property's attributes, or changing the property into an accessor property. By default, this is true for all properties defined directly on an object, as in the previous example.

For previous person object:

1	delete person.name;
2	document.write(person.name);  //undefined

• [enumerable], Indicates if the property will be returned in a for-in loop. By default, this is true for all properties defined directly on an object, as in the previous example.

For previous person object:

1	for(var key in person){
2	document.write(key+': '+ person[key]+'<br>');
3	}
4	The output:
5	name: Cent Wen
6	age: 28
7	email: fightingbull@163.com
8	show: function () { document.writeln('Name: ' +this.name+'
9	'+ 'Age: ' + this.age+'
10	'+ 'Email: '+this.email+'
11	'); }
12

• [writable], Indicates if the property's value can be changed. By default, this is true for all properties defined directly on an object, as in the previous example.
• [value], Contains the actual data value for the property. This is the location from which the property's value is read and the location to which new values are saved. The default value for this attribute is undefined.

For the previous person object, the properties called name, age and email are created with [configurable], [enumerable], [writable] all set to true while the [value] is set to the respectively assigned value. To change the default properties, you must use the ECMAScript 5 Object.defineProperty() method. Note that when you are using Object.defineProperty(), the values for [configurable], [enumerable] and [writable] default to false unless otherwise specified.

1	var person = {};
2	Object.defineProperty(person,'name',{
3	configurable:false,
4	writable:false,
5	enumerable:false,
6	value:'Cent Wen'
7	});
8
9	alert(person.name); <!-- Cent Wen -->
10	person.name = 'Someone else';
11	delete person.name;
12	alert(person.name); <!-- Cent Wen, can't be configurable, writable-->
13

3. Accessor Properties

• [configurable], Indicates if the property may be redefined by removing the property via delete, changing the property's attributes, or changing the property into a data property. By default, this is true for all properties defined directly on an object.
• [enumerable], Indicates if the property will be returned in a for-in loop. By default, this is true for all properties defined directly on an object.
• [get], The function to call when the property is read from. The default value is undefined.
• [set], The function to call when the property is written to. The default value is undefined.

1	var person = {
2	_name:'Cent Wen',
3	};
4	Object.defineProperty(person,'name',{
5	get:function(){ return this._name;},
6	set:function(newValue){this._name = newValue;}
7	});
8
9	person.name = 'Someone';
10	alert(person.name); <!-- Someone -->

4. Defining Multiple Properties

Since there's a high likelihood that you'll need to define more than one property on an object, ECMAScript 5 provides the Object.defineProperties() method.

1	var person = {};
2	Object.defineProperties(person,{
3	_name:{value:'Cent Wen'},
4	age:{value:28},
5	name:{
6	get:function(){return this._name;},
7	set:function(newValue){this._name = newValue;}
8	}
9	});

5. Reading Property Attributes

It’s also possible to retrieve the property descriptor for a given property by using the ECMAScript 5 Object.getOwnPropertyDescriptor() method.

For person object in Section 4:

1	var descriptor = Object.getOwnPropertyDescriptor(person,'_name');
2	alert(descriptor.value);  //Cent Wen
3	alert(descriptor.configurable);  //false
4	alert(typeof descriptor.get);  //undefined
5
6	descriptor = Object.getOwnPropertyDescriptor(person,'name');
7	alert(descriptor.value);  //undefined
8	alert(descriptor.configurable);  //false
9	alert(typeof descriptor.get);  //function

 

PS: 如果您喜欢我的博文，请访问我的另一博客网站：Cent Wen’s Blog