登录免费注册



JS进阶

首页  思维导图  详情



JS进阶

2018-09-07 16:49:14   2  举报





AI智能生成

JS进阶思维导图大全（完整版）

javascript

模版推荐

作者其他创作

大纲/内容

创建对象

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）对照表

碰撞检测

碰撞检测关键步骤

计算碰撞

矩形物体碰撞检测

圆形物体碰撞检测

碰撞后的处理

 Collect

Get Started

架构师核心能力进阶

 Collect

Get Started

js原理

 Collect

Get Started

9-22 EDM

 Collect

Get Started

树脂块根管形状一致性差













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document