教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js中类的实例详解

js中类的实例详解

发布时间:2015-02-27   编辑:jiaochengji.com
本文介绍下,在javascript编程中有关类的一些例子,供大家学习参考,实例丰富,讲解全面,值的学习借鉴。

本节内容:
js类的实例

在js中利用new、this和prototype三个关键字可以实现完备的面向对象特征。
而创建一个新的对象new关键字是不可缺少的。

只用new创建一个最简单的对象:(1)
 

复制代码 代码示例:
var t = new Object;
t.a = 'test';
t.b = function (){alert(t.a)};
t.b();
 

弹出“test”

再利用new和this关键字改进:(2)
 

复制代码 代码示例:
var t = new Object;
t.a = 'test'
t.b = function (){alert(this.a)};
t.b();
 

弹出“test”,但仍不能实现重复建立多个实例。

改进:(3)
 

复制代码 代码示例:
function test()
{
    this.a = 'test';
    this.b = function (){alert(this.a)};
    return 1;
}
var t = test();
alert(a);
b();
alert(t);
alert(t.a);
t.b();
 

依次,弹出test、弹出test、弹出1、undefined、对象不支持此属性或方法。可见,直接调用函数时,t只是函数的返回值,并不是需要的对象。由于test是由window对象调用的,this指代了window对象,把a和b赋给了window对象。

加上new:(4)
 

复制代码 代码示例:
function test()
{
    this.a = 'test';
    this.b = function (){alert(this.a)};
    return 1;
}
var t = new test();
alert(t);
alert(t.a);
t.b();
alert(a);
b();
 

依次,弹出[object Object]、弹出test、弹出test、编译错误'a'未定义、停止执行。可见,用new运算符时,调用test函数的对象被赋给了t,this指代t对象,函数返回值被忽略。a和b()在window上未定义。

也可以采用函数返回值的方式建立对象:(5)
 

复制代码 代码示例:
function test()
{
    var t = new Object;
    t.a = 'test';
    t.b = function (){alert(this.a)};
    return t;
}
var t1 = test();
alert(t1);
alert(t1.a);
t1.b();
var t2 = test();
t2.a = 'test2';
t2.b;
alert(Object.a);
Object.b();
 

以上依次,弹出[object Object]、弹出test、弹出test、弹出test2、弹出undefined、编译错误:对象不支持此属性或方法,停止执行。可见,在函数内部new操作符新建了个基本对象并返回,两个test实例不相互影响,也不影响Object对象。

但是上面的4和5的例子都有个弊端就是b方法其实只是一个函数指针,两个指针所指向的函数在调用构造函数时即时创建,并非为同一个程序实例,造成存储空间浪费。
一种改进方案是:(6)
 

复制代码 代码示例:
var test_b = function (){alert(this.a)};
function test()
{
    var t = new Object;
    t.a = 'test';
    t.b = test_b;
    return t;
}
var t1 = test();
t1.b();
var t2 = test();
t2.a = 'test2';
t2.b();
 

这样两个实例的b属性为同一个值test_b指针,都指向同一个函数。

除了这种方式还有一种办法做到,那就是js内置于每个对象中的对象类型原型的引用prototype属性。
用prototype属性提供对象的类的一组基本功能,对象的新实例“继承”赋予该对象原型的操作。
看示例:(7)
 

复制代码 代码示例:
function test()
{
    this.a = 'test';
}
test.prototype.b = function (){alert(this.a)};
test.prototype.c = new Array();
test.prototype.d = 5;
var t1 = new test();
t1.b();
var t2 = new test();
t2.a = 'test2';
t2.b();
//////
t1.c = [1,2];
alert(t1.c);
t2.c[1] = 4;
alert(t2.c);
alert(t1.c);
//////
t2.d = 6;
alert(t2.d);
alert(t1.d);
 

依次,弹出test、弹出test2、弹出1,2,弹出1,4,弹出1,2,弹出6,弹出5。可见,目的达到了,后面的示例说明:当prototype的属性为对象的引用时,它为指向对象的指针,和普通变量一样被每个实例继承。另外,prototype属性在对象被实例化前创建。也不可以放在函数内因为那样每次实例化对象时,都会为prototype的属性重新赋值,那样仍然没达到目地。


在看下js中的继承:(8)
 

复制代码 代码示例:
function test()
{
    this.a = 'test';
    this.b = function (){alert(this.a)};
}
function subTest()
{
    this.peraP = test;
    this.peraP();
    this.subName = 'subTest';
}
var t1 = new test();
t1.b();
var t2 = new subTest();
t2.b();
alert(t2.subName);
 

依次输出:弹出test、弹出test、弹出subTest。在子类的构造函数内,用this调用父类构造函数,实现继承。

当类的构造函数不需要传递参数时,也可以使用原型链实现继承。
例:(9)
 

复制代码 代码示例:

function test()
{
    this.a = 'test';
}
test.prototype.b = function (){alert(this.a)};

function subTest()
{
    this.subName = 'subTest';
}
subTest.prototype = new test;
subTest.prototype.showName = function (){alert(this.subName)};

var t1 = new test();
t1.b();
var t2 = new subTest();
t2.b();
t2.showName();
 

依次输出:弹出test、弹出test、弹出subTest。当父类的构造函数不需要传递参数时,可以用subClass.prototype = new ParentClass;的方式覆盖子类的prototype原型,子类的新原型属性放在后面添加。

附录:
new 运算符

new 运算符执行下面的任务:
1、创建一个没有成员的对象。
2、为那个对象调用构造函数,传递一个指针给新创建的对象作为 this 指针。
3、然后构造函数根据传递给它的参数初始化该对象。

this 语句

指当前对象。
this.property
必选的 property 参数指的是对象的属性。

说明
this 关键字通常在对象的构造函数中使用,用来引用对象。
对于 JScript 的客户版本,如果在其他所有对象的上下文之外使用 this,则它指的是 window 对象。

prototype 属性
返回对象类型原型的引用。
objectName.prototype
objectName 参数是对象的名称。

说明
用 prototype 属性提供对象的类的一组基本功能。对象的新实例“继承”赋予该对象原型的操作。所有 JScript 内部对象都有 prototype 属性。

您可能感兴趣的文章:
js判断当前页面是否被iframe引用的方法
js双击鼠标自动滚动屏幕实例
javascript 获取url参数的小例子
有关js中的undefined,null,"",0和false的区别详解
关于php类的定义与实例化方法
C#简介- 类和对象,选自《C#编程语言详解》,送给新手
Js 取得当前页面的URL网址参数
理解JavaScript中的面向对象
利用JS HTML5实现图片上传预览效果(实例)
利用jQuery的deferred对象实现异步按顺序加载JS文件

[关闭]
~ ~