So here we have our widget object, now to kind of help us out with this demonstratio we are going to create a fuction called Displayinfo. Displayinfo is going to take parameters one is the objects itself followed by the property name and simply we are just going to output to the console log, the actual property descriptor information for a given property on the object.
So we’ll do Object.getOwnPropertyDescriptor just like that and then we’re going to pass in the object, and then we’re going to say property name and this will actually return out to us the property descriptor. So if we were to say dispalayinfo,widget,color; the output of this is going to look like this….
In this demonstration, we’re going to take look at how we can define many properties on an object at one time. So let’s say I’ve got this object here. We’ll just make it an empty object literal. I can use the Object.defineProperty function to actually define a new property on this object.
So the first parameter is the object that I want to add the property to, then I’m going to add a new property called color, and then in here, I actually specify what my descriptor is going to be. So in this case, I want to make this property writable and I want to set the value of it to blue. So I can do this, and then I can come down here and I can actually say, console.log( object. color), and this will output to the web browser, the value of the property which is in fact blue. So I come here and I reload this, you’ll see that it outputs blue. But let’s say I wanted to define many properties on an object. Instead of just calling define property multiple times, I just want to pass in an object that has multiple properties defined.
In this demonstration, we’re going to take a look at something that’s interesting about closures. I want to create a couple of global variables here. Var x, y and funcs, and funcs is going to be basically an array of functions. So I want to create a little loop here, we’ll say x=0 and then x<5, and then we’ll increment x on each iteration, and then we’re simply going to say, funcs.push, and we’re going to pass a function in here.
It’s going to be a very simple function, all it’s going to do, is do a console.log(x). So we’re going to basically create five functions, push them onto an array, and then we’re going to iterate over that array, and we are going to execute those functions. So we’ll do, y<5, y++, and then we’ll come in here, and we’ll actually say funcs, and we’ll reference the function with the y, and then we’ll actually execute it.
And so this will actually loop over all five functions and we’ll output the value of x to the screen. Now if we reload our webpage here, we’re going to see that we get 5 outputted five times. Now a lot of…
In this demonstration we’re going to take a look at the three types of properties that can be attached to an object. So the first type of property that we can attach is what’s known as an Instance Property. So I’m going to create a new Instance Property here on this on this widget object, we’ll call it Instance Func, it’s simply just going to be a function that actually outputs a line of text to the console.
So we’ll just say, an instance func was called, now we’re going to create another type of property, we’re going to create a Prototype Property so we’re actually going to put this one right off the Prototype of the widget object, and we’ll call this a prototype func just like this, and we’ll do it console.
log, a prototype func was called, there we go. The third type of property that we can have is what I call a Static Property. So we’re going to create a static func, we’re going to create this right off of the Widget Function Object put a function on here, and we’ll just have it output console. log a static func was called, there we go….
An example of how you can extract a prototype of an object and then replace the prototype’s methods with new custom methods.
In this demonstration, we’re going take a look at how we can take an object’s prototype and actually modify that object and extend it to perform additional functionality that we might be interested in. To perform this demo, I’m actually including 2/3rd party libraries, I’m going to be using jQuery, and I’m going to be using the Q promise library.
So down here I have set up my two deferred objects. I have an object called first Deferred and a second object called secondDeferred, and basically what I want to do, is I want to chain these two promises. So I first of firstDeferred. promise, and then hanging off that promise I have a then statement, which is then going to execute another function once that first promise is resolved. And the second deferred promise is going to be returned from this then statement, and once that promise gets resolved, then the final function here, saying both promises resolved, will be executed.
To actually resolve these, I’m just going to use a simple set Timeout. I have the setTimeout for the first Deferred to be resolved after 3000 milliseconds or 3 seconds, and for the secondDeferred, I have it set…
Enumerable properties are those which can be iterated by a “for..in loop”. Here we show you an example of one and go into depth on how they work.
I’m going to say car.color, will make it blue. I’m going to do car.vin we give it a made up vin number here, so there’s is our vin number for the car, and we’re going to say car. transmission, we’ll say it’s an automatic, OK. So, there are some properties on our car, now if we wanted to display those properties we can actually iterate over them with a for loop, so I can do for prop and car.
So this will actually iterate over the properties of the car and coming here and do console. Log prop, put in a little equal sign and then call my car object using the bracket syntax and pass the name of the property and when I do this I can actually load up our webpage and we can reload this and we can…
object.defineProperty, and then we have to pass in the object on which we want to have the property, then we have to specify the name of the property, so in this case, I’m going to specify the name to be color, and then I can pass in some options. One of those options is configurable, and so for this, I’m going go ahead and set it to true so that…
In this demonstration, I’m going to demonstrate how we can prevent an object from being extensible. So I’m going to in come here and declare a new object, we’ll called it Widget. And I’m going to give it two properties, this. color which will set equal to blue, and then this. dimensions which will set to an object literal. And we’re going to give it two properties, we’ll give it height for 100, and width for 200.
Alright, so I’m going to come down here now and I’m actually going to instantiate this object, so create a variable called aWidget and I’m going to set it equal to new Widget, and then I can do console. log and I’m just going to output the color of this widget. So I’m going to save that, I’m going to come to my web browser, I’m going to reload my page, and you can see that I’ve now outputted blue.
Here we look at an example of a property defined on an object’s prototype vs. a property defined on the object itself, as well as how to retrieve it.
In this video, we’re going to take a look at the difference between the properties defined on the objects prototype, and those properties that’re defined on the object itself. So take a look at this, we’re going to create a new object called, Base Widget. And base widget is going to have several properties on it.
We’re going to have one called, length, and we’ll set it equal to 12, and then we’re going to have one called width, and we’re going to set it equal to 24. Then using this base widget as a prototype, we’re going to create another object called widget, and we’re going to use the object.create function, and we’re going to pass the base widget object to service the prototype, and then we’re going to specify a couple of additional properties on here.
So we’re going to create a property called color, and we’re going to give it a value of blue. We are also going to make it, writable so that it can be modified, and we’re going to make it enumerable so we can actually enumerate over the properties of the object, and it will appear in the list. So make that true,…
In this video we show you an example of how to create custom properties by using Object.defineProperty with its getter and setter functions.
In this demonstration, we’re going to take a look at a situation where you might want to choose to use an object constructor, as opposed to an object literal. So, let’s say I wanted to create just a simple car object. Var aCar, we’ll just set it to a basically an empty object literal, and then I want to hang off of it a simple property.
We’re just going to call that property color. Now assign the property of the color, green, and now I can actually output that actual property to the console with the console.log. So console.log(aCar.color). So, now if I save that and I load up my web browser, I can actually refresh this and we’re going to see that it says that the color of the car is green, which is exactly what we would expect.
This is actually an example of a simple property. In ECMAscript 5 we actually have the ability to set up properties that have getters and setters and actually have a private field behind those getters and setters. So to set up something like that, we can’t use an object literal, instead we actually have to use a actual constructor function….
The top jQuery freelance developers
jQuery blog posts