JS to create Object

上一篇 / 下一篇  2015-08-08 08:43:14 / 个人分类：JavaScript

查看( 721 ) / 评论( 9 ) / 评分( 0 / 0 )
Another Way to Create

The method we've used to create objects uses object literal notation—that is, creating a new object with { } and defining properties within the brackets.

Another way of creating objects without using the curly brackets { } is to use the keyword new. This is known as creating an object using a constructor.

The new keyword creates an empty object when followed by Object(). The general syntax is:

varbjectName =newObject();

We then have to fill this object with properties and labels. How do we do that? Check out the creation of the object bob to see what we do. We create the name property for the object bob by using bob.name and assigning that to a value. Contrast this to how we define properties in lines 6-7 for the susan1 object.


收藏 举报

TAG: create Create Object object

wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-09 11:16:15
// use dot notation for snoopy's species
var species = snoopy.species;
   
// use bracket notation for snoopy's age
var age = snoopy["age"];
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-09 10:33:12
var snoopy = new Object();
snoopy.species = "beagle";
snoopy.age = 10;

// save Snoopy's age and species into variables
// use dot notation for snoopy's species
var species = snoopy.species;
   
// use bracket notation for snoopy's age
var age = snoopy["age"];
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-09 10:31:36
Properties
Properties are like variables that belong to an object, and are used to hold pieces of information. Properties can be accessed in two ways:

Dot notation, with ObjectName.PropertyName

Bracket notation, with ObjectName["ropertyName"] (don't forget the quotes!)

In the editor, we have brought back our snoopy object, with a species and age property.
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-09 10:13:59
Arrays of Objects
Remember that an object is just another type, like a string or number but more complex. This means that just as we can make arrays of numbers and strings, we can also make arrays of objects.

Here we have our Person constructor which should look familiar. We can use this constructor to make an array of Person objects, similar to how we might make an array of numbers but filling in people instead.

// Our person constructor
function Person (name, age) {
    this.name = name;
    this.age = age;
}

// Now we can make an array of people
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
// add the last family member, "timmy", who is 6 years old
family[3] = new Person("timmy",6);
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-09 09:52:54
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.species = "Homo Sapiens";
}
var sally = new Person("Sally Bowles",28);

console.log(sally.name + sally.age + sally.species);
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-08 10:25:44
var rectangle = new Object();
rectangle.height = 3;
rectangle.width = 4;
// here is our method to set the height
rectangle.setHeight = function (newHeight) {
  this.height = newHeight;
};
// help by finishing this method
rectangle.setWidth = function (newWidth) {
    this.width = newWidth;
};

// here change the width to 8 and height to 6 using our new methods
rectangle.height = rectangle.setHeight;
rectangle.setHeight(6);
rectangle.width = rectangle.setWidth;
rectangle.setWidth(8);
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-08 10:11:45
"This" Works for Everyone
Great! Now we can take advantage of the fact that the method setAge is not limited to a single object bob—we can reuse the same method for different objects! This allows us to avoid typing out a custom method each time. All because we used the placeholder this.

In the editor, we have the same code as last time, where we define setAge using this. We then set bob.setAge = setAge;. But this time we will reuse the setAge method for susan as well.

// here we define our method using "this", before we even introduce bob
var setAge = function (newAge) {
  this.age = newAge;
};
// now we make bob
var bob = new Object();
bob.age = 30;
bob.setAge = setAge;
  
// make susan here, and first give her an age of 25
var susan = {
    age: 25,
};
// here, update Susan's age to 35 using the method
susan.setAge = setAge;
susan.setAge(35);
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-08 08:53:54
// Putting it all together
// help us make snoopy using literal notation
// Remember snoopy is a "beagle" and is 10 years old.
var snoopy = {
    species: "beagle",
    age: 10
};

// help make buddy using constructor notation
// buddy is a "golden retriever" and is 5 years old
var buddy = new Object();
buddy.species = "golden retriever";
buddy.age = 5;
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-08 08:49:56
// Our bob object again, but made using a constructor this time
var bob = new Object();
bob.name = "Bob Smith";
bob.age = 30;
// Here is susan1, in literal notation
var susan1 = {
  name: "Susan Jordan",
  age: 24
};
// Make a new susan2 object, using a constructor instead
var susan2 = new Object();
susan2.name = "Susan Jordan";
susan2.age = 24;
 

评分：0

我来说两句

Open Toolbar