Object-Oriented JavaScript笔记(五)

Posted on 2012/05/25 by 枯藤昏鸦

Object-Oriented JavaScript 笔记
Object-Oriented JavaScript笔记(一)
Object-Oriented JavaScript笔记(二)
Object-Oriented JavaScript笔记(三)
Object-Oriented JavaScript笔记(四)
Object-Oriented JavaScript笔记(五)
Object-Oriented JavaScript笔记(六)
Object-Oriented JavaScript笔记(七)

第六章继承

空的构造函数—new F()
用于解决原型链上的属性被覆盖的问题。

var extend = function(origin, target){
var F = function(){};
F.prototype = origin.prototype;
target.prototype = new F();
target.prototype.constructor = target;
};
 
var A = function(){};
A.prototype.name = 'A';
A.prototype.toString = function(){ return this.name};
 
var B = function(){};
extend(A,B);
B.prototype.name = 'B';
 
/*
var a = new A();
var b = new B();
b instanceof B
true
b instanceof A
true
a instanceof A
true
a instanceof B
false
*/

Uber 访问父方法。

var extend = function(origin, target){
var F = function(){};
F.prototype = origin.prototype;
target.prototype = new F();
target.prototype.constructor = target;
target.uber = origin.prototype;
};
 
var A = function(){};
A.prototype.name = 'A';
A.prototype.toString = function(){
var result = [];
if (this.constructor.uber){
result[result.length] = this.constructor.uber.toString();
}
result[result.length] = this.name;
return result.join(', ');
};
A.prototype.show = function(){
console.log('A show');
};
var B = function(){};
extend(A,B);
B.prototype.name = 'B';
B.prototype.show = function(){
this.constructor.uber.show();
console.log('B show');
};
/*
var a = new A();
var b = new B();
b instanceof B
true
b instanceof A
true
a instanceof A
true
a instanceof B
false
*/

用函数来实现继承（注：实际上上面的两个示例的extend已经是被我封装过的了）

var exntend = function(Child, Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
};

复制属性

function extend2(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}

当复制引用带来的问题

修改引用对象会导致原型的也被修改。

从对象中继承：

浅拷贝

function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}

深拷贝：

function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}

object()构造起，老道提议的形式。

function object(o) {
function F() {}
F.prototype = o;
return new F();
}

混合原型拷贝和属性继承（很多时候需要继承一个对象，并给它添加一些属性用）

function objectPlus(o, stuff) {
var n;
function F() {}
F.prototype = o;
n = new F();
n.uber = o;
for (var i in stuff) {
n[i] = stuff[i];
}
return n;
}

多重继承，说白了就是按顺序进行属性复制，后出现的覆盖已经存在的。

function multi() {
var n = {}, stuff, j = 0, len = arguments.length;
for (j = 0; j < len; j++) {
stuff = arguments[j];
for (var i in stuff) {
n[i] = stuff[i];
}
}
return n;
}

-EOF-

Chrome For Mac 离线安装包下载

Posted on 2012/05/22 by 枯藤昏鸦

以前写过一篇Chrome离线安装包下载方法是用于Windows的，今天重装了Mac，由于最新的版本不稳定，所以还是下载老版本。网上其它站点下载的不可信，得从Google官方的站点下才行，终于，偶还真把 Google Chrome 18.0.1025.168这个版本给下载下来了。
实际下载地址：

http://dl.google.com/chrome/mac/GoogleChrome-~~18.0.1025.168~~.dmg

在Chrome Releases Blog查到对应的版本号，替换即可。
-EOF-

Object-Oriented JavaScript笔记(四)

Posted on 2012/04/10 by 枯藤昏鸦

第五章原型

原型链继承：new 出来的对象仍能继承到给原型prototype添加的方法

给实例添加与原型属性同名的属性，会隐藏原型链属性。
>>> var Class = function(){};
>>> Class.prototype.name = ‘John’;
>>> var toy = new Class()
>>> toy.name = ‘Tom’;
>>> toy.name
“Tom”
>>> delete toy.name
>>> toy.name
“John”

并不是所有的属性都会在for in中被枚举出来。
判断属性是自身属性还是原型链上的属性使用hasOwnProperty()
propertyIsEnumerable()对于prototype上的属性都会返回false，虽然他们都能在for in中被枚举出来。

isPrototypeOf()判断一个对象是否是另一个对象的原型。

Prototype陷阱
prototype对象被替换后，实例的原型链仍然是存在的
prototype.constructor并不可靠
介于此，重写prototype后，最好重置constructor (这里的确很让人迷惑)
－EOF-

新项目: Story Board

Posted on 2012/04/03 by 枯藤昏鸦

大约在前年，我就开始使用Python写Blog程序并将其Hosted在GAE上，并一度有将其开源的打算，后由于GAE数据库读取价格策略改变，代价太高而放弃；期间还写了一个简单的图片存储程序承诺将其开源，由于代码过于草稿没时间整理也一拖再拖。两者，代码至今都没有释放出来。

而在今年年初，GAE完美支持Django+MySQL，给原本失去的希望又重新点燃，用其托管一个小访问量的站点又有了规避方案，另一方面Cloud SQL可以方便的导出数据，数据备份不需要再经过复杂的操作。在二月结束的时候，我写了一个小的网站原型，后经过改进，并将其命名为Story Board托管在GitHub上开源出来。

同时用它替换原来的Oh Bug!。希望Oh Bug!不再单单只是一个Blog，也是一个小众技术讨论区，欢迎任何人参与进来讨论～

Project Story Board
https://github.com/darcyliu/storyboard

Oh Bug!
http://www.ohbug.com/

You are very welcome.

-EOF-

实现JavaScript类继承(inherits)

Posted on 2012/03/22 by 枯藤昏鸦

简单实现了个JavaScript类继承（比下午在公司实现的要简单得多），继承prototype方法和静态方法，实际使用过程中mix函数还需要丰满一下。这东西水很深，自己也一知半解的，不多说直接放代码。

Function.prototype.method = function(name,fn){
this.prototype[name] = fn;
return this;
}
Function.method('inherits',(function(){
function mix(a,b){
for(var i in b){
//replace
if(typeof a[i] == 'undefined'){
a[i] = b[i];
} 
}
}
return function(Parent){
var fn = function(){};
mix(this.prototype,Parent.prototype);
mix(this,Parent);
this.__super__ = Parent;
//static method
//object.__super__.demo
 
//prototype method
//object.__super__.prototype.hidden
return this;
};
})());
 
 
var a = function(){};
var b = function(){};
var c = function(){};
var d = function(){};
a.prototype.show = function(){
console.log('a show');
};
b.prototype.hidden = function(){
console.log('b hidden');
};
a.test = function(){
console.log('a test');
};
b.demo = function(){
console.log('b demo');
};
 
//usage
b.inherits(a);
c.inherits(a);
d.inherits(b);

-EOF-

未完待续

To Be Continued

Object-Oriented JavaScript笔记(五)

Chrome For Mac 离线安装包下载

Object-Oriented JavaScript笔记(四)

新项目: Story Board

实现JavaScript类继承(inherits)