前端学习:JS面向对象知识学习(图解)

前端学习:JS面向对象知识学习(图解)

前端学习:JS(面向对象)代码笔记

JS面向对象图解知识全览

前端学习:JS面向对象知识学习(图解)_第1张图片

创建类和对象

方式1:使用Object()函数

前端学习:JS面向对象知识学习(图解)_第2张图片

方式2:使用自变量

前端学习:JS面向对象知识学习(图解)_第3张图片

方式3:使用工厂函数 创建多个对象

前端学习:JS面向对象知识学习(图解)_第4张图片

方式4:构造函数

前端学习:JS面向对象知识学习(图解)_第5张图片

静态成员和实例成员

静态成员

前端学习:JS面向对象知识学习(图解)_第6张图片

实例成员

前端学习:JS面向对象知识学习(图解)_第7张图片

原型

构造函数的原型

内存图

前端学习:JS面向对象知识学习(图解)_第8张图片

方式一

前端学习:JS面向对象知识学习(图解)_第9张图片

方式二

前端学习:JS面向对象知识学习(图解)_第10张图片

方式三

前端学习:JS面向对象知识学习(图解)_第11张图片

 

对象的原型

打印对象的原型

前端学习:JS面向对象知识学习(图解)_第12张图片

构造函数和原型中同时存在方法的时候

前端学习:JS面向对象知识学习(图解)_第13张图片

对象__proto__和构造函数的prototype

前端学习:JS面向对象知识学习(图解)_第14张图片

三角关系:构造函数 原型对象 对象/实例

前端学习:JS面向对象知识学习(图解)_第15张图片

属性查找规则

前端学习:JS面向对象知识学习(图解)_第16张图片

注意点

前端学习:JS面向对象知识学习(图解)_第17张图片

原生对象的原型

前端学习:JS面向对象知识学习(图解)_第18张图片

拓展内置对象

前端学习:JS面向对象知识学习(图解)_第19张图片

案例1:随机生成方块

前端学习:JS面向对象知识学习(图解)_第20张图片 

随机生成坐标tools.js

前端学习:JS面向对象知识学习(图解)_第21张图片

 新建方块box.js

前端学习:JS面向对象知识学习(图解)_第22张图片

案例2:贪吃蛇

前端学习:JS面向对象知识学习(图解)_第23张图片

你可能感兴趣的:(前端学习:JS面向对象知识学习(图解))