JavaScript面向对象基础

来源：互联网发布：mac 下数据库建模工具编辑：程序博客网时间：2024/05/17 07:27

什么是面向对象

什么是对象
什么是收音机
不了解内部的结构，知道表面的各种操作（按钮）
对象是一个整体，对外提供一些操作
什么是面向对象
使用对象时，只关注对象提供的功能，不关注其内部细节
比如JQuery
面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用

js中的面向对象

面向对象编程（OOP）的特点
抽象：抓住核心问题
封装：不考虑内部实现，只考虑功能使用
继承：从已有对象上，继承出新的对象
多重继承
多态
对象的组成
方法——函数：过程、动态的：属性属于一个对象
属性——变量：状态、静态的
变量：不属于任何一个对象，自由的

第一个面向对象程序

为对象添加方法和属性
this详解，事件处理中this的本质
this：当前的方法属于谁就是谁
当前发生的事件的对象
window
this—— 函数属于谁

    function show(){        alert(this);    }    show();

结果为object window；
不能再系统对象中随意附加方式、属性，否则会覆盖已有的方式、属性
object对象

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">function createPerson(name, qq)//构造函数{   //原料    var obj = new Object ();    obj.name = name;    obj.qq = qq;    obj.showName = function (){        alert('我的名字叫：' + this.name);    }    obj.showQQ = function (){        alert('我的QQ：' + this.qq);    }        //出厂    return obj;}var obj = createPerson('blue', '1345')obj.showName();obj.showQQ();var obj2 = createPerson('cdscs', '43252')obj2.showName();obj2.showQQ();</script></head><body></body></html>

工厂方式

什么是工厂
原料：创建元素
加工
出厂返回值
工厂方式
用构造函数创建一个类
什么是类、对象（实例）：模具和零件

工厂方式的问题

问题
没有new
函数重复定义
加上new
偷偷做了两件事
替你创建了一个空白对象
替你返回了这个对象
new和this
将var obj = createPerson('blue', '1345')改成var obj = new createPerson('blue', '1345')则可以省略最开始的定以及之后的返回值

原型——prototype

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

var arr1 = new Array(12,45,78,56);    var arr2 = new Array(88,11,22);    Array.prototype.sum = function(){        var result = 0;        for (var i = 0; i < this.length; i++) {            result += this[i];        };        return result;    }    alert(arr1.sum());    alert(arr2.sum());

可以避免函数重复，一组元素加样式

function createPerson(name, qq)//构造函数{       this.name = name;    this.qq = qq;}createPerson.prototype.showName = function (){    alert('我的名字叫：' + this.name);}createPerson.prototype.showQQ = function (){    alert('我的QQ：' + this.qq);}var obj = new createPerson('blue', '1345');var obj2 = new createPerson('cdscs', '43252');obj.showName();obj.showQQ();obj2.showName();obj2.showQQ();

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

流行的面向对象编写方式

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

0 0