mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 09:41:36 +00:00
Continue work on objects cont'd section
This commit is contained in:
parent
c2d5429472
commit
3b8ece9932
@ -139,6 +139,9 @@ myObj.myKey // = "myValue"
|
|||||||
// Objects are mutable; values can be changed and new keys added.
|
// Objects are mutable; values can be changed and new keys added.
|
||||||
myObj.myThirdKey = true
|
myObj.myThirdKey = true
|
||||||
|
|
||||||
|
// If you try to access a value that's not yet set, you'll get undefined.
|
||||||
|
myObj.myFourthKey // = undefined
|
||||||
|
|
||||||
/***********
|
/***********
|
||||||
* 3. Control Structures
|
* 3. Control Structures
|
||||||
***********/
|
***********/
|
||||||
@ -151,16 +154,16 @@ myObj.myThirdKey = true
|
|||||||
* 6. More about Objects; Constructors and Prototypes
|
* 6. More about Objects; Constructors and Prototypes
|
||||||
***********/
|
***********/
|
||||||
|
|
||||||
// Objects can contain functions, which can be called using the dot syntax.
|
// Objects can contain functions.
|
||||||
myObj = {
|
var myObj = {
|
||||||
myFunc: function(){
|
myFunc: function(){
|
||||||
return "Hello world!"
|
return "Hello world!"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
myObj.myFunc() // = "Hello world!"
|
myObj.myFunc() // = "Hello world!"
|
||||||
|
|
||||||
// When functions are called like this, they can access the object they're
|
// When functions attached to an object are called, they can access the object
|
||||||
// attached to using the this keyword.
|
// they're attached to using the this keyword.
|
||||||
myObj = {
|
myObj = {
|
||||||
myString: "Hello world!",
|
myString: "Hello world!",
|
||||||
myFunc: function(){
|
myFunc: function(){
|
||||||
@ -169,14 +172,14 @@ myObj = {
|
|||||||
}
|
}
|
||||||
myObj.myFunc() // = "Hello world!"
|
myObj.myFunc() // = "Hello world!"
|
||||||
|
|
||||||
// The value of this has to do with how the function is called, not where it's
|
// What this is set to has to do with how the function is called, not where
|
||||||
// defined. So, that doesn't work if the function isn't called in the context of
|
// it's defined. So, our function doesn't work if it isn't called in the
|
||||||
// the object.
|
// context of the object.
|
||||||
var myFunc = myObj.myFunc
|
var myFunc = myObj.myFunc
|
||||||
myFunc() // = undefined
|
myFunc() // = undefined
|
||||||
|
|
||||||
// Inversely, a function can be assigned to the object and gain access to it
|
// Inversely, a function can be assigned to the object and gain access to it
|
||||||
// through this, even if it wasn't defined as such.
|
// through this, even if it wasn't attached when it was defined.
|
||||||
var myOtherFunc = function(){
|
var myOtherFunc = function(){
|
||||||
return this.myString.toUpperCase()
|
return this.myString.toUpperCase()
|
||||||
}
|
}
|
||||||
@ -193,18 +196,27 @@ var MyConstructor = function(){
|
|||||||
myNewObj = new MyConstructor() // = {myNumber: 5}
|
myNewObj = new MyConstructor() // = {myNumber: 5}
|
||||||
myNewObj.myNumber // = 5
|
myNewObj.myNumber // = 5
|
||||||
|
|
||||||
// JavaScript objects aren't defined in terms of classes like other languages,
|
// Every JavaScript object has a 'prototype'. When you go to access a property
|
||||||
// but you can use prototypes to do many of the same things. When you try to
|
// on an object that doesn't exist on the actual object, the interpreter will
|
||||||
// access a property of an object that isn't present, its prototype is searched.
|
// look at its prototype.
|
||||||
var myObj = {}
|
|
||||||
|
// Some JS implementations let you access an object's prototype on the magic
|
||||||
|
// property __proto__. While this is useful for explaining prototypes it's not
|
||||||
|
// part of the standard; we'll get to standard ways of using prototypes later.
|
||||||
|
var myObj = {
|
||||||
|
myString: "Hello world!",
|
||||||
|
}
|
||||||
var myPrototype = {
|
var myPrototype = {
|
||||||
meaningOfLife: 42,
|
meaningOfLife: 42,
|
||||||
myThirdFunc: function(){
|
myFunc: function(){
|
||||||
return this.myString.toLowerCase()
|
return this.myString.toLowerCase()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
myObj.__proto__ = myPrototype
|
myObj.__proto__ = myPrototype
|
||||||
myObj.myThirdFunc() // = "hello world!"
|
myObj.meaningOfLife // = 42
|
||||||
|
|
||||||
|
// This works for functions, too.
|
||||||
|
myObj.myFunc() // = "hello world!"
|
||||||
|
|
||||||
// Of course, if your property isn't on your prototype, the prototype's
|
// Of course, if your property isn't on your prototype, the prototype's
|
||||||
// prototype is searched, and so on.
|
// prototype is searched, and so on.
|
||||||
@ -216,13 +228,18 @@ myObj.myBoolean // = true
|
|||||||
// There's no copying involved here; each object stores a reference to its
|
// There's no copying involved here; each object stores a reference to its
|
||||||
// prototype. This means we can alter the prototype and our changes will be
|
// prototype. This means we can alter the prototype and our changes will be
|
||||||
// reflected everywhere.
|
// reflected everywhere.
|
||||||
myObj.
|
myPrototype.meaningOfLife = 43
|
||||||
|
myObj.meaningOfLife // = 43
|
||||||
|
|
||||||
// The __proto__ magic property we've used to access prototypes isn't standard,
|
// While the __proto__ magic property we've seen so far is useful for
|
||||||
// and shouldn't be used in real-world code. There is a way to create a new
|
// explaining prototypes, it's non-standard. There's no standard way to change
|
||||||
// object with another given object as its prototype, though:
|
// an existing object's prototype, but there's two ways to set the prototype of
|
||||||
|
// a new object when you first create it.
|
||||||
|
|
||||||
|
// The first is Object.create, which is a recent addition to JS, and therefore
|
||||||
|
// not available in all implementations yet.
|
||||||
var myObj = Object.create(myPrototype)
|
var myObj = Object.create(myPrototype)
|
||||||
myObj.meaningOfLife // = 42
|
myObj.meaningOfLife // = 43
|
||||||
|
|
||||||
// Unfortunately, Object.create is quite recent and isn't available in many
|
// Unfortunately, Object.create is quite recent and isn't available in many
|
||||||
// browsers, so you often can't use that, either. The most reliable way to set
|
// browsers, so you often can't use that, either. The most reliable way to set
|
||||||
@ -231,13 +248,27 @@ myObj.meaningOfLife // = 42
|
|||||||
// TODO: write about the .prototype property on constructors
|
// TODO: write about the .prototype property on constructors
|
||||||
|
|
||||||
// Built-in types' prototypes work like this too, so you can actually change
|
// Built-in types' prototypes work like this too, so you can actually change
|
||||||
// the prototype of a string, for instance (although whether you should is
|
// the prototype of a string, for instance.
|
||||||
// another matter).
|
|
||||||
String.prototype.firstCharacter = function(){
|
String.prototype.firstCharacter = function(){
|
||||||
return this.charAt(0)
|
return this.charAt(0)
|
||||||
}
|
}
|
||||||
"abc".firstCharacter() // = "a"
|
"abc".firstCharacter() // = "a"
|
||||||
|
|
||||||
|
// There are several implementations of JavaScript, which all gain new features
|
||||||
|
// at different times. Sometimes, however, it's possible to replicate new
|
||||||
|
// features by altering built in types or prototypes, which is called
|
||||||
|
// "polyfilling".
|
||||||
|
|
||||||
|
// For instance, we mentioned that Object.create isn't yet available in all
|
||||||
|
// implementations, but we can still use it if we do this:
|
||||||
|
if (Object.create === undefined){
|
||||||
|
Object.create = function(proto){
|
||||||
|
// make a temporary constructor with the right prototype
|
||||||
|
var Constructor = function(){}
|
||||||
|
Constructor.prototype = proto
|
||||||
|
return new Constructor()
|
||||||
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Further Reading
|
## Further Reading
|
||||||
|
Loading…
Reference in New Issue
Block a user