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
*/

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
*/

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;
};

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 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 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;
}

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 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 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;
}

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);

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

Category Archives: 就是不分类

Object-Oriented JavaScript笔记(五)

Chrome For Mac 离线安装包下载

Object-Oriented JavaScript笔记(四)

新项目: Story Board

实现JavaScript类继承(inherits)