读书笔记-JavaScript面向对象编程（二）
第5章 原型
5.1 原型属性（所有函数拥有一个prototype属性，默认为空对象）
5.1.1 利用原型添加方法和属性
function Gadget(name,color){ this.name=name; this.color=color; this.whatAreYou=function(){return 'I am a'+this.color+' '+this.name;} } //方案一，对象属性方法追加 Gadget.prototype.price=100;//属性 Gadget.prototype.rating=3;//属性 Gadget.prototype.getInfo=function(){return 'Rating'+this.rating+', price:'+this.price}//方法 //方案二，对象字面量赋值 Gadget.prototype={ price:100, rating:3, getInfo:function(){return 'Rating'+this.rating+', price:'+this.price} }
5.1.2 使用原型的方法与属性（由于js对象为引用，所以基于原型创建的所有对象（包括修改原型之前创建的）都会继承原型的改变）
5.1.3 自身属性和原型属性（优先查找自身属性，若没有再逐层向上级原型中查找）
5.1.4 利用自身属性重写原型属性（自身属性会覆盖原型属性，当删除自身属性后，同名原型属性将浮现，hasOwnProperty()是否自身属性）
5.1.5 isPrototypeOf()方法（o1.isPrototypeOf(o2)，o1在o2的原型链上返回true，即o2继承o1）
5.1.6 神秘的__proto__链接（IE不兼容，仅调试使用，与prototype不完全等价）
5.2 扩展内建对象
String.prototype.reverse=function(){//为字符串原型扩展翻转方法 return Array.prototype.reverse.apply(this.split('')).join('') }//先利用split将目标字符转换为数组，再利用数组方法翻转，最后通过join再链接为字符串
5.2.1 关于扩展内建对象的讨论（prototype利用扩展，YUI则反对；想通过原型为内建对象添加新属性，务必先检查该属性是否已存在）
5.2.2 一些原型陷阱（完全替换原型对象可能触发异常，constructor属性不可靠；重写对象的prototype时要重置constructor）
5.3 本章小结
5.4 练习题
1、创建一个名为shape的对象，并为该对象设置一个type属性和一个getType()方法
2、定义一个原型为shape的Triange()的构造器函数，用Triange()创建的对象应该具有三个对象属性a、b、c，分别表示三角形的三条边。
3、在对象原型中添加一个名为getPerimeter()的新方法
4、使用下面代码来测试之前的实现：
var shape={ type:'triangle', getType:function(){return this.type} } var Triangle= function(a,b,c){this.a=a;this.b=b;this.c=c;} Triangle.prototype=shape;
Triangle.prototype.constructor=Triangle; Triangle.prototype.getPerimeter=function(){return this.a+this.b+this.c} var t= new Triangle(1,2,3) console.log(t.constructor)//function (a,b,c){this.a=a;this.b=b;this.c=c;} console.log(shape.isPrototypeOf(t))//true console.log(t.getPerimeter())//6 console.log(t.getType())//triangle
5、用循环遍历对象t，列出其所有的属性和方法（不含原型部分）。
for(var prop in t){ if(t.hasOwnProperty(prop)){console.log(prop+':'+t[prop]);} }
6、修改上面的实现，使其能在下面的代码中正常工作
Array.prototype.shuffle=function(){ var arr=[],l=this.length; for(var i=0;i<l;i++){arr.push(this.splice(Math.floor(Math.random()*this.length),1)[0])} return arr; } console.log([1,2,3,4,5,6,7,8,9].shuffle());//[4, 9, 3, 2, 1, 6, 7, 8, 5]
第6章 继承
6.1 原型链
6.1.1 原型链示例
function Shape(){ this.name='shape'; this.toString=function(){return this.name;} } function TwoDShape(){ this.name='2D shape'; } function Triangle(side,height){ this.name='triangle'; this.side=side; this.height=height; this.getArea=function(){return this.side*this.height/2} }//接下来就是施展继承 TwoDShape.prototype=new Shape();//用new另建了一个新的对象实体，并赋值覆盖该对象的原型 Triangle.prototype=new TwoDShape();//这样确保继承实现后，对构造器进行修改不会影响该对象，因为继承的是构造器所建的实体
//重写prototype后重置constructor是个好习惯 TwoDShape.prototype.constranctor=TwoDShape; Triangle.prototype.constranctor=Triangle; var my=new Triangle(5,10) console.log(my.getArea());//25 console.log(my.toString());//继承的方法，具体步骤（遍历my对象属性没有找到，接着查看my.__proto__所指向的对象，即new TwoDShape()创建的实体，
//依然没找到，又继续查找该实体的__proto__所指向的对象，即new Shape()所创建的实体，找到toString方法，并在my对象中被调用，this指向my） //通过instanceof操作符，验证my对象同时是上述三个构造器的实例 console.log(my instanceof Shape)//true console.log(my instanceof TwoDShape)//true console.log(my instanceof Triangle)//true
6.1.2 将共享属性迁移到原型中去（必须在扩展原型对象之前完成继承关系的构建）
function Shape(){this.name='shape'}//使用new Shape()新建对象，每个实体都有全新的那么属性并占用独立空间 function Shape(){};Shape.prototype.name='shape';//属性移到原型后，使用new新建对象时，不再含自己独立的这个属性
6.2 只继承于原型
Triangle.prototype=Shape.prototype;//减少继承方法的查询步骤 Triangle.prototype.name='Triangle';//修改子对象原型后父对象原型也随即被改，即再new Shape()新建对象时，新对象name为‘Triangle’
//利用临时构造器new F()，解决修改子对象原型父对象也随之修改的问题 function Shape(){} Shape.prototype.name='shape'; Shape.prototype.toString=function(){return this.name;} function TwoDShape(){} var F=function(){} F.prototype=Shape.prototype; TwoDShape.prototype=new F(); TwoDShape.prototype.constructor=TwoDShape; TwoDShape.prototype.name='2D shape'; function Triangle(side,height){ this.side=side; this.height=height; } var F=function(){} F.prototype=TwoDShape.prototype; Triangle.prototype=new F(); Triangle.prototype.constructor=Triangle; Triangle.prototype.name='triangle'; Triangle.prototype.getArea=function(){return this.side*this.height/2}; my.__proto__.__proto__.__proto__.constructor;//Shape()
6.3 uber--子对象访问父对象的方式（uber是德语中super的同义词）
function Shape(){} Shape.prototype.name='shape'; Shape.prototype.toString=function(){ var result=[]; if(this.constructor.uber){result[result.length]=this.constructor.uber.toString()} result[result.length]=this.name; return result.join(','); } function TwoDShape(){} var F=function(){} F.prototype=Shape.prototype; TwoDShape.prototype=new F(); TwoDShape.prototype.constructor=TwoDShape; TwoDShape.uber=Shape.prototype; TwoDShape.prototype.name='2D shape'; function Triangle(side,height){ this.side=side; this.height=height; } var F=function(){} F.prototype=TwoDShape.prototype; Triangle.prototype=new F(); Triangle.prototype.constructor=Triangle; Triangle.uber=TwoDShape.prototype; Triangle.prototype.name='triangle'; Triangle.prototype.getArea=function(){return this.side*this.height/2}; var my=new Triangle(5,10) console.log(my.toString());//shape,2D shape,triangle
6.4 将继承部分封装成函数
function extend(child,parent){ var F=function(){}; F.prototype=parent.prototype; child.prototype=new F(); child.prototype.constructor=child; child.uber=parent.prototype; } extend(TwoDShape,Shape); extend(Triangle,TwoDShape);
6.5 属性拷贝
function extend2(child,parent){ var p=parent.prototype; var c=child.prototype; for(var i in p){c[i]=p[i]}; c.uber=p; }//与之前的extend方法相比，extend2为逐一拷贝，而非原型链查找，同时生成自己的属性，但对于非基本数据类型不可复制，只是拷贝引用而已
6.6 小心处理引用拷贝
var A=function(){},B=function(){}; A.prototype.stuff=[1,2,3]; A.prototype.name='a'; extend2(B,A);//让B继承A使用方法二 B.prototype.name+='b';//ab,A.prototype.name依然为a，因为拷贝的是值 B.prototype.stuff.push(4);//此时A和B原型上的stuff同时被修改，因为拷贝的是应用 B.prototype.stuff=['a','b','c']//如果完全重写事情就不一样了，A为原来，B为新的
6.7 对象之间的继承（不用构造器直接复制）
function extendcopy(p){ var c={}; for(var i in p){c[i]=p[i]} c.uber=p; return c; }
6.8 深拷贝（当遇到对象类型时，再次调用拷贝）
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; }
6.9 object()（用object函数来接受父对象，并返回一个以该对象为原型的新对象）
function object(o){ var n; function F(){} F.prototype=o; n=new F(); n.uber=o; return n; }//这个函数与extendcopy基本相同
6.10 原型继承与属性拷贝的混合应用
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; }//两对象o用于继承，stuff用于拷贝方法与属性
6.11 多重继承（一个对象中有不止一个父对象的继承）
function multi(){ var n={},stuff,j=0,len=arguments.length; for(j=0;i<len;j++){ stuff=arguments[j]; for(var i in stuff){n[i]=stuff[i]} } return n; }//内层循环用于拷贝属性，外层循环用于遍历多个父对象参数，若有相同属性后面替代之前
6.12 寄生式继承（拷贝一个父对象为that，然后为that添加更多属性）
var twoD={name:'2D shape',dimensions:2} function triangle(s,h){ var that=object(twoD);//应用上面的object()拷贝 that.name='Triangle'; that.getArea=function(){return this.side*this.height/2} that.side=s; that.height=h; return that; }//由于triangle()是一个返回对象的函数，不属于构造器，所以用不用new都可以 var t=triangle(5,10);console.log(t.getArea()); var t2=new triangle(5,5);console.log(t2.getArea());
6.13 构造器借用（指对象构造器通过call或apply来调用父对象的构造器）
function Shape(id){this.id=id} Shape.prototype.name='shape'; Shape.prototype.toString=function(){return this.name}; function Triangle(){Shape.apply(this,arguments)} Triangle.prototype.name='triangle'; var t=new Triangle(101); console.log(t.id)//101 t.toString()//"[object Object]"，之所以不包含Shape的原型属性，是因为没用调用new Shape创建实例，在创建t之前Triangle.prototype=new Shape()即可;
6.14 本章小结
6.15 案例学习：图形绘制
function Point(x,y){this.x=x;this.y=y;} function Line(p1,p2){ this.p1=p1;this.p2=p2; this.length=Math.sqrt(Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2)); } function Shape(){this.points=[];this.lines=[];this.init();} Shape.prototype={ constructor:Shape, init:function(){//初始化 if(typeof this.context==='undefined'){ var canvas=document.getElementById('canvas'); Shape.prototype.context=canvas.getContext('2d'); } }, draw:function(){//画线 var ctx=this.context; ctx.strokeStyle=this.getColor(); ctx.beginPath(); ctx.moveTo(this.points[0].x,this.points[0].y); for(var i=1;i<this.points.length;i++){ctx.lineTo(this.points[i].x,this.points[i].y)} ctx.closePath(); ctx.stroke(); }, getColor:function(){//随机获取色值 var rgb=[]; for(var i=0;i<3;i++){rgb[i]=Math.round(255*Math.random())}; return 'rgb('+rgb.join(',')+')' }, getLines:function(){//获取新增包含的线条 if(this.lines.length>0){return this.lines;} var lines=[]; for(var i=0;i<this.points.length;i++){lines[i]=new Line(this.points[i],(this.points[i+1])?this.points[i+1]:this.points[0])} this.lines=lines;return lines; }, getArea:function(){},//获取面积，需子对象自建覆盖 getPerimeter:function(){//获取周长 var perim=0,lines=this.getLines(); for(var i=0;i<lines.length;i++){perim+=lines[i].length} return perim; } } function Triangle(a,b,c){ this.points=[a,b,c]; this.getArea=function(){//海伦公式Area=p(p-a)(p-b)(p-c),p为半周长 var p=this.getPerimeter()/2; return Math.sqrt(p*(p-this.lines[0].length)*(p-this.lines[1].length)*(p-this.lines[2].length)) } } function Rectangle(p,side_a,side_b){ this.points=[p,new Point(p.x+side_a,p.y),new Point(p.x+side_a,p.y+side_b),new Point(p.x,p.y+side_b)]; this.getArea=function(){return side_a*side_b;} } function Square(p,side){Rectangle.call(this,p,side,side)} //以上所有构造器已经实现完成，接下来给它们制作继承关系 (function(){ var s=new Shape(); Triangle.prototype=s; Rectangle.prototype=s; Square.prototype=s; })() //以下测试 var t=new Triangle(new Point(100,100),new Point(300,100),new Point(200,0)); t.draw(); console.log(t.getPerimeter())//482.842712474619 console.log(t.getArea())//10000.000000000002 var r=new Rectangle(new Point(200,200),50,100) r.draw() console.log(r.getArea())//5000 console.log(r.getPerimeter())//300 var s=new Square(new Point(130,130),50) s.draw() console.log(s.getArea())//2500 console.log(s.getPerimeter())//200 new Square(new Point(100,100),200).draw()
6.16 练习题
利用上面的画布示例，尝试如下：
1、绘制一些Triangle、Sqiare、Rectangle图形（略）
2、天假更多图形构造器，例如Trapezoid、Rhombus、Kite、Diamond以及Pentagon等，如果还想对canvas标签有更多了解，也可以创建一个Circle构造器，重写父对象的draw方法。
function Trapezoid(p1,p2,side1,side2){//梯形 this.points=[p1,new Point(p1.x+side1,p1.y),new Point(p2.x+side2,p2.y),p2] this.getArea=function(){return (side1+side2)*Math.abs(p2.y-p1.y)/2} } Trapezoid.prototype=new Shape(); var tt=new Trapezoid(new Point(0,50),new Point(25,0),100,50) tt.draw() console.log(tt.getArea())//3750 console.log(tt.getPerimeter())//261.8033988749895 function Kite(p,d,b){//筝形 this.points=[p,new Point(p.x+d/2,p.y-d*b),new Point(p.x+d,p.y),new Point(p.x+d/2,p.y+d*(1-b))] this.getArea=function(){ return d*d/2;} } Kite.prototype=new Shape(); var ki=new Kite(new Point(0,100),60,1/3) ki.draw() console.log(ki.getArea())//1800 console.log(ki.getPerimeter())//172.11102550927978 function Rhombus(p,side){//菱形 Kite.call(this,p,side,1/2)//构造器借用 } Rhombus.prototype=new Shape(); var rh=new Rhombus(new Point(0,200),60) rh.draw() console.log(rh.getArea())//1800 console.log(rh.getPerimeter())//169.7056274847714 function Diamond(p1,p2,side1,side2){//钻石形 Trapezoid.call(this,p1,p2,side1,side2) this.points.splice(1,0,new Point(p1.x+side1/2,p1.y+side1/2*Math.tan(45*Math.PI/180))) } Diamond.prototype=new Shape(); var di=new Diamond(new Point(0,300),new Point(20,270),80,40) di.draw() function Pentagon(p1,side){//正五边形 Trapezoid.call(this,p1,new Point(p1.x+side*Math.cos(72*Math.PI/180),p1.y-side*Math.sin(72*Math.PI/180)),side+side*Math.cos(72*Math.PI/180)*2,side) this.points.splice(1,0,new Point(p1.x+(side+side*Math.cos(72*Math.PI/180)*2)/2,p1.y+(side+side*Math.cos(72*Math.PI/180)*2)/2*Math.tan(36*Math.PI/180))) } Pentagon.prototype=new Shape(); var pe=new Pentagon(new Point(0,450),80) pe.draw() function Circle(p1,r){//圆形 this.draw=function(){ var ctx=this.context; ctx.strokeStyle=this.getColor(); ctx.beginPath(); ctx.arc(p1.x,p1.y,r,0,2*Math.PI); ctx.closePath(); ctx.stroke(); } } Circle.prototype=new Shape(); var ci=new Circle(new Point(200,400),60) ci.draw()
3、考虑是否还有其他方式可以实现并使用这些类型的继承关系？
4、请选择一个子对象能通过uber属性访问的方法，并为其添加新的功能，使得父对象可以追踪该方法所属的指对象。例如我们可以在父对象中建立一个用于存储其子对象的数组属性。
