1、面向对象概念
什么是对象
万事万物皆对象
用于描述一个事物的所有信息的整体
对象特性 ： 属性 方法
数据类型 ： 基本类型 对象类型（引用类型）
对象类型的数据就会有属性和方法
例如 ：
var num = 90; 基本类型数据 没有属性 方法 num.index = 1; alert( num.index ) undefined var arr = []; arr.index = 2; alert( arr.index ) 2 arr.sum = function(){ 方法 (私有的) return eval( arr.join("+") ) } arr.sum() function sum(){ 函数(全局) } sum()
函数和方法 ：
方法 属于 函数
函数 包含 方法
var oDiv = document.getElementById("idname"); typeof oDiv oDiv.aa = 90; alert( oDiv );
面向对象是一种编程思想
面向过程 和 面向对象 ：
面向过程 ： 体现的是一种数学逻辑
面向对象 ： 体现的是一种生活逻辑
例如 ： 一条马路长2000米 ， 人走路的速度 20米/分 走完这条路需要多久？
var len = 2000, speed = 20;
时间 = 长 / 速度 -- 面向过程
面向对象 ：
路 长: 2000
人 速度 ： 20
时间 ： 路.长度 / 人.速度
面向对象好处 ：
功能独立 便于后期的管理和维护
防止全局变量污染
面向对象缺点 ：
开发周期长 成本高
什么是类？ （js中没有类的概念 ， js中的构造函数 就是 类）
类和对象的区别
类 ： 类是具有相同属性和行为的一类事物的总称
类和对象的区别 ：
类是对象的抽象化 （类是对象的抽象）
对象是类的具象化 (对象是类的实例) var arr = new Array() 实例化一个对象
先有对象还是先有类？？
先有对象 后有类
instanceof 判断一个对象属于哪一个类
用法 : 对象 instanceof 构造函数 返回true/false
2、构造函数 : 使用new关键字创建出对象的函数 就是构造函数
特点 ：
构造函数的函数名一般是大驼峰
构造函数中的this 指向构造函数new出来的对象
//创建对象 Object
var obj = {};
var obj = new Object();
var arr = new Array();
//判断对象属于哪一类?
console.log(obj instanceof Array);
console.log(arr instanceof Array);
<script> //创建对象 Object //var obj = {}; var obj = new Object(); //为创建的对象添加属性或功能 obj.name = "jack"; obj.age = 18; obj.study = function(name){ console.log( name + "学习ing" ); } console.log( obj.name , obj.age ); obj.study( obj.name ); var obj2 = new Object(); //为创建的对象添加属性或功能 obj2.name = "lily"; obj2.age = 13; obj2.study = function(name){ console.log( name + "学习ing" ); } </script>
<script> /*function Animal(){ } //a1 就是在构造函数Animal上new出来的对象 var a1 = new Animal(); //为创建的对象添加属性和方法 a1.name = "小白"; a1.age = "2"; a1.running = function(){ return this.name + "在奔跑"; } alert( a1.running() ); var a2 = new Animal(); a2.name = "小白"; a2.age = "2"; a2.running = function(){ return this.name + "在奔跑"; }*/ function Student(name,age){ //为创建的对象添加属性和方法 this.name = name; this.age = age; this.study = function(){ return this.name + "在学习..."; } } var s1 = new Student("小王",12); var s2 = new Student("老王",37); console.log( s1.study() , s2.study() ); </script>
面向对象实现 --隔行变色：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>孩子多个1</li> <li>孩子多个2</li> <li>孩子多个3</li> <li>孩子多个4</li> <li>孩子多个5</li> <li>孩子多个6</li> <li>孩子多个7</li> <li>孩子多个8</li> </ul> <ol> <li>孩子多个1</li> <li>孩子多个2</li> <li>孩子多个3</li> <li>孩子多个4</li> <li>孩子多个5</li> <li>孩子多个6</li> <li>孩子多个7</li> <li>孩子多个8</li> </ol> </body> </html> <script> /* 面向对象实现思路 ： 1、确定构造函数 HighLight 2、确定属性 特效操作的元素 3、确定功能 特效中的方法 入口方法 : 第一个功能 init 鼠标移入和移出事件 颜色设置 this : 在事件中 指向事件触发者（事件源） 在方法中 指向方法的调用者 不确定 事件源或方法的调用者 一般都会指向window 构造函数值中的this指向构造函数实例化的对象 this : 事件 和 定时器 */ window.onload = function(){ var hl = new HighLight( document.getElementsByTagName("ul")[0] ); hl.init(); hl.fnMouse2(); var hl2 = new HighLight( document.getElementsByTagName("ol")[0] ); hl2.init(); hl2.fnMouse2(); } function HighLight(parent){ this.list = parent.children ;//属性 所有要操作的li this.init = function(){ //入口方法 隔行变色 for( var i = 0 ; i < this.list.length ; i++ ){ if( i%2 ){ this.setColor( this.list[i] , "teal" ); }else{ this.setColor( this.list[i] , "skyblue" ); } } } this.fnMouse = function(){ var self = this;//self 变量 指向new出来的对象 for( var i = 0 ; i < this.list.length ; i++ ){ this.list[i].onmouseenter = function(){ //this：指向谁？ 指向当前操作的li //改变当前操作的li的颜色 self.setColor( this , "red" ); } this.list[i].onmouseleave = function(){ self.setColor( this , "" ); } } } this.fnMouse2 = function(){ for( let i = 0 ; i < this.list.length ; i++ ){ this.list[i].onmouseenter = function(){ //this：指向谁？ 指向当前操作的li //移入到li上 记录当前操作的li的颜色 //为new出来的对象添加一个属性 记录颜色 this.color = this.list[i].style.backgroundColor; //改变当前操作的li的颜色 this.setColor( this.list[i] , "red" ); }.bind(this) //此处的this指向构造函数new出来的对象 this.list[i].onmouseleave = function(){ this.setColor( this.list[i] , this.color ); }.bind(this) } } this.setColor = function(obj,color){ obj.style.backgroundColor = color; } } </script>
面向对象--高级拖拽：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .active{ width: 100px; height: 100px; position: absolute; } </style> </head> <body> <button id="btn">创建</button> </body> </html> <script src="../common.js"></script> <script> /* 1、确定构造函数 DivGrag 2、确定属性 操作的元素--动态创建的 create("div") 3、确定功能 入口 ： init 拖拽 ： down move up */ window.onload = function(){ btn.onclick = function(){ var dg = new DivGrag(); dg.init(); } } function DivGrag(){ this.div = create("div"); this.init = function(){ //入口方法 描述div this.div.className = "active"; document.body.appendChild( this.div ); this.div.style.backgroundColor = getColor(); this.div.style.left = rand( 0 , window.innerWidth-100 ) + "px"; this.div.style.top = rand( 0 , window.innerHeight-100 ) + "px"; this.drag(); } this.drag = function(){ this.div.onmousedown = function(e){ var e = e || event; this.fnDown(e); document.onmousemove = function(e){ var e = e || event; this.fnMove(e); }.bind(this) document.onmouseup = function(){ this.fnUp(); }.bind(this) return false; }.bind(this) } this.fnDown = function(e){ //记录鼠标按下div时的内部偏移量 this.disx = e.offsetX; this.disy = e.offsetY; } this.fnMove = function(e){ //操作div的left和top值的改变 this.div.style.left = e.pageX - this.disx + "px"; this.div.style.top = e.pageY - this.disy + "px"; } this.fnUp = function(){ document.onmousemove = null; } } </script>