码迷,mamicode.com
首页 > 其他好文 > 详细

面向对象-初级

时间:2016-06-09 14:43:11      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:

什么是对象

   什么是收音机

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

什么是面向对象

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

  比如 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中对象的组成

用工厂方法创建一个对象

原型的概念和使用

修改系统对象(及原型)

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

 

面向对象-初级

标签:

原文地址:http://www.cnblogs.com/hack-ing/p/5572287.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!