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