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

Posted 2020-07-26 庞永胜

一、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();

 

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