JavaScript-OO
参考资料
Object-Oriented JavaScript, 2nd. Chapter 4
结构体&对象
代码
function Hero(name, age) {
this.name = name;
this.age = age;
}
var hero = new Hero("Tom", 10);
console.log("Name: " + hero.name);
console.log("Age: " + hero.age);
运行结果：
Name: Tom
Age: 10
要点
- Hero()是构造函数；构造函数既然是函数，就可以传参；
- this: 用来定义类成员（属性）；
- new：创建对象；
- 构造函数约定俗成是首字母大写，从而和普通的函数区分开来。
对等的object literal定义方法
下面的代码和上面的示例效果类似：
var hero = {
name: "Tom",
age: 10
}
console.log("Name: " + hero.name);
console.log("Age: " + hero.age);
但发现在初始化对象上不太方便。
增加对象方法
在前面代码的基础上，增加成员方法。
代码
function Hero(name, age) {
this.name = name;
this.age = age;
this.debug = function() {
return "Hero[name:" + this.name + ",age:" + this.age + "]";
};
}
var hero = new Hero("Tom", 10);
console.log(hero.debug());
运行结果：
Hero[name:Tom,age:10]
等价的写法
var hero = {
name: "Tom",
age: 10,
debug: function() {
return "Hero[name:" + this.name + ",age:" + this.age + "]";
}
}
console.log(hero.debug());
全局对象
window
这里只讨论WEB浏览器，其全局对象名为window。
var a = 100;
console.log("a: " + a);
console.log("a: " + window.a);
console.log("a: " + window['a']);
这里的三种访问方式都是一样的。
也就是说，在JavaScript中，所有的全局变量（函数也是变量）都是全局对象window的属性。
window & new
对前面的代码进行改写，去掉new关键字，会提示undefined。
function Hero(name, age) {
this.name = name;
this.age = age;
}
var hero = Hero("Tom", 10);
console.log("Value: " + typeof hero); // Value: undefined
console.log("name: " + name); // name: Tom
console.log("name: " + window.name); // name: Tom
console.log("age: " + age); // age: 10
console.log("age: " + window.age); // age: 10
// TypeError: hero is undefined
console.log("Name: " + hero.name);
原因：没有写new的时候，就认为Hero是全局对象window的属性，从而undefined。而且Hero()函数中的this，此时指的是window全局对象。——注意到name和age属性的访问方法。
而使用new的时候，就会返回一个新的对象，此时的this指向这个新对象。
构造函数背后的故事
只给出代码，不做解释。
诡异的代码
function C() {
this.a = 1;
return {b:2};
}
var c = new C();
console.log(c.a); // undefined
console.log(c.b); // 2
伪代码
可以把构造函数理解为如下的过程：
function C() {
//var this = {};
this.a = 1;
// return this;
}
var c = new C();
console.log(c.a); // 1
对象与引用
literal object
var a = {x:1, y:2};
var b = a;
function print(a) {
console.log("(" + a.x + "," + a.y + ")");
}
function foo(a) {
a.x++;
a.y++;
}
print(a); // (1,2)
print(b); // (1,2)
b.y++;
print(a); // (1,3)
print(b); // (1,3)
foo(a);
print(a); // (2,4)
print(b); // (2,4)
new object
function Point(x,y) {
this.x = x;
this.y = y;
this.print = function() {
console.log("(" + a.x + "," + a.y + ")");
};
}
var a = new Point(1,2);
var b = a;
function foo(a) {
a.x++;
a.y++;
}
print(a); // (1,2)
print(b); // (1,2)
b.y++;
print(a); // (1,3)
print(b); // (1,3)
foo(a);
print(a); // (2,4)
print(b); // (2,4)
prototype
function Point(x,y) {
this.x = x;
this.y = y;
}
Point.prototype.print = function() {
console.log("(" + this.x + "," + this.y + ")");
};
Point.prototype.incr = function() {
this.x++;
this.y++;
};
function foo() {
var a = new Point(1,2);
a.print(); // (1,2)
a.incr();
a.print(); // (2,3)
}
foo();
名字空间
示例一
var SomeConstants = {
ONE : 1,
TWO : 2,
THREE : 3};
try {
var a = ONE;
console.log("a:" + a);
} catch (e) {
//Initialize a error: ReferenceError: ONE is not defined
console.log("Initialize a error: " + e);
}
var b = SomeConstants.ONE;
console.log("b:" + b); // b:1
示例二
var NS = NS || {};
NS.SubNS = {};
NS.SubNS = {
// Constants
ONE : 1,
TWO : 2,
THREE : 3,
// Module variables
value : NS.SubNS.ONE,
ob : undefined,
// Functions
incr: function () {
value++;
},
print: function () {
console.log("value: " + NS.SubNS.value);
}
};
// Class
NS.SubNS.Ctor = function (msg) {
this.message = msg;
};
NS.SubNS.Ctor.prototype.setMsg = function (msg) {
this.message = msg;
}
NS.SubNS.Ctor.prototype.getMsg = function () {
return this.message;
}
NS.SubNS.Ctor.prototype.print = function () {
console.log("Message: " + this.message);
}
function foo() {
NS.SubNS.print(); // value: undefined
NS.SubNS.value = 100;
NS.SubNS.print(); // value: 100
NS.SubNS.ob = new NS.SubNS.Ctor("msg1");
temp = NS.SubNS.ob;
temp.print(); // Message: msg1
temp.setMsg("another msg");
temp.print(); // Message: another msg
}
foo();