mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2025-08-17 04:04:20 +02:00
Begin writing about JavaScript arrays and dictionaries
This commit is contained in:
@@ -92,24 +92,41 @@ false
|
|||||||
null // = null
|
null // = null
|
||||||
|
|
||||||
/***********
|
/***********
|
||||||
* 2. Variables and Lists
|
* 2. Variables, Arrays and Objects
|
||||||
***********/
|
***********/
|
||||||
|
|
||||||
// variables are declared with the var keyword
|
// Variables are declared with the var keyword. Javascript is dynamically typed,
|
||||||
|
// so you don't need to specify type. Assignment uses a single = character.
|
||||||
var some_var = 5
|
var some_var = 5
|
||||||
|
|
||||||
// if you leave them off, you won't get an error...
|
// if you leave the var keyword off, you won't get an error...
|
||||||
some_other_var = 10
|
some_other_var = 10
|
||||||
|
|
||||||
// but your variable will always end up with the global scope, even if it wasn't
|
// but your variable will always end up with the global scope, even if it wasn't
|
||||||
// defined there, so don't do it.
|
// defined there, so don't do it.
|
||||||
|
|
||||||
/***********
|
// Arrays are ordered lists of values, of any type.
|
||||||
* 3. Control Structures
|
["Hello", 45, true]
|
||||||
***********/
|
|
||||||
|
// JavaScript's objects are equivalent to 'dictionaries' or 'maps' in other
|
||||||
|
// languages: an unordered collection of key-value pairs.
|
||||||
|
{key1: "Hello", key2: "World"}
|
||||||
|
|
||||||
|
// Keys are strings, but quotes aren't required if they're a valid
|
||||||
|
// JavaScript identifier. Values can be any type.
|
||||||
|
var myObj = {myKey: "myValue", "my other key": 4}
|
||||||
|
|
||||||
|
// Object attributes can be accessed using the 'subscript' syntax,
|
||||||
|
myObj["my other key"] // = 4
|
||||||
|
|
||||||
|
// ... or using the dot syntax, provided the key is a valid identifier.
|
||||||
|
myObj.myKey // = "myValue"
|
||||||
|
|
||||||
|
// Objects are mutable, values can be changed and new keys added.
|
||||||
|
myObj.myThirdKey = true
|
||||||
|
|
||||||
/***********
|
/***********
|
||||||
* 4. Objects
|
* 3. Control Structures
|
||||||
***********/
|
***********/
|
||||||
|
|
||||||
/***********
|
/***********
|
||||||
@@ -117,6 +134,94 @@ some_other_var = 10
|
|||||||
***********/
|
***********/
|
||||||
|
|
||||||
/***********
|
/***********
|
||||||
* 6. Constructors and Prototypes
|
* 6. More about Objects; Constructors and Prototypes
|
||||||
***********/
|
***********/
|
||||||
|
|
||||||
|
// Objects can contain functions, which can be called using the dot syntax.
|
||||||
|
myObj = {
|
||||||
|
myFunc: function(){
|
||||||
|
return "Hello world!"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
myObj.myFunc() // = "Hello world!"
|
||||||
|
|
||||||
|
// When functions are called like this, they can access the object they're
|
||||||
|
// attached to using the this keyword.
|
||||||
|
myObj = {
|
||||||
|
myString: "Hello world!",
|
||||||
|
myFunc: function(){
|
||||||
|
return this.myString
|
||||||
|
}
|
||||||
|
}
|
||||||
|
myObj.myFunc() // = "Hello world!"
|
||||||
|
|
||||||
|
// The value of this has to do with how the function is called, not where it's
|
||||||
|
// defined. So, that doesn't work if the function isn't called in the context of
|
||||||
|
// the object.
|
||||||
|
var myFunc = myObj.myFunc
|
||||||
|
myFunc() // = undefined
|
||||||
|
|
||||||
|
// Inversely, a function can be assigned to the object and gain access to it
|
||||||
|
// through this, even if it wasn't defined as such.
|
||||||
|
var myOtherFunc = function(){
|
||||||
|
return this.myString.toUpperCase()
|
||||||
|
}
|
||||||
|
myObj.myOtherFunc = myOtherFunc
|
||||||
|
myObj.myOtherFunc() // = "HELLO WORLD!"
|
||||||
|
|
||||||
|
// When you call a function with the new keyword, a new object is created, and
|
||||||
|
// made available to the function via this. Functions designed to be called
|
||||||
|
// like this are called constructors.
|
||||||
|
|
||||||
|
var MyConstructor = function(){
|
||||||
|
this.myNumber = 5
|
||||||
|
}
|
||||||
|
myNewObj = new MyConstructor() // = {myNumber: 5}
|
||||||
|
myNewObj.myNumber // = 5
|
||||||
|
|
||||||
|
// JavaScript objects aren't defined in terms of classes like other languages,
|
||||||
|
// but you can use prototypes to do many of the same things. When you try to
|
||||||
|
// access a property of an object that isn't present, its prototype is searched.
|
||||||
|
var myObj = {}
|
||||||
|
var myPrototype = {
|
||||||
|
meaningOfLife: 42,
|
||||||
|
myThirdFunc: function(){
|
||||||
|
return this.myString.toLowerCase()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
myObj.__proto__ = myPrototype
|
||||||
|
myObj.myThirdFunc() // = "hello world!"
|
||||||
|
|
||||||
|
// Of course, if your property isn't on your prototype, the prototype's
|
||||||
|
// prototype is searched, and so on.
|
||||||
|
myPrototype.__proto__ = {
|
||||||
|
myBoolean: true
|
||||||
|
}
|
||||||
|
myObj.myBoolean // = true
|
||||||
|
|
||||||
|
// 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
|
||||||
|
// reflected everywhere.
|
||||||
|
myObj.
|
||||||
|
|
||||||
|
// The __proto__ magic property we've used to access prototypes isn't standard,
|
||||||
|
// and shouldn't be used in real-world code. There is a way to create a new
|
||||||
|
// object with another given object as its prototype, though:
|
||||||
|
var myObj = Object.create(myPrototype)
|
||||||
|
myObj.meaningOfLife // = 42
|
||||||
|
|
||||||
|
// 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
|
||||||
|
// prototypes involves constructors.
|
||||||
|
|
||||||
|
// TODO: write about the .prototype property on constructors
|
||||||
|
|
||||||
|
// 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
|
||||||
|
// another matter).
|
||||||
|
String.prototype.firstCharacter = function(){
|
||||||
|
return this.charAt(0)
|
||||||
|
}
|
||||||
|
"abc".firstCharacter() // = "a"
|
||||||
|
|
||||||
```
|
```
|
||||||
|
Reference in New Issue
Block a user