原始人、古代人、现代人、面向对象重度患者和完美主义者分别是怎么使用Javascript对象的
原始人使用定义式
function wannaDie() {
alert("苍茫的天涯是我的爱，" +
"绵绵的青山脚下花正开，" +
"什么样的节奏是最呀最摇摆，" +
"什么样的歌声才是最开怀……");
}
alert(typeof(wannaDie));
//alert(typeof wannaDie()); //等价的另外一种方式
古代人使用变量式
var wannaDie = function() {
alert("hello");
};
alert(typeof(wannaDie));
//alert(typeof wannaDie()); //等价的另外一种方式
我就是要唱歌
var sing = function() {
alert("我像一只鱼儿在你的荷塘....");
};
sing();
sing = function() {
alert("只为和你守候那皎白月光....");
};
sing();
你TM回声机啊！
<script type="text/javascript">
function sing() {
alert("我像一只鱼儿在你的荷塘....");
}
sing();
function sing() {
alert("只为和你守候那皎白月光....");
}
sing();
//上面sing()的内容会被覆盖，因为javascript并非一行行执行，而是一段段分析执行。
//而且在同一段程序中，定义式语句会被提取出来优先执行。
</script>
老师再给我一次机会吧！
<script type="text/javascript">
function sing() {
alert("我像一只鱼儿在你的荷塘....");
}
sing();
</script>
<script type="text/javascript">
function sing() {
alert("只为和你守候那皎白月光....");
}
sing();
</script>
现代人使用匿名函数
普通的现代人
(function(){
alert("要。。要。。切克闹。。煎饼果子来一套！");
})();
有点追求的现代人会稍作处理
window.myApp = window.myApp || {};
window.myApp.someFunction = function(){
//so some work
};
比较有追求的现代人会再多做一点
//这样
(function(myApp, $, undefined){
//do some work
}(window.myApp = window.myApp || {}, jQuery));
//或者这样
window.myApp = (function(myApp, $, undefined){
//do some work
return myApp;
})(window.myApp || {}, jQuery);
使用时你可以这样
MyApp.MyModule.MySubModule.doSomething();
面向对象重度患者使用模块模式（Revealing Module Pattern）
<script type="text/javascript">
window.ns1 = (function (ns1, undefined) {
var var1 = "var1";
var var2 = "var2";
var someFunction = function () {
return myVar1 + " " + myVar2;
};
return {
getVar1: function () {
return myVar1;
}, //myVar1 public getter
setVar1: function (val) {
myVar1 = val;
}, //myVar1 public setter
someFunction: someFunction //some function made public
}
})(window.ns1);
alert(ns1);
alert(ns1.var1);
alert(ns1.var2);
alert(typeof(ns1.getVar1));
alert(typeof(ns1.setVar1));
alert(typeof(ns1.someFunction));
</script>
其实这种方式还不是最完美的，因为当创建多个对象是，相同的方法/函数会复制多份，这显然有些浪费。
完美主义者会使用prototype
完美主义者的用法
var Person = function(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
};
Person.prototype.fullName = function(){
return this.firstName + " " + this.lastName;
};
var person = new Person("Justin", "Etheredge");
alert(person.fullName());
alert(person.age)
完美主义者的儿子的用法（继承&原型链）
<script type="text/javascript">
var Person = function(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
};
Person.prototype.fullName = function(){
return this.firstName + " " + this.lastName;
};
var Spy = function(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
};
Spy.prototype = new Person();
Spy.prototype.spy = function(){
alert("-------");
alert(typeof(this));
alert(this.fullName() + " is spying.");
};
var mySpy = new Spy("Mr.", "Spy", 50);
mySpy.spy();
alert(Spy);
alert(Spy.age);
alert(mySpy);
alert(mySpy.age);
</script>
补充一下对象声明的两种方式
<script type="text/javascript">
//方式1
var person1 = {
name:"Johnson",
age:30,
sex:"male",
hobby:function(){alert("girl!")}
};
//方式2
var person2 = function(){
name = "Johnson";
age = 30;
sex = "male";
hobby = function(){
alert("girl!")
};
};
alert(person1);
alert(person2);
</script>
补充阅读
为现代 JavaScript 开发做好准备
JavaScript 命名空间
JavaScript创建对象