loading
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var Language = function(name,version) { 
 this.name = name;
 this.version = version;
 this.hello = function() { 
   return "Hello from " + this.name;
 }
};

var instanceLanguage = new Language("Python","2.7");


var literalLanguage = {"name":"Python","version":"2.7","hello":function() { return "Hello from " + this.name}};

// Compare instance and literal object values
console.log(literalLanguage.name);
console.log(instanceLanguage.name);
console.log(literalLanguage.version);
console.log(instanceLanguage.version);
console.log(literalLanguage.hello());
console.log(instanceLanguage.hello());
console.log(typeof(literalLanguage));
console.log(typeof(instanceLanguage));
console.log(Object.prototype.toString.call(literalLanguage));
console.log(Object.prototype.toString.call(instanceLanguage));


// However, even though the objects are identical in content, they're actually different 
if (literalLanguage == instanceLanguage) { 
  console.log("literalLanguage == instanceLanguage");
} else { 
   console.log("literalLanguage != instanceLanguage");
}

if (literalLanguage === instanceLanguage) { 
  console.log("literalLanguage === instanceLanguage");
} else { 
  console.log("literalLanguage !== instanceLanguage");
}

// In fact, not even two literal (or constructor) objects are ever equal
if ({} == {}) { 
  console.log("{} == {}");
} else { 
  console.log("{} != {}");
}

if ({} === {}) { 
  console.log("{} === {}");
} else { 
  console.log("{} !== {}");
}

// The Object.toString() compares the actual contents of an object 
if (literalLanguage.toString() == instanceLanguage.toString()) { 
  console.log("literalLanguage.toString() == instanceLanguage.toString()");
} else { 
   console.log("literalLanguage.toString() != instanceLanguage.toString()");
}

if (literalLanguage.toString() === instanceLanguage.toString()) { 
  console.log("literalLanguage.toString() === instanceLanguage.toString()");
} else { 
  console.log("literalLanguage.toString() !== instanceLanguage.toString()");
}


// With a constructor function, you get prototype inheritance
Language.prototype.bye = function()  { 
   return "Bye from " + this.name  + " " + this.version;
 };
 
// Literal objects can only append properties directly 
 literalLanguage.bye = function()  { 
   return "Bye from " + this.name + " " + this.version;
 };
 
// Same results, but constructor functions favor reusability
console.log(literalLanguage.bye());
console.log(instanceLanguage.bye());

// Create a new Language instance 
var otherInstanceLanguage = new Language("Python","3.7");
// You get access to bye because the Language prototype was modified
console.log(otherInstanceLanguage.bye());

// Create a new literal language
var otherLiteralLanguage = {"name":"Python","version":"2.7","hello":function() { return "Hello from " + this.name}}; 
// You won't get access to bye since you need to explicitly define it in a literal
//console.log(otherLiteralLanguage.bye()); // ERROR bye is not a function
Native Browser JavaScript