Главная

Object.defineProperty или как сделать код капельку лучше

2012-08-31 в 0:38, admin, рубрики: javascript

Этот краткий пост-заметку ~~или температурный бред (в Одессе похолодало, да)~~ хочу посвятить такой прекрасной функции, как Object.defineProperty (и Object.defineProperties). Активно использую её уже около двух месяцев, так как поддержка старых браузеров (в том числе и IE8) в проекте, который я сейчас реализовываю, не требуется (завидуйте).

Как положено статье на хабре, приведу краткое описание того, что она делает. Object.defineProperty принимает три аргумента:

Объект, который мы модифицируем, добавляя новое свойство
Свойство (строка), которое, собственно, хотим добавить
Дескриптор: объект, содержащий «настройки» нового свойства, например аццессоры (геттер, сеттер)

Дескриптор может содержать следующие свойства:

value (любое значение: строка, функция...) — значение, которое получит определяемое свойство объекта (геттер и сеттер в данном случае определить нельзя)
writable (true/false) — можно ли перезаписать значение свойства (аццессоры тоже не доступны)
get (функция) — геттер (value и writable определить нельзя)
set (функция) — сеттер (value и writable определить нельзя)
configurable (true/false) — можно ли переопределить дескриптор (использовать Object.defineProperty над тем же свойством)
enumerable (true/false) — будет ли свойство перечисляться через for..in и доступно в Object.keys (плохая формулировка)

Пример

Содержимое

// Код сперт с MDN
var o = {};
Object.defineProperty(o, "a", {value : 37,
                               writable : true,
                               enumerable : true,
                               configurable : true});

 
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
                               set : function(newValue){ bValue = newValue; },
                               enumerable : true,
                               configurable : true});

Лучше меня объяснит MDN Object/defineProperty. Благо, даже английский знать не надо, и так всё понятно.

Если нужно определить сразу несколько свойств, можно использовать Object.defineProperties, который принимает два аргумента: объект, требующий изменений и объект с определяемыми ключами.
MDN: Object/defineProperties.

Пример

Содержимое

// Код сперт с MDN
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  }
  // etc. etc.
});

Теперь соль. Чего я вообще решил это запостить?

Так как в упомянутом выше проекте мне приходится использовать defineProperty не просто активно, а очень активно, код стал, мягко говоря, некрасивым. Пришла в голову простейшая идея (как я до этого раньше-то не додумался?), расширить прототип Object, сделав код сильно компактнее. Плохой тон, скажете вы, засерать прототип Object новыми методами.

Откуда вообще взялось это мнение? Потому что все объекты унаследуют это свойство, которое, при обычной модификации прототипа, становится перечисляемым в for..in. На душе становится тепло, когда вспоминаешь о том, что я описал выше, а именно, о свойстве дескриптора enumerable. Действительно, расширив прототип таким образом:

Object.defineProperty( Object.prototype, 'logOk' {
	value: function() { console.log('ok') },
	enumerable: false
});

все объекты получат этот метод, но, при этом, он будет неперечисляемым (не нужно каждый раз использовать hasOwnProperty для проверки, есть ли такое свойство):

var o = {a: 1, b: 2}
for( var i in o ) console.log( i, o[ i ] );
> a 1
> b 2
o.logOk();
> ok

Собственно то, ради чего я тут графоманю.

Во-первых определим метод define, чтоб каждый раз не вызывать перегруженную, на мой взгляд, конструкцию. Во-вторых определим метод extendNotEnum, который расширяет объект неперечисляемыми свойствами.

Object.defineProperties( Object.prototype, {
	define: {
		value: function( key, descriptor ) {
			if( descriptor ) {
				Object.defineProperty( this, key, descriptor );
			} else {
				Object.defineProperties( this, key );
			},
			return this;
		},
		enumerable: false
	},
	extendNotEnum: {
		value: function( key, property ) {
			if( property ) {
				this.define( key, {
					value: property,
					enumerable: false,
					configurable: true
				});
			} else {
				for( var prop in key ) if( key.hasOwnProperty( key ) ){
					this.extendNotEnum( prop, key[ prop ] );
				}
			}
		},
		enumerable: false
	}
});

Использование:

var o = { a: 1 };
o.define( 'randomInt', {
	get: function() {
		return 42;
	}
});

o.extendNotEnum({
	b: 2;
});

for( var i in o ) console.log( i, o[ i ] );
> a 1
> randomInt 42

console.log( o.b );
> 2

И пошла… Еще три удобных метода:

Object.prototype.extendNotEnum({
	extend: function() {
		var args = Array.prototype.slice.call( arguments );
		args.unshift( this );
		return $.extend.apply( null, args ); // если jQuery надоест, можно просто переписать под себя
	},
	
	each: function( callback ) {
		return $.each( this, callback ); // аналогично
	},
	
	inherit: function( Parent /* ...args */ ) {
		var args = Array.prototype.slice.call( arguments, 1 );
		this.constructor.prototype = Parent.apply( Object.create( Parent.prototype ), args );
		Parent.apply( this, args );
	}
});

o.extend({c: 3}); // тупо добавляет новые свойства в объект
o.each(function( key, value ) {
	// просто повторяет механизм $.each, перебирая все ключи и свойства
});

Простейший механизм наследования:

var Parent = function( a, b ) {
	this.a = a;
	this.b = b;
};

Parent.prototype.extendNotEnum({  // соль
	m1: function() {
		// ...
	},
	m2: function() {
		// ...
	}
});

var Child = function( a, c ) {
	this.inherit( Parent, a, 42 ); // соль
	this.c = c;
};

Child.prototype.extendNotEnum({  // соль
	m2: function() {
		Parent.m2.call( this );
		// ...
	},
	m3: function() {
		// ...
	}
});

Тут, наверно, нечего добавить. Статей об ООП в Javascript на Хабре очень много.