Як визначити сеттер / геттер на прототипі

Question 1

EDIT Жовтень 2016 : Зверніть увагу, що це питання було задано у 2012 році. Щомісяця хтось додає нову відповідь або коментар, який спростовує відповідь, але насправді не має сенсу робити це, оскільки питання, ймовірно, застаріло (пам’ятайте, це було для Gnome Javascript для написання розширень гном-оболонка, а НЕ браузер матеріалу, який є вельми специфічний).

Після мого попереднього запитання про те, як зробити підклас у Javascript, я роблю підклас суперкласу таким чином:

function inherits(Child,Parent) {
    var Tmp = function {};
    Tmp.prototype = Parent.prototype;
    Child.prototype = new Tmp();
    Child.prototype.constructor = Child;
}
/* Define subclass */
function Subclass() {
    Superclass.apply(this,arguments);
    /* other initialisation */
}
/* Set up inheritance */
inherits(Subclass,Superclass);
/* Add other methods */
Subclass.prototype.method1 = function ... // and so on.

Моє питання: як мені визначити сеттер / геттер на прототипі за допомогою цього синтаксису?

Раніше я робив:

Subclass.prototype = {
    __proto__: Superclass.prototype,
    /* other methods here ... */

    get myProperty() {
        // code.
    }
}

Але очевидно, що наступне не буде працювати:

Subclass.prototype.get myProperty() { /* code */ }

Я використовую GJS (GNOME Javascript), і двигун повинен бути більш-менш таким, як у Mozilla Spidermonkey. Мій код не призначений для браузера, тому, поки він підтримується GJS (мабуть, це означає Spidermonkey?), Я не проти, якщо він не сумісний.

Question 2

Використання об’єктного буквального оголошення (найпростіший спосіб):

var o = {
    a: 7,
    get b() {
        return this.a + 1;
    },
    set c(x) {
        this.a = x / 2
    }
};

Використання Object.defineProperty(у сучасних браузерах, що підтримують ES5):

Object.defineProperty(o, "myProperty", {
    get: function myProperty() {
        // code
    }
});

Або використовуючи __defineGetter__та __defineSetter__( ЗАСТОСОВАНО ):

var d = Date.prototype;
d.__defineGetter__("year", function() { return this.getFullYear(); });
d.__defineSetter__("year", function(y) { this.setFullYear(y); });

Question 3

Використовуйте Object.defineProperty()на Subclass.prototype. Є __defineGetter__ і __defineSetter__доступні в деяких браузерах, але вони застаріли. Для вашого прикладу це буде:

Object.defineProperty(Subclass.prototype, "myProperty", {
    get: function myProperty() {
        // code
    }
});

Question 4

Я думаю, ви хотіли зробити так:

function Unit() {
   	this._data; // just temp value
}
Unit.prototype = {
 	get accreation() {
   		return this._data;
   	},
   	set accreation(value) {
   		this._data = value
   	},
}
Unit.prototype.edit = function(data) {
   	this.accreation = data; // setting
   	this.out();
};

Unit.prototype.out = function() {
    alert(this.accreation); // getting
};

var unit = new Unit();
unit.edit('setting and getting');

function Field() {
    // children
}

Field.prototype = Object.create(Unit.prototype);

Field.prototype.add = function(data) {
  this.accreation = data; // setting
   	this.out();
}

var field1 = new Field();
field1.add('new value for getter&setter');

var field2 = new Field();
field2.out();// because field2 object has no setting

Розгорніть фрагмент

Question 5

Щоб визначити сеттери та геттери "всередині прототипу об'єкта", потрібно зробити щось подібне:

Object.defineProperties(obj.__proto__, {"property_name": {get: getfn, set: setfn}})

Ви можете скоротити це за допомогою функції утиліти:

//creates get/set properties inside an object's proto
function prop (propname, getfn, setfn) {
    var obj = {};
    obj[propname] = { get: getfn, set: setfn };
    Object.defineProperties(this, obj);        
}

function Product () {
     this.name =  "Product";
     this.amount =  10;
     this.price =  1;
     this.discount =  0;
}

//how to use prop function
prop.apply(Product.prototype, ["total", function(){ return this.amount * this.price}]);

pr = new Product();
console.log(pr.total);

Тут ми використовуємо prop.apply для встановлення контексту Product.prototype як "це", коли ми його називаємо.

За допомогою цього коду ви закінчуєте властивістю get / set усередині прототипу об’єкта, а не екземпляром, як задано питання.

(Перевірено Firefox 42, Chrome 45)

Question 6

Вкажіть геттер або сеттер у конструкторах методом Object.defineProperty (). Цей метод приймає три аргументи: перший аргумент - це об’єкт, до якого слід додати властивість, другий - ім’я властивості, третій - дескриптор властивості. Наприклад, ми можемо визначити конструктор для нашого об'єкта person таким чином:

var Employee = (function() {
    function EmployeeConstructor() {
        this.first = "";
        this.last = "";
        Object.defineProperty(
            this,
            "fullName", {
                get: function() {
                    return this.first + " " +
                        this.last;
                },
                set: function(value) {
                    var parts = value.toString().split(" ");
                    this.name = parts[0] || "";
                    this.last = parts[1] || "";
                }
            });
    }
    return
    EmployeeConstructor;
}());

Використання Object.defineProperty () дає більше контролю над нашим визначенням властивостей. Наприклад, ми можемо вказати, чи властивість, яку ми описуємо, може бути динамічно видалена або перевизначена, чи можна змінити її значення тощо.

Ми можемо застосувати такі обмеження, встановивши такі властивості об’єкта дескриптора:

доступний для запису: це логічне значення, яке говорить про те, чи можна змінювати значення властивості; значення за замовчуванням - false
конфігурується: це логічна формула, яка говорить про те, чи можна змінити дескриптор властивості або видалити саму властивість; значення за замовчуванням - false
enumerable: Це логічне значення, яке вказує, чи можна отримати доступ до властивості в циклі над властивостями об'єкта; значення за замовчуванням - false
значення: Це представляє вартість, пов’язану з властивістю; значення за замовчуванням не визначено

Question 7

Ось простий приклад Animal → Dogуспадкування з Animalнаявністю геттера та сеттера :

//////////////////////////////////////////
// General Animal constructor
function Animal({age, name}) {
  // if-statements prevent triggering the setter on initialization
  if(name) this.name = name
  if(age) this.age = age
}

// an alias "age" must be used, so the setter & getter can use an
// alternative variable, to avoid using "this.age", which will cause
// a stack overflow of "infinite" call stack when setting the value.
Object.defineProperty(Animal.prototype, "age", {
  get(){
    console.log("Get age:", this.name, this._age) // getting
    return this._age
  },
  set(value){
    this._age = value
    console.log("Set age:", this.name, this._age) // setting
  }
})




//////////////////////////////////////////
// Specific Animal (Dog) constructor
function Dog({age = 0, name = 'dog'}) {
  this.name = name
  this.age = age
}

// first, defined inheritance
Dog.prototype = new Animal({});

// add whatever additional methods to the prototype of Dog
Object.assign(Dog.prototype, {
  bark(woff){
    console.log(woff)
  }
})


//////////////////////////////////////////
// Instanciating
var koko = new Animal({age:300, name:'koko'})
var dog1 = new Dog({age:1, name:'blacky'})
var dog2 = new Dog({age:5, name:'shorty'})

console.log(dog1)
koko.age
dog1.age = 3;
dog1.age
dog2.age

Розгорніть фрагмент