Javascript Object.* – object – properties



Javascript Object.* – object – properties

0 0


js-object-talk


On Github rootTheLure / js-object-talk

Javascript Object.*

by Dmitrey Gerasimov

object

Object.prototype.constructor
Object.create()
function Shape() {
  this.x = 0;
  this.y = 0;
}

function Rectangle() {
  Shape.call(this); // call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log(rect instanceof Rectangle); // true
console.log(rect instanceof Shape); // true
                        
is
Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

var test = { a: 1 };
Object.is(test, test);       // true

Object.is(null, null);       // true

// Special Cases
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true
                        
Object.assign
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
                        
Object.assign
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.
                        
Object.assign
var v1 = '123';
var v2 = true;
var v3 = 10;
var v4 = Symbol('foo')

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// Primitives will be wrapped, null and undefined will be ignored.
// Note, only string wrappers can have own enumerable properties.
console.log(obj); // { "0": "1", "1": "2", "2": "3" }
                        

properties

Object.defineProperty()
Object.defineProperty(
    obj,
    prop,
    descriptor
)
                        
Object.defineProperty()
var descriptor = {
    configurable: false,
    enumerable: false,
    value: undefined,
    writable: false,
    get: function () { return this._prop; }, // default is undefined
    set: function (value) {
        this._prop = value;
        console.log(value);
        return value;
    }
};
                        
var o = {}; // Creates a new object

Object.defineProperty(o, 'a', {
  value: 37,
  writable: false
});

console.log(o.a); // logs 37
o.a = 25; // throws in strict mode
console.log(o.a); // logs 37. The assignment didn't work.
                        
var o = {};
Object.defineProperty(o, 'a', { value: 1, enumerable: true });
Object.defineProperty(o, 'b', { value: 2, enumerable: false });
Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false
o.d = 4; // enumerable defaults to true
         // when creating a property by setting it

for (var i in o) {
  console.log(i);
}
// logs 'a' and 'd' (in undefined order)

Object.keys(o); // ['a', 'd']

o.propertyIsEnumerable('a'); // true
o.propertyIsEnumerable('b'); // false
o.propertyIsEnumerable('c'); // false
                        
var o = {};
Object.defineProperty(o, 'a', {
  get: function() { return 1; },
  configurable: false
});

Object.defineProperty(o, 'a', { configurable: true }); // throws a TypeError
Object.defineProperty(o, 'a', { enumerable: true }); // throws a TypeError

Object.defineProperty(o, 'a', { set: function() {} });
// throws a TypeError (set was undefined previously)

Object.defineProperty(o, 'a', { get: function() { return 1; } });
// throws a TypeError (even though the new get does exactly the same thing)

Object.defineProperty(o, 'a', { value: 12 }); // throws a TypeError

console.log(o.a); // logs 1
delete o.a; // Nothing happens
console.log(o.a); // logs 1
                        
var obj = {};

Object.defineProperty(obj, {
    get: function () { return this._prop; },
    set: function (value) {
        this._prop = value;
        console.log(value);
        return value;
    }
};
                        
Object.preventExtensions()
  • marks an object as no longer extensible
  • attempting to add new properties will fail
  • that the properties may still be deleted
  • properties can still be added to the object prototype
Object.seal()
  • prevents new properties from being added
  • marks all existing properties as non-configurable
  • it does not prevent the values from being changed
  • attempting to delete or add properties will fail
Object.freeze()
  • prevents new properties from being added
  • prevents existing properties from being removed
  • prevents existing properties from being changed
  • marks all existing properties as non-configurable
  • accessor properties (getters and setters) work the same

Invocations

Function.prototype.call()
function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

Food.prototype = Object.create(Product.prototype);
// Reset the constructor from Product to Food
Food.prototype.constructor = Food;

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

Toy.prototype = Object.create(Product.prototype);

// Reset the constructor from Product to Toy
Toy.prototype.constructor = Toy;

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
Function.prototype.apply()
/* min/max number in an array */
var numbers = [5, 6, 2, 3, 7];

/* using Math.min/Math.max apply */
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);
/* This about equal to Math.max(numbers[0], ...)
or Math.max(5, 6, ...) */


/* vs. simple loop based algorithm */
max = -Infinity, min = +Infinity;

for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] > max) {
    max = numbers[i];
  }
  if (numbers[i] < min) {
    min = numbers[i];
  }
}
Function.prototype.bind()
this.x = 9;
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX(); // 9, because in this case, "this" refers to the global object

// Create a new function with 'this' bound to module
// New programmers (like myself) might confuse
// the global var getX with module's property getX
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

Thank you