Python和JS有很多的不同点，最近看到了类，就总结一下在类上它们有什么不同。

__block1__

#Python
__metaclass__=type #新式类
class SongBird:
song = 'squawk'
def sing(self):
print self.song

#新建一个实例
bd = SongBird()
bd.sing()
#squawk

__block2__

//JS
//构造函数
function SongBird() {
this.song = 'squawk';
this.sing = function(){
return this.song;
}
}

SongBird.prototype = {
sing: function() {
return this.song
}
}

//新建一个实例
bd = new SongBird();
bd.sing();
//"squawk"

##### 形式

Python有自己的一套魔法方法，若要对类进行初始化，会用到__init__()，它在新建实例的时候自动会被调用，可以用这个方法来进行初始化；JS一贯的用或运算来进行初始化，e = e || window.event，或者在新建实例的时候把要初始化的值先传进去。

##### 类的继承

Python中子类可以扩展超类（基类）的定义，通过将其他类名写在class语句后的圆括号内可以指定超类

__block3__

class Filter:
#魔法方法，新建实例时会自动初始化
def __init__(self):
self.blocked = []

def filter(self,sequence):
#列表推导式，滤除sequence中与self.blocked内容相同的成员
return [x for x in sequence if x not in self.blocked]

#指定超类Filter，即继承Filter中的方法和属性
class SPAMFilter(Filter):
def __init__(self):#重写了Filter超类中的__init__方法
self.blocked =['SPAM']

>>>f = Filter()
>>>f.filter([1,2,3])
[1,2,3]

>>>s = SPAMFilter()
>>>s.filter(['SPAM','apple','SPAM','orange','SPAM','SPAM','watermellon'])
['apple','orange','watermellon']


JS的继承采用原型机制，一个对象的原型继承另一个原型，在继续继承下去就会形成一个原型链。在调用一个方法或属性时，首先从该对象的原型中去找，如果没找到再在上一级原型中找，往复下去知道找到该方法或属性(如果不存在就会返回undefined)。

__block4__

function Animal() {
this.canEat = true;
}
Animal.prototype = {
eat: function(){
if(this.canEat)
return "Ahaaaa!";
},
sing: function(){
return "mama";
}
}

function Bird() {
this.song = "squwak";
}
//以Animal的实例为原型
Bird.prototype = new Animal();
Bird.prototype.sing = function(){
return this.song;
}

>bd = new Bird();
>bd.sing();
"squwak"
>bd.eat();
"Ahaaaa!"


##### 重写了父类的方法怎么重新使用？

Python有两种方法，调用超类构造方法的未绑定版本，或者使用super函数。

__block5__

#调用超类构造方法的未绑定版本
__metaclass__ = type #使用新式类
class Bird:
def __init__(self):
self.hungry = True

def eat(self):
if self.hungry:
print 'Aaah...'
self.hungry = False
else:
print 'No, thanks!'

class SongBird(Bird):

def __init__(self):
#Bird.__init__(self)
self.sound = 'squawk'

'''
def __init__(self):
super(SongBird,self).__init__()
self.sound = 'squawk'
'''

def sing(self):
print self.sound

#Bird.__init__(self)未加这句话之前执行结果
>>>sb = SongBird()
>>>sb.sing()
squawk
>>>sb.eat()
AttributeError: SongBird instance has no attribute 'hungry'

#加了Bird.__init__(self)后的执行结果
>>>sb = SongBird()
>>>sb.sing()
squawk
>>>sb.eat()
Aaah...


JS需要调用父类的构造函数，可以用call调用，this指向子类。假设有两个类，子类是Chinese，父类是Person。要在Chinese的实例中调用Person的方法，可按如下方法。第一个参数是this，后面的参数是父类新建实例是需要的参数
Person.call(this[, arg1[, arg2[, ...]]]);

##### 前期准备（父元素）:
transform-style: flat | preserve-3d


flat表示子元素位于父元素平面内，preserve-3d表示子元素在3维空间内。

perspective: none | length


perspective表示z=0平面与用户之间的距离，0或负值无效。z>0的3D元素会变得更大，z<0的3D元素会变得更小。按需要设置，如果设的过小就好比自身是一只蚂蚁在看一个庞然大物,会有较大的形变，所以一般设的较大，但过大就没有意义了，可以自己按需要调节。我设的是1200px.

perspective-origin: 50% 50%(Initial value)| 百分比|长度|…


perspective-origin决定了用户视线的焦点，被perspective用作消失点(vanishing point)。

##### 子元素的位置摆放:

19号阿里巴巴的笔试题中有一题是这样的：当图片小于容器时用css实现水平垂直居中，当时特没水准得写了:

img {
margin: auto auto;
}

div {
margin: 0 auto;
}

img是行内元素，设置margin: auto也不起作用。

live demo: http://jsfiddle.net/BJRz7/2/

##### closePath()

closePath()的作用在于它可以把形状的起点和末点仪直线的形式连起来。如果之前没有定义beginPath()，则以最开始画的点为起点。否则就以最近的beginPath()为起点。beginPath()会是下个形状和上一个形状脱离，重新选择绘图起点。最好是成对出现，这样就可以避免形状之间的牵连(上个形状的末点会合下个形状的起点连在一起)。

##### save()和restore()

save()restore()是比较使用的工具,它们分别用于保存当前绘图状态，获取上一次存储的绘图状态。绘图状态是指当前绘图说用的样式(style)和变形(transform),包括strokeStylefillStyle,globalAlphalineWidth,lineCaplineJoinmiterLimit,shadowOffsetXshadowOffsetY,shadowBlurshadowColorglobalCompositeOperation等属性以及一transform和clipping path。绘图状态被存在一个栈(stack)内,每一次调用save()都会把当前的绘图状态压到栈内。每一次调用restore()都会把靠近的存储状态调出来，回到那个绘图状态。这样就可以很方便的在不同的状态之间转换，而不用重新设置。

(function(){
var canv = document.getElementById('canvas')
,   contxt = canv.getContext('2d');
contxt.fillStyle = '#379aff';
contxt.arc(200,200,100, 0, 2*Math.PI);
contxt.fill();
contxt.save();
contxt.fillStyle = 'white';
contxt.beginPath();
contxt.arc(200,200,80, 0, 2*Math.PI);
contxt.closePath();
contxt.fill();
contxt.save();
contxt.beginPath();
contxt.fillStyle = 'black';
contxt.arc(200,200,60, 0, 2*Math.PI);
contxt.fill();
contxt.restore();//白色
contxt.beginPath();
contxt.arc(200,200,40, 0, 2*Math.PI);
contxt.fill();
contxt.restore();//蓝色
contxt.beginPath();
contxt.arc(200,200,20, 0, 2*Math.PI);
contxt.fill();
})();

##### 第一步：设置一些全局变量，以便各个函数能够随时读取。

index为待猜测字母在letters数组中的索引值，它由初始化函数initGame()产生，index = Math.floor(Math.random()*letters.length);js的Math.random()产生的是一个大于0小于1的双精度浮点数。

##### 第二步：主要函数

drawScreen()就没有什么悬念了，都是一些基本的操作，不做展示。还需值得一提的是canvas的toDataURL()，它能将canvas以图像的形式导出。但是从它的名字可以看出，它将返回的是图像的数据，以便存储或导出。

function createImageDataPressed (e) {
window.open(canv.toDataURL(),"cavasImage","left=0,top=0,
width="+canv.width+",height="+canv.height+",toolbar=0,
resizable=0");}

live demo: http://www.tomo.im/guess-game

##### alt

• 当图片没有什么意义只用作装饰时，  alt="" ；
• 如果图片包含了信息，text需要对信息进行说明；
• 当图片包含在链接，即<a>标签内，text需要说明链接要跳转到哪里去；

##### title

<a href="www.xxx.com"><img alt="share page" title="share with others" src="images/share.png"></a>

title不存在时，则显示alt的值。在firefox和chrome下都不显示任何文字。实际上这是IE的一种错误行为，它并不符合HTML规范。

-----部分引用自The Power of Visual Communication

• 收获1：最近有ppt要讲，要多注意使用图像，或是流程图，而不是单纯的文字。
• 收获2:  网站设计很重要，好的设计会让用户更加信赖这个网站。
• 注意：讲了图像的好，当然也不能极端，图像和文字的完美结合才是最完美的。

This week's BigBang is so sweet and offers a good idea for telling someone something when he is curious about the truth but can't face himself if he knows the truth. The "someone" is Howard. His father left him and his mother when he was young. So he hates him but on the other hand, he is curious about the reason why his father abandoned them. There came the letter. In fact, it was a letter years before when Howard was 18, that is to say in the year when Howard became an adult and deserved the truth. It had been hidden by Howard in the closet and was found by Sheldon when he helped arrange their closet and our responsible Sheldon read the letter. After Howard made his mind and set the letter on fire, the only one who knows the content of the letter was Sheldon and those guys made their own way to make Sheldon reveal the information about the letter and they succeseed. Howard freaked out and ran off when he knew that all of his friends knew the information. Finally, his friends came up with kind of a cool solution. That is everyone made his own copy of the information and told  Howard. What Howard needed to do was to guess which one is real.

Raj: It was a card for your 18th birthday. Inside it said,"Happy birthday,Howard. I love you. Dad" oh, and it was a Far side card(搞笑贺卡). The one where the frog has its tongue stuck to the underside of an airplay. Thinks it's a fly.

Sheldon: It was a map leading to the lost treasure of famous pirate One-Eyed Willy.(the plot for Goonies)

Amy: Your father was in the auditorium at your high shcool graduation. And he cried because he was so proud of you.(Sheldon immediately pointed out it was made up by Amy)

Penny: It was a letter explaining that your dad wasn't who he said he was. Eventually his other life caught up to him. The only way to keep you and your mom safe was to leave.

Leonard: Your dad wrote about how family is the most important thing and that you should never throw it away like he did.

Bernadette: (she paused and said)Inside the envelope was a picture of your dad holding you the day you were born. On the back he wrote,"Howard, my son, my greatest gift."

##### Here is my guess

What Raj said is obviously made up. It perfectly matches his simple mind and cold humor. Sheldon's is the plot of _Goonies _and Amy's is the most sweet one. We can see that inside Amy, there is a heart eager for romance. Unfortunately, Sheldon leaked  the truth immediately. Penny is different from these scientists. She is a social woman with a lot of experience and sees the same kind of plot of Howard's life often. So she gave the realistic one. It can also be fake. What Leonard said sounds like  some suggestion to Howard as a friend that he should value the family and should not abandon it in a stride. Finally, Bernadette,a picture. I can't tell which is the real one between Leonard's and Bernadette's. But Bernadette is Howard's wife. She is the very one who should tell the truth.That's my guess.

what I want to say is no matter who really expressed  what Howard's father wanted to say, all of this is the wish and blessing to Howard. I envy him for having so many good friends.

canvas以其元素的左上角顶点为原点，向右为横坐标正方向，向下为纵坐标正方向(viewport 和 document也一样)。上图的PI值就是在这样一个坐标下确定的，和我们学过的坐标是一样的。有了四个方向上的PI值就可以按照顺时针或是逆时针方向很容易的选择角度了。

##### 心得：
• 还有一点要注意！canvas的默认大小是300px * 150px，有时候我们不需要那么大，或是需要更大。这时候可以设置canvas的width值和height值，这里设置的方法并不是像第一块代码的注释那样对css样式进行修改，而是：

canv.setAttribute("width","300");
canv.setAttribute("height","300");
或是
canv.width = "300";
canv.height = "300";

这修改的只是canvas能够渲染的面积，并不会对绘制的图进行缩放，而上面代码中的注释：canv.style.width=“300px"; canv.style.height=”300px“;（或者直接在css中改）则会对图进行缩放，它会根据canvas的默认值300px * 150px按比例进行缩放，现在x轴方向没变，y轴方向加倍了。如下图：

• There are two kinds of pain.

痛苦分两种。

• The sort of pain that makes you strong

一种让你变得跟强

• or useless pain

另一种毫无价值

• The sort of pain that's only suffering.

只是徒添折磨

• It was a hit and run.

肇事逃逸

• I love that woman.I love her more than sharks love blood.

我爱那个女人，甚于鲨鱼爱鲜血。

• However we do this, we'll also need a buffer.

不管我们打算怎么做，得找个中间人。

• You mean an errand boy?

找个傀儡吗？

• Okay, i'll keep my ear to the ground.

好，我会留意的。

• A person's character isn't determined by how he or she enjoys victory， but rather how he or she endures defeat. Nothing can help us endure dark times better than our faith.

一个人的品行不取决于这人如何享受胜利，而在于这人如何忍受失败。没什么比信仰更能支撑我们度过艰难时光了。

• We're going to let some people go.

我们要裁员。

• That would be half of our staff?

裁掉一半么？

• We have to carve out some room. We are a charity, but not for our employee.

我们必须腾出些位置。我们是慈善机构，但不服务于职员。

• We've plateaued.

发展遇到了瓶颈。

• Driving under influence.

酒后驾车。

• cover to cover.

从头到尾。

• In a town where everyone's so carefully reinventing themselves, what I like about Freddy is that he doesn't even pretend to change.

这个城市的每个人都在精心地改头换面，弗莱迪的可贵之处在于他甚至不装作要改变。

• They talk while I sit quitely and imagine their lightly salted faces frying in a skillet.

他们谈话而我安静地坐着，想象他们淡腌过的脸在煎锅中炸。

• You are well aware that I do not drop the ball on things like this.

你知道我不会在这种事上犯错。

• He chose money over power. In this town, a mistake nearly everyone makes. Money is the McMansion in Sarasota that starts falling apart after ten years. Power is the old stone building that stands for centuries.

为了钱而放弃了权利。这个城市里，几乎人人都犯了这个错。金钱是萨拉索塔的巨无霸豪宅，保质期就只有十年。权力是古老的石砌建筑，能屹立数百年。

• What a martyr craves more than anything is a sword to fall on, so you sharpen the blade, hold it at the right angle and then 3, 2, 1...

烈士最渴求的就是壮烈牺牲，所以你磨好兵刃，调整好角度默数三二一。

• Tomo and Jude was appetizers, Ray is the meal.

Tomo和Jude不过是开胃菜，Ray才是主菜。