读书笔记-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属性访问的方法,并为其添加新的功能,使得父对象可以追踪该方法所属的指对象。例如我们可以在父对象中建立一个用于存储其子对象的数组属性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

go语言json操作指南

1、Go语言的JSON 库   Go语言自带的JSON转换库为 encoding/json 1.1)其中把对象转换为JSON的方法(函数)为 json.Mar...

33212
来自专栏salesforce零基础学习

salesforce lightning零基础学习(五) 事件阶段(component events phase)

上一篇介绍了lightning component events的简单介绍。此篇针对上一篇进行深入,主要讲的内容为component event中的阶段(Pha...

650
来自专栏大闲人柴毛毛

Java8新特性——StreamAPI(二)

1. 收集器简介 收集器用来将经过筛选、映射的流进行最后的整理,可以使得最后的结果以不同的形式展现。 collect方法即为收集器,它接收Collector接...

2725
来自专栏java达人

如何在Java中避免equals方法的隐藏陷阱(二)

陷阱3:建立在会变化字段上的equals定义 让我们在Point类做一个非常微小的变化 public class Point { private int...

1828
来自专栏从流域到海域

Java Beans

JavaBeans事实上有三层含义。首先,JavaBeans是一种规范,一种在Java(包括JSP)中使用可重复使用的Java组件的技术规范,也可以说成我们常...

1716
来自专栏Android 研究

Retrofit解析8之核心解析——ServiceMethod及注解2

这个方法内部很简单,主要就是通过遍历annotations,内部调用parseParameterAnnotation来获取ParameterHandler对象并...

602
来自专栏猿人谷

一个正则表达式测试(只可输入中文、字母和数字)

  在项目中碰到了正则表达式的运用,正则还是非常强大的,不管什么编程语言,基本上都可以用到。之前在用java时特别是对用户名或密码使用正则非常爽,写脚本上用正则...

2796
来自专栏blackheart的专栏

[C#1] 8-数组

1.数组概述 声明数组: //每个元素初始化为0,虽然数组元素是值类型,但是却是分配在托管堆中的; int[] myArray=new int[100]; //...

1767
来自专栏java学习

重要通知!小编出新的Java练习题已经公布答案了!!!

一、选择题和问答题 1、在一个java原文件中,import, class, package语句的顺序是(D)。 A. import classpackage ...

3398
来自专栏java架构师

Unit断言学习

[TestMethod]—用于把一个方法标记为一个测试方法。当你运行你的测试时,仅标记有这个属性的方法才能够运行。 [TestClass]—用于把一个类标记为...

26111

扫描关注云+社区