其实js才是真正的面向对象的语言，因为里面只有对象而没有class。
这里的OO，就是要在JS中实现类似传统语言中面向对象的设计模式，来实现其他语言中OO模式的目的（比如继承）。
- 在JS中使用OO模式的意义：code saving and share memory / DRY / 让对象可以使用既有的functions
- 作用域
- if和loop等的{}是没有作用域的，只有function的{}里是作用域
- Execution context：动态
- 内存scope，但并不能被代码引用/使用
- 用于在运行时存放变量
- 表示为：是从哪里开始寻找变量的
- key-value pair，变量名-变量值
- 一开始有一个global scope
- 每次执行函数，就会临时创建一个scope，变为当前的Execution context。执行完毕之后释放
- Lexical scope：代码静态的作用域
- 闭包：函数可以捕获静态作用域中的变量
- 如果我们定义了一个function，这个function本身能把它能触及的所有Lexical scope里的变量捕获（实际上是持有这个lexical scope），则待到它被调用的时候，可以直接使用这些被捕获的值
- this到底指向谁？
- this的值是被动态绑定的，调用的那一刻才被决定
- 默认：global object
- 被一个object invoke：obj.func1( a, b ); func1里面的this指向obj
- 被指定的object invoke：func2.call( obj2, a, b ); func2里面的this指向obj2
- 关键字new：var obj = new Constr( ); 用new调用的时候，构造器中的this为构造出来的新obj
- this的值是被动态绑定的，调用的那一刻才被决定
- JS中实现OO的几种方式：
- Prototype Chain ( delegate ) - 有创建新对象
- var rose = Object.create( gold );
- rose就可以通过委托的方式“使用”gold的属性和函数（如果rose本身没有相应属性的话）
- rose.func1( a ); 这种调用方式，无论func1是“属于”rose，或是属于gold，或者更上面的obj，func1里的this会指向rose
- Decoration - 没有创建新对象
- 定义一个carlike的funciton，接受一个object作为参数，给这个object添加一些属性，添加一些函数，最终返回这个被“装饰过”的object
- 需要添加的那些新函数，可以让所有的object都共享同一个，或是给每个object都“安装”相同的新函数
- 共享：节省内存
- 非共享：每个object的新函数都有针对每个object单独的闭包
- Prototype Chain ( delegate ) - 有创建新对象
var carlike = function (obj, loc) {
obj.loc = loc;
obj.move = move;
return obj;
};
var move = function() {
this.loc++;
};
var amy = carlike( {}, 1 );
var ben = carlike( {}, 9 );
amy.move();
ben.move();
// after refactor
// 每个被decorate过的obj都会有自己单独的move function
// 这是不把move function曝露在global scope下的代价
// 好处是每个obj的move function都会有自己单独的闭包变量（捕获的变量）
var carlike = function (obj, loc) {
obj.loc = loc;
obj.move = function() {
obj.loc++;
};
return obj;
};
var amy = carlike( {}, 1 );
var ben = carlike( {}, 9 );
amy.move();
ben.move();
- Functional Class - 有创建新对象
- 在一个function中直接构建一个全新的object，并返回
- 看起来比较像传统OO语言中的Class的构造器
// Version 1
var Car = function(loc) {
var obj = { loc: loc };
obj.move = move;
return obj;
};
var move = function() {
this.loc++;
};
// 没有使用new关键字
// 多个对象share同一个move函数
var amy = Car(1);
amy.move();
var ben = Car(2);
ben.move();
// Version 2
var Car = function(loc) {
var obj = { loc: loc };
// 非内建函数；给obj添加methods
extend(obj, Car.methods);
return obj;
};
// 这样就不会把methods曝露在global作用域下
// 而move这个function的lexical scope不在Car这个function中
Car.methods = {
move: function () {
this.loc++;
}
};
- Prototypal Class - 有创建新对象
- 使用了原型链（代理）模式的Functional Class，让所有的objects共享相同的functions
- 让每个新object的delegate都指向"Class"( constructor )的prototype，这样需要扩展所有object的能力，只需往"Class"的prototype添加函数即可
var Car = function(loc) {
// 新建的所有obj都会向Car.prototype这个对象delegate
// 无需再复制一次所有的functions
var obj = {Object.create(Car.prototype)};
obj.loc = loc;
return obj;
};
Car.prototype.move = function (){
this.loc++;
};
var amy = Car(1);
amy.move();
- Pseudoclassical Patterns - 有创建新对象( new )
- 使用new关键字
- Prototypal Class的简便形式
- 也是通过往constructor的prototype添加function，来扩展当前所有objects的能力
// 不同点
var Car = function(loc) {
// 如果是用new关键字invoke Car这个function
// 则可以省去下面2行注释的代码
// this obj = {Object.create(Car.prototype)};
this.loc = loc;
// return this;
};
// 共同点
Car.prototype.move = function (){
this.loc++;
};
var amy = new Car(1);
amy.move();
- Super and sub class
- 在Functional Class的基础上，实现类似“父类、子类”的功能（继承）
- super class是一个function，返回一个通用的obj
- child class也是一个function，调用super class的function获取obj之后，添加额外的定制，然后返回新的obj
// "super class"
var Car = function(loc) {
var obj = { loc: loc };
obj.move = function(){
obj.loc++;
};
return obj;
};
// "child class 1 不同点"
var Van = function(loc){
// 获取通用的obj
var obj = Car(loc);
// 添加不同点
obj.grab = function(){};
return obj;
};
// "child class 2"
var Cop = function(loc){
// 获取通用的obj
var obj = Car(loc);
// 添加不同点
obj.call = function(){};
return obj;
};
var cal = Cop(2);
cal.move();
cal.call();
- Pseudo-classical Subclass（比较复杂）
- 使用new关键字实现继承
- "子类"的构造函数中调用父类的构造函数，随后子类的object可以调用和父类对象相同的“属性”
- SuperclassConstructor.call( this, params );
- 原型链的建立，让子类除属性之外，还可以像"父类"对象委托函数的调用
- Subclass.prototype = Object.create( Superclass.prototype ); // 让Subclass.prototype重新指向一个新对象，这个新对象会向Superclass.prototype委托
- Subclass.prototype.constructor = Subclass; // 新对象的constructor还是指向Superclass，所以这里要重新设定一下
- 给Subclass.prototype添加新的function
var Car = function(loc) {
this.loc = loc;
};
Car.prototype.move = function(){
this.loc++;
};
var Van = function(loc){
// this = Object.create(Van.prototype);
// Key statement!
Car.call(this, loc);
// return this;
};
Van.prototype = Object.create(Car.prototype);
Van.prototype.constructor = Van;
Van.prototype.grab = function(){};
var zed = new Car(3);
zed.move();
var amy = new Van(9);
amy.move();
amy.grab();
- 大致总结：
- 以上7条中，2没有创建新的对象，1和后5条有创建新对象
- 3为最朴素的创建新对象的方法
- 4、5使用了原型链，5是4的简便用法
- 6、7是继承的实现：6比较简单( 基于3 )，7比较复杂
网友评论