[妙味课堂] JS面向对象及组件开发.pdfVIP

目 录 01 JS面向对象及组件开发 02 传统的过程式编写选项卡 03 用面向对象封装通用选项卡 04 控制多个选项卡自动播放 05 用面向对象编写拖拽 06 JS面向对象及组件开发 07 hasOwnProperty和constructor的使用 08 instanceof运算符的使用 09 利用toString做类型判断 10 什么是面向对象的继承 11 面向对象之拷贝继承 12 编写继承的拖拽 13 继承的其他形式之类式继承 14 继承的其他形式之原型继承 15 组件开发是什么 16 给拖拽组件配置不同参数 17 封装弹框组件 18 使用对象标记已弹出弹框 19 复杂组件开发之自定义事件 20 原生JS实现自定义事件 21 自定义事件实例 22 基于JQ的选项卡组件开发 本文档使用 看云 构建 - 2 - 01 JS面向对象及组件开发 01 JS面向对象及组件开发 #JS面向对象及组件开发 ###面向对象编程的特点 抽象 ：抓住核心问题 封装 ：只能通过对象来访问方法 继承 ：从已有对象上继承出新的对象 多态 ：多对象的不同形态 ###工厂方式与构造函数 function CreatePerson(name){ var obj new Object(); name; obj.showName function(){ alert(); }; return obj; } var p1 new CreatePerson(小明 ); p1.showName(); var p2 new CreatePerson(小强 ); p2.showName(); 当new去调用一个函数 ：这个时候函数中的this就是创建出来的对象 ，而且函数的返回值直接就是this(隐 式返回) ，也就是说最后一句 return obj 可以不写。上面的函数可以优化成如下 ： function CreatePerson(name){ name; this.showName function(){ alert(); } } var p1 new CreatePerson(小明 ); p1.showName(); var p2 new CreatePerson(小强 ); p2.showName(); new后面调用的函数 ：叫做构造函数 ###对象引用是什么和它的问题 本文档使用 看云 构建 - 3 - 01 JS面向对象及组件开发 function CreatePerson(name){ name; this.showName function(){ alert(); } } var p1 new CreatePerson(小明 ); var p2 new CreatePerson(小强 ); alert(p1.showName p2.showName); // false var a [1,2,3]; var b [1,2,3]; alert(a b); //false var a 5; var b a; b + 3; alert(b); // 8 alert(a); // 5 基本类型 ：赋值的时候只是值的复制 var a [1,2,3]; var b a; b.push(4); alert(b); // 1,2,3,4 alert(a); // 1,2,3,4 对象类型 ：赋值不仅是值的复制，而且也是引用的传递 var a [1,2,3]; var b a;