[js笔记整理]面向对象篇

一、js面向对象基本概念

对象:内部封装、对外预留接口,一种通用的思想,面向对象分析;

1、特点

(1)抽象

(2)封装

(3)继承:多态继承、多重继承

2、对象组成

(1)属性:

  任何对象都可以添加属性,(如右侧示例可弹出arr.a为12 var arr=[1,2,3];arr.a=12;alert(arr.a)

  全局变量是window的属性,

1 <script>
2 window.a=12;
3 window.onload=function()
4 {
5     alert(a);
6 }
7 </script>

(2)方法:

  任何对象都可以添加方法;

  全局函数为window的自定义方法;

  事件函数为系统自动调用的方法;

(以下代码为为数组对象arr添加属性a和方法show,调用方法show弹出a属性)

<script>
var arr=[1,2,3];
arr.a=12;
arr.show=function()
{
    alert(this.a);}
arr.show;
</script>

3、this的使用

  this表示拥有当前方法或者属性的对象;

4.new的使用

 (1)作用:示例化当前类为对象;

 (2)动作流程:指向一个新创建的对象,并返回该对象;

 (3)任何方法前都可以加new;

5、类和对象

(1)对象:类的实例化

(2)类:对象的模板

二、创建类

1、基本方法

(1)创建空对象  var obj=new Object();
(2)添加属性   obj.name="pangyongsheng"
(3)添加方法   obj.shuwname=function(){ alert(this.name)}
(4)调用属性   obj.name;
(5)调用方法   obj.showname();

2、构造函数:

以上基本方法可以封装成为一个函数--构造函数

 1 function createObjiect(name,qq)
 2 {
 3     var obj=new Object();
 4
 5     obj.name=name;
 6     obj.qq=qq;
 7     obj.showname=function()
 8     {
 9         alert(obj.name);
10     }
11     retun obj;
12 }

采用构造函数创建对象:

var aa=creatObject("panyongsheng",820568018);

上述方法存在的问题和缺点:

(1)未采用new进行实例化-

(2)不同对象方法重复,浪费资源

3、改进

(1)采用new创建构造函数,实现添加对象的属性

1 function CreateClass(a,b,c...)
2 {
3     this.a=a;
4     this.b=b;
5     ...
6 }

(2)采用原型添加方法
CreatClass.prototype.fn1=function(){}
CreatClass.prototype.fn2=function(){}
...

----------------------------------------------------------------------------

关于原型:同时为多个对象添加相同的方法->提高资源重用

以为数组添加求和方法为例:

(1)对特点的数组添加sum方法,只能在当前数组使用

var arr1=[1,3,5,7];
var arr2=[2,4,6,8];
arr1.sum=function()
{
    var result;
    for(var i=1;i<this.length;i++)
    {
        result+=this[i];
    }
}
arr1.sum1.sum();
arr1.suml.sum();    //报错

(2)通过原型添加sum方法,任何数组均可以使用该方法

 1 Array.prototype.sum=function()
 2 {
 3     var result;
 4     for(var i=1;i<this.length;i++)
 5
 6     {
 7         result+=this[i];
 8     }
 9 }
10 var arr1=[1,3,5,7];
11 var arr2=[2,4,6,8];
12 arr1.sum1.sum();
13 arr1.sum2.sum();

----------------------------------------------------------------------------

时间: 2024-12-17 19:27:40

[js笔记整理]面向对象篇的相关文章

[js笔记整理]正则篇

一.正则基本概念 1.一种规则.模式 2.强大的字符串匹配工具 3.在js中常与字符串函数配合使用 二.js正则写法 正则在js中以正则对象存在: (1)var re=new RegExp(正则表达式); (2)var re=/正则表达式/; 三.正则的基本写法 1.开始结束符 ^     $ 2.元字符 (1)任意字符 [abc] abc中的任意一个 (2)范围 [a-z] 字母a到c: [1-9] 数组1到9 (3)排除 [^a-z] 排除字母a-c (4)任意字符 . 3.量词 (1) {

[js笔记整理]DOM 篇

一.节点类型 1.元素节点:HTML元素 2.文本节点:元素标签中的内容 3.属性节点:元素的属性 (检测节点类型:node.nodeType //元素=1,属性=2,文本=3) 二.使用DOM获取元素 1.通过名称类型访问节点 (1)getElementById(); (2)getElementsByTagName(); 2.利用父子关系查询节点 (1).ChildNodes //获取全部子节点数组(在Firefox chrome ie9中会包含文本节点) (2).children //只选择

jqGrid 学习笔记整理——终极篇(一)

jqGrid 学习笔记整理--终极篇(一) 本篇开始实现利用jqGrid框架实现 主从表 的显示效果及与后台交互的实例,使用的平台和上篇博文[jqGrid 学习笔记整理--进阶篇(二)](http://blog.csdn.net/dfs4df5/article/details/51108798)一致 也将使用上篇中的数据库和代码进行添加和修改,如果未看上篇的请先去看上篇,本篇不再重复贴出上篇出现的源码. 一.数据库部分 为了检索方便,这里建立了一个视图 关联两个表,设置为外键 最后如果有什么不清

jqGrid 学习笔记整理——进阶篇(二)

jqGrid 学习笔记整理--进阶篇(二 ) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2.创建表 双击打开上步创建数据库--右击T

WEBGL实现--three.js笔记整理

three.js 三大对象:Scene  场景,PerspectiveCamera 相机 ,WebGLRenderer 渲染器 性能测试工具:stats.js 动画引擎实现:Tween.js 相机:{正投影:THREE.OrthographicCamera(left, right, top, bottom, near, far ):透视投影:THREE.PerspectiveCamera(fov, aspect, near, far)} fov:相机上下获取图像的角度:near:近截面距离:fa

Linux笔记整理——命令篇

一.列出目录内容 ls -a:显示所有文件(包括隐藏文件): ls -l:显示详细信息: ls -R:递归显示子目录结构: ls -ld:显示目录和链接信息: ctrl+r:历史记录中所搜命令(输入命令中的任意一个字符): Linux中以.开头的文件是隐藏文件: pwd:显示当前目录 二.查看文件的类型 file:查看文件的类型 三.复制文件目录 1.cp:复制文件和目录 cp源文件(文件夹)目标文件(文件夹) 常用参数:-r:递归复制整个目录树:-v:显示详细信息: 复制文件夹时要在cp命令后

java笔记整理

Java 笔记整理 包含内容     Unix Java 基础, 数据库(Oracle jdbc Hibernate pl/sql), web, JSP, Struts, Ajax Spring, Ejb, java和模式 Linux/Unix笔记 inode :存储编号(地址) ls -k:查看磁盘分区 ls -li:显示当前文件的inode号. 目录的大小跟文件的大小有关,跟目录里的文件(目录)数量无关. 一行多个命令的话,中间用分号分开.如:pwd;cal;date last | grep

Deep Learning(深度学习)学习笔记整理系列之(三)

Deep Learning(深度学习)学习笔记整理系列 [email protected] http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04-08 声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部分具体的参考资料并没有详细对应.如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主

Java快速教程--vamei 学习笔记(基础篇)

链接:http://www.cnblogs.com/vamei/archive/2013/03/31/2991531.html java快速教程第1课 从HelloWorld到面向对象 学习网址:http://www.cnblogs.com/vamei/archive/2013/03/14/2958654.html java快速教程第2课 方法与数据成员 学习网址:http://www.cnblogs.com/vamei/archive/2013/03/25/2964430.html java快