JavaScript 面向对象应用

JS面向对象编程(OOP)特性:
抽象:抓住核心问题
封装:不考虑内部实现,只考虑功能使用
继承:从已有对象上,继承出新的对象
-多重继承
-多态 对强语言比较有用

对象的组成
方法——函数:过程、动态的
属性——变量:状态、静态的
变量和属性相比变量是自由的不属于任何人,属性属于任何对象

为对象添加方法和属性
window:全局的方法属于window之下
this——当前的方法属于谁(当前发生事件的对象)
不能在系统对象中随意附加方法、属性,否则会覆盖已有方法、属性
object对象
工厂方式(缺陷1、没new 缺陷2、函数重复,资源浪费)

See the Pen Object by Adele (@qianduank) on CodePen.

调用函数时候加new时this指向新创建的对象

See the Pen Object2 by Adele (@qianduank) on CodePen.

原型——prototype
原型相当于css中的class,修改他可以影响一类元素
在已有对象中加入自己的属性、方法
原型修改对已有对象的影响
为Array添加sum方法
给对象添加方法,类似于行间样式
给原型添加方法,类似于class

See the Pen Object3 by Adele (@qianduank) on CodePen.


类(Array)好比生产产品模子 对象(arr)类似于产品成本
var arr = new Array(1,2,3)
原型是向类的上面加方法

原型的小缺陷
无法限制覆盖

用混合方式构造对象
混合的的构造函数/原型方式
Mixed Constructor Function/Prototype Method
原则
构造函数:加属性
原型:加方法
对象命名规范
类名首字母大写

See the Pen Object4 by Adele (@qianduank) on CodePen.

实例:面向对象的选项卡

See the Pen TabSwitch-object by Adele (@qianduank) on CodePen.

Json方式的面向对象
适用于整个程序里只有一个,写起来比较简单
把方法包在一个Json里
有人管他叫——命名空间
在公司里,把同一类方法,包在一起

See the Pen mmkj by Adele (@qianduank) on CodePen.

面向对象的拖拽
改写原有拖拽
对象的继承
什么是继承
在原有类的基础上,略作修改,得到一个新的类
不影响原有类的功能
instanceof运算符
查看对象是否是某个类的实例

限制范围的拖拽类
构造函数伪装
属性的继承
原理:欺骗构造函数
call的使用
call 调用函数 改变函数执行时的this
原型链
方法的继承
原理:复制方法
覆盖原型和方法复制

本地对象(非静态对象)
什么是本地对象
常用对象
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error
内置对象(静态对象)
什么是本地对象
Global、Math
宿主对象(由浏览器提供的对象)
DOM、BOM

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注