什么是对象
什么是收音机
对象是一个整体，对外提供一些操作
什么是面向对象
使用对象时，只关注对象提供的功能，而不关注内部细节
比如 jquery
面向对象是一种通用的思想，并非只有编程中能用，任何事情都可以用
js中的面向对象
面向对象编程(OOP)的特点
抽象：抓住核心went
封装： 不考虑内部实现，只考虑功能使用
继承： 从已有的对象上，继承出新的对象
- --多重继承
----多态
对象的组成
方法---函数：过程 动态的
属性---变量：状态 静态的
第一个面向对象的程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> var arr=[12, 65, 87]; //this：当前的方法，属于谁 arr.show=function () { alert(this); }; oDiv.onclick=function () { alert(this); }; </script> </head> <b
为对象添加方法和属性
this详解，事件处理this的本质
---window
- --this函数属于谁
不能在系统对象中随意附加方法，属性，否则会覆盖已有的方法属性
object对象
<script> var arr=[1,2,3,4,5]; var a=12; //变量：自由 arr.a=5; //属性：属于一个对象 function show() //函数 { alert('a'); } arr.fn=function () //方法 { alert('a'); }; </script>
工厂方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> //用工厂方式构造对象 function createPerson(name, sex) //构造函数 { //1.原料 var obj=new Object(); //2.加工 obj.name=name; obj.sex=sex; obj.showName=function () { alert('我的名字叫：'+this.name); }; obj.showSex=function () { alert('我是'+this.sex+'的'); }; //3.出厂 return obj; } var p1=createPerson('blue', '男'); var p2=createPerson('leo', '女'); alert(p1.showName==p2.showName); /*p1.showName(); p1.showSex(); p2.showName(); p2.showSex();*/ </script> </head> <body> </body> </html>
什么是工厂
原料
加工
出厂
工厂方式
用构造函数创建一个类
什么是类对象（实例）： 模具和零件
工厂方式的问题
没有new
函数重复定义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> //用工厂方式构造对象 function createPerson(name, sex) //构造函数 { //假想的系统内部工作流程 //var this=new Object(); this.name=name; this.sex=sex; this.showName=function () { alert('我的名字叫：'+this.name); }; this.showSex=function () { alert('我是'+this.sex+'的'); }; //假想的系统内部工作流程 //return this; } var p1=new createPerson('blue', '男'); var p2=new createPerson('leo', '女'); /*p1.showName(); p1.showSex(); p2.showName(); p2.showSex();*/
加上new
偷偷做了两件事；
--替你创建一个空白对象
-替你返回这个对象
new和this
原形-----prototype
什么是原形
原形是class 修改他可以影响一类元素
在已有对象中加入自己的属性，方法
原形修改对已有的对象影响
为array添加sum方法
给对象添加方法，类似行间样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> var arr1=new Array(12, 5, 8, 4); var arr2=new Array(44,6,5,4,5,55,9); //arr1.sum=function () Array.prototype.sum=function () { var result=0; var i=0; for(i=0;i<this.length;i++) { result+=this[i]; } return result; }; alert(arr1.sum()); alert(arr2.sum()); alert(arr1.sum==arr2.sum); </script> </head> <body> </body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> String.prototype.trim=function () { return this.replace(/^s+|s+$/g, ''); }; var str=' fsdf re r e r f '; alert('('+str.trim()+')'); </script> </head> <body> </body> </html>
给原形添加方法，类似class
给原形的小缺陷
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> Array.prototype.a=12; var arr=[1,2,3]; alert(arr.a); //12 arr.a=5; alert(arr.a); //5 delete arr.a; alert(arr.a); //12 </script> </head> <body> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> function Person(name, sex) { this.name=name; this.sex=sex; } Person.prototype.showName=function () { alert(this.name); }; Person.prototype.showSex=function () { alert(this.sex); }; var p=new Person('blue', '男'); p.showName(); p.showSex(); </script> </head> <body> </body>
无法限制覆盖
流行的面向对象编写方式
用混合方法构造对象
混合的构造函数、原型方式
Mixed Constructor Function/Prototype Method
原则
构造函数：加属性
原型：加方法
对象命名规范
类首字母大写
本节知识点
理解面向对象
JS中对象的组成
用工厂方法创建一个对象
原型的概念和使用
修改系统对象（及原型）
混合的构造函数/原型方式