More Related Content Similar to 基于原型的JavaScript面向对象编程 Similar to 基于原型的JavaScript面向对象编程 (20) 5. 对象的表现形式
{ // JSON
a: 1
}
[1, 2] // Array
/d+/i // RegExp
function() {} // Function
new Object(); // constructor
// ...
Note：函数(function)是一个特殊的对象，所有函数都是构造函数
Function的实例。
15. 封装——最简单的对象封装
key : value
var cat1 = {
name: '没头脑',
color: 'red'
};
使用函数封装
var Cat = function(name, color) {
// ...
return {
name: '不高兴',
color: 'yellow'
};
};
var cat2 = Cat();
16. 封装——构造函数
var Cat = function() {
this.name = '没头脑';
this.color = 'red';
};
var cat = new Cat();
17. 封装——原型模式
var Cat = function() {
};
Cat.prototype.name = '没头脑';
Cat.prototype.color = 'red';
var cat = new Cat();
18. 封装——私有变量
function Container(param) {
function decrease() {
if (secret > 0) {
secret -= 1;
return true;
} else {
return false;
}
}
this.member = param;
var secret = 3;
var that = this;
}
this.service = function() {
return decrease() ? that.member : null;
};
缺陷：原型方法不能享受到构造函数中的私有变量，并且本地方法不
能被继承。
20. 多态——重载(overload)
var Foo = function() {};
Foo.prototype.method1 = function(a, b) {
if (typeof a == "number" && typeof b == "number") {
alert(a * b);
} else if (typeof a == "string" && typeof b == "string") {
alert(a + b);
} else if (arguments.length == 3) {
alert((a + b) * arguments[2]);
} else {
alert("输入错啦");
}
};
JavaScript是弱类型语言，通过动态判断参数类型实现重载。
21. 多态——覆写(override)
var Foo = function() {};
Foo.prototype.toString = function() {
return "foo object";
};
alert(new Foo()); // alert "foo object"
35. 设想一个最简单的继承
function Animal() {
alert('Animal init');
}
Animal.prototype.sleep = function() {
alert('Animal sleep');
};
var a1 = new Animal(); // alert Animal init
a1.sleep(); // alert Animal sleep
function Cat() {
alert('Cat init');
}
Cat.prototype = Animal.prototype;
Cat.prototype.sleep = function() {
alert('Cat sleep');
};
var c2 = new Cat(); // alert Cat init
c2.sleep(); // alert Cat sleep
a1.sleep(); // alert Cat sleep，这时候a1也输出了Cat sleep
37. 使用空对象作为中介
function Cat() {
alert('Cat init');
}
function TemplateClass() {}
TemplateClass.prototype = Animal.prototype;
Cat.prototype = new TemplateClass();
Cat.prototype.constructor = Cat;
Cat.prototype.sleep = function() {
alert('Cat sleep');
};
var c2 = new Cat(); // alert Cat init
c2.sleep(); // alert Cat sleep
a1.sleep(); // alert Animal sleep
c2的原型链
38. 封装类继承函数
var TemplateClass = function() {},
chain = function(object) {
TemplateClass.prototype = object;
var result = new TemplateClass();
TemplateClass.prototype = null;
return result;
};
function extend(SubClass, SuperClass, overrides) {
var subProto, name;
SuperClass = SuperClass || Object;
SubClass.prototype = chain(SuperClass.prototype);
subProto = SubClass.prototype;
subProto.constructor = SubClass;
if (overrides) {
for (name in overrides) {
if (overrides.hasOwnProperty(name)) {
subProto[name] = overrides[name];
}
}
}
}
39. 一个完整的类继承例子(1)
function Animal(name, color) {
this.name = name;
this.color = color;
}
extend(Animal, Object, {
sleep: function() {
alert(this.name + ' sleep');
}
});
var a1 = new Animal('倒霉熊', 'white');
a1.sleep(); // alert 倒霉熊 sleep
function Cat() {
Animal.apply(this, arguments); // 通过调用父类的构造函数实现初始化
}
extend(Cat, Animal, {
greenEye: true,
mew: function() {
alert(this.name + ' mew');
}
});
var c2 = new Cat('没头脑', 'red');
c2.mew(); // alert 没头脑 mew
c2.sleep(); // alert 没头脑 sleep
alert(c2.greenEye); // true
40. 一个完整的类继承例子(2)
function PersianCat() {
Cat.apply(this, arguments); // 通过调用父类的构造函数实现初始化
}
extend(PersianCat, Cat, {
name: 'persian cat',
blueEye: true,
mew: function() {
Cat.prototype.mew.call(this); // 通过调用父类的mew()
alert(this.name + ' miaow');
}
});
var p3 = new PersianCat('不高兴', 'yellow');
p3.mew(); // alert 不高兴 mew，alert 不高兴 miaow
p3.sleep(); // alert 不高兴 sleep
alert(p3.greenEye); // true
alert(p3.blueEye); // true
45. 参考资料
JavaScript: The World's Most Misunderstood Programming Language
Prototypal Inheritance in JavaScript
Private Members in JavaScript
JavaScript Object Layout
