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

一、js面向对象基本概念

对象：内部封装、对外预留接口，一种通用的思想，面向对象分析；

1、特点

（1）抽象

（2）封装

（3）继承：多态继承、多重继承

2、对象组成

（1）属性：

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

　　全局变量是window的属性，

 <script>
 window.a=12;
 window.onload=function()
 {
     alert(a);
 }
 </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表示拥有当前方法或者属性的对象；

　（1）this的使用

• 全局环境使用this，它指的就是顶层对象window
• 构造函数中的this，指的是实例对象
• 如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向。

　（2）绑定this的方法

• 函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数

• apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数

• bind方法用于将函数体内的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、构造函数：

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

 function createObjiect(name,qq)
 {
     var obj=new Object();

     obj.name=name;
     obj.qq=qq;
     obj.showname=function()
     {
         alert(obj.name);
     }
     retun obj;
 }

采用构造函数创建对象:

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

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

（1）未采用new进行实例化-

（2）不同对象方法重复，浪费资源

3、使用new

（1）采用new创建构造函数，实现添加对象的属性

 function CreateClass(a,b,c...)
 {
     this.a=a;
     this.b=b;
     ...
 }

（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方法，任何数组均可以使用该方法

 Array.prototype.sum=function()
 {
     var result;
     for(var i=1;i<this.length;i++)

     {
         result+=this[i];
     }
 }
 var arr1=[1,3,5,7];
 var arr2=[2,4,6,8];
 arr1.sum1.sum();
 arr1.sum2.sum();

三、实现继承

1、继承属性

以下语句表示B函数继承A函数的属性

function B()
{
    A.call(this);
}

2、继承方法

首先测试通过下方法来实现

B.prototype=A.prototype;

存在问题：
在继承后修改B函数方法，发现A函数方法也被同时修改；

分析原因：

js中通过对象给对象赋值是引用方式，不会创建新的空间，而是指向同一地址；

通过以下示例说明：

arr1=[1,2,3];
arr2=arr1;
arr2.push("a");
alert(arr1);    //结果为 1 2 3 a
alert(arr2);    //结果为1 2 3 a

改进为

for(var i in A.prototype)
{
    B.prototype[i]=A.prototype[i];
}

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

对象分类

1、本地对象：js标准设置/如：object function、array、sting、boolean/

2、内置对象：math (不需要new，直接使用）

3、宿主对象：浏览器对象

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

四、原型及原型连的理解

1、  js中全部内容都是对象

　　即：（1）Object衍生而来

　　　　（2）原型连（__proto__）最终指向Object.prototype["constructor", "hasOwnProperty", "toLocale......]

　　　　（3）prototype 包含了2个属性，一个是constructor ，另外一个是__proto__

2、 构造函数与实例

　　构造函数通过定义prototype来约定其实例的规格, 再通过 new 来构造出实例, 他们的作用就是生产对象.

　　而构造函数(方法)本身又是方法(Function)的实例, 因此也可以查到它的__proto__(原型链)

　　Object / function F(){}   　　构造函数（类）

　　new Object() / new F() 　　实例

3、实例通过__proto__指向原型

4、不能为实例设置prototype，去构造实例的实例