JS进阶
2018-09-07 16:49:14 2 举报AI智能生成
JS进阶思维导图大全（完整版）
作者其他创作
大纲/内容
创建对象
question：很难证明杯子是个杯子，
再讲讲函数
this
全局作用域指向window
对象的方法指向对象
arguments
对象，类数组，length属性
不要滥用，影响代码可读性
动态参数的场景
属性
name
length
arguments.length
prototype
方法
bind
bind也可以有多个参数，并且参数可以执行的时候再次添参数是按照形参的顺序进行的
注意
apply
apply方法和call方法有些相似，它也可以改变this的指向
同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组
call
通过在call方法，给第一个参数添加要把b添加到哪个环境中，简单来说，this就会指向那个对象
all方法除了第一个参数以外还可以添加多个参数
数据类型
First Class
可以作为函数的参数和返回值，也可以赋值给变量
Second Class
可以作为函数的参数，但不能从函数返回，也不能赋值给变量
Third Class
不能作为函数的参数
闭包closure
私有变量
访问私有变量的特权方法
构造函数
instanceof
Bottle
new
浪费内存
原型prototype
原型、构造函数和实例
constructor
读写
isPrototypeOf
引用类型造成数据污染
构造函数结合原型
完美的创建对象
属性的覆盖
属性的判断
in操作符
hasOwnProperty
继承
什么是继承
原型链继承
原型链：将子类和父类的原型串联起来
原型链继承的不足
constructor指向问题
将子类构造函数赋值给constructor
属性共享问题
引用类型数据的增删造成数据污染
参数
子类无法定义自己的color
构造函数继承
借用父类构造函数
可以传递参数
组合继承
组合继承的不足
最佳实践
1，继承构造函数的属性和方法，2，继承原型上的属性和方法
基于组合继承
不必重复调用父类构造函数，只需要继承原型
canvas入门
canvas(画布元素)
操作全在context上完成，context：背景，上下文
context.fillRect(x,y,宽，高)
context.strokeRect(x,y,宽，高)
方法
线条
context.beginPath();
context.moveTo();
context.lineTo()
context.closePath();
圆弧
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
子主题
文本
context.fillText(text,x,y)
context.strokeText(text,x,y)
context.font ='italic 60px serif' ;
给图形上色
context.fillStyle = color;
context.strokeStyle = color;
修改线宽
context.lineWidth=number;
擦出画布
context.clearRect(x,y,宽，高)
canvas进阶
加载图像
context.drawImage(image,x,y,[宽度]，[高度]);
图像裁剪
context.drawImage(image, source_x, source_y, source_width, source_height, x, y, width, heigh);
认识requestAnimationFrame
动画原理简介
早期动画循环
循环间隔 60Hz
setTimeout 和 setInterval 问题
requestAnimationFrame
requestAnimationFrame 的兼容使用
使用 requestAnimationFrame 实现动画
动画循环
更新操作
清除操作
绘制操作
键盘事件处理
按键相关事件
keydown
keypress
keyup
按键过程
键码（keyCode）对照表
碰撞检测
碰撞检测关键步骤
计算碰撞
矩形物体碰撞检测
圆形物体碰撞检测
碰撞后的处理
0 条评论
下一页
