面向对象-初级

什么是对象

什么是收音机

对象是一个整体，对外提供一些操作

什么是面向对象

使用对象时，只关注对象提供的功能，而不关注内部细节

比如 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

偷偷做了两件事；

--替你创建一个空白对象

-替你返回这个对象

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>

给string添加方法

给原形添加方法，类似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中对象的组成

用工厂方法创建一个对象

原型的概念和使用

修改系统对象（及原型）

混合的构造函数/原型方式