[js]面向对象编程

时间:2024-01-14 11:02:20

一、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,指的是实例对象
  • 如果对象的方法里面包含thisthis的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变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,去构造实例的实例