`
sdcyst
  • 浏览: 59153 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

javascript面向对象技术基础(五)

阅读更多

类变量/类方法/实例变量/实例方法
先补充一下以前写过的方法:
在javascript中,所有的方法都有一个call方法和apply方法.这两个方法可以模拟对象调用方法.它的第一个参数是对象,后面的
参数表示对象调用这个方法时的参数(ECMAScript specifies two methods that are defined for all functions, call()
and apply(). These methods allow you to invoke a function as if it were a method of some other object. The first
argument to both call() and apply() is the object on which the function is to be invoked; this argument becomes
the value of the this keyword within the body of the function. Any remaining arguments to call() are the values
that are passed to the function that is invoked).比如我们定义了一个方法f(),然后调用下面的语句:
f.call(o, 1, 2);
作用就相当于
o.m = f;
o.m(1,2);
delete o.m;
举个例子:

function Person(name,age) {  //定义方法
    this.name = name;
    this.age = age;
}
var o = new Object();   //空对象
alert(o.name + "_" + o.age); //undefined_undefined

Person.call(o,"sdcyst",18); //相当于调用:o.Person("sdcyst",18)
alert(o.name + "_" + o.age); //sdcyst_18

Person.apply(o,["name",89]);//apply方法作用同call,不同之处在于传递参数的形式是用数组来传递
alert(o.name + "_" + o.age); //name_89

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

实例变量和实例方法都是通过实例对象加"."操作符然后跟上属性名或方法名来访问的,但是我们也可以为类来设置方法或变量,
这样就可以直接用类名加"."操作符然后跟上属性名或方法名来访问.定义类属性和类方法很简单:

Person.counter = 0;   //定义类变量,创建的Person实例的个数
function Person(name,age) {
    this.name = name;
    this.age = age;
    Person.counter++; //没创建一个实例,类变量counter加1
};

Person.whoIsOlder = function(p1,p2) { //类方法,判断谁的年龄较大
    if(p1.age > p2.age) {
        return p1;
    } else {
        return p2;
    }
}

var p1 = new Person("p1",18);
var p2 = new Person("p2",22);

alert("现在有 " + Person.counter + "个人");  //现在有2个人
var p = Person.whoIsOlder(p1,p2);
alert(p.name + "的年龄较大");   //p2的年龄较大

 

prototype属性的应用:
下面这个例子是根据原书改过来的.
假设我们定义了一个Circle类,有一个radius属性和area方法,实现如下:

function Circle(radius) {
    this.radius = radius;
    this.area = function() {
        return 3.14 * this.radius * this.radius;
    }
}
var c = new Circle(1);
alert(c.area());  //3.14

 假设我们定义了100个Circle类的实例对象,那么每个实例对象都有一个radius属性和area方法,
实际上,除了radius属性,每个Circle类的实例对象的area方法都是一样,这样的话,我们就可以
把area方法抽出来定义在Circle类的prototype属性中,这样所有的实例对象就可以调用这个方法,
从而节省空间.

function Circle(radius) {
    this.radius = radius;
}
Circle.prototype.area = function() {
        return 3.14 * this.radius * this.radius;
    }
var c = new Circle(1);
alert(c.area());  //3.14

 

现在,让我们用prototype属性来模拟一下类的继承:首先定义一个Circle类作为父类,然后定义子类
PositionCircle.

function Circle(radius) {  //定义父类Circle
    this.radius = radius;
}
Circle.prototype.area = function() { //定义父类的方法area计算面积
    return this.radius * this.radius * 3.14;
}

function PositionCircle(x,y,radius) { //定义类PositionCircle
    this.x = x;                    //属性横坐标
    this.y = y;	                   //属性纵坐标
    Circle.call(this,radius);      //调用父类的方法,相当于调用this.Circle(radius),设置PositionCircle类的
                                   //radius属性
}
PositionCircle.prototype = new Circle(); //设置PositionCircle的父类为Circle类

var pc = new PositionCircle(1,2,1);
alert(pc.area());  //3.14
                   //PositionCircle类的area方法继承自Circle类,而Circle类的
                   //area方法又继承自它的prototype属性对应的prototype对象
alert(pc.radius); //1  PositionCircle类的radius属性继承自Circle类

/*
注意:在前面我们设置PositionCircle类的prototype属性指向了一个Circle对象,
因此pc的prototype属性继承了Circle对象的prototype属性,而Circle对象的constructor属
性(即Circle对象对应的prototype对象的constructor属性)是指向Circle的,所以此处弹出
的是Circ.
*/
alert(pc.constructor); //Circle    

/*为此,我们在设计好了类的继承关系后,还要设置子类的constructor属性,否则它会指向父类
的constructor属性
*/
PositionCircle.prototype.constructor = PositionCircle
alert(pc.constructor);  //PositionCircle
 
分享到:
评论
28 楼 123003473 2011-10-24  
function Parent(name){
    this.name = name;

}
Parent.prototype.say = function(){
    alert('我的名字:'+this.name);
}

Parent.prototype.sayGrade= function(){
    alert('我已经不上学了');
}

function Student(grade,name){
    this.grade = grade;
    Parent.call(this,name);
}

Student.prototype = new Parent();
Student.prototype.constructor = Student;
Student.prototype.super=Parent.prototype;
Student.prototype.sayGrade = function(){
    this.super.sayGrade();
    alert('我上'+this.grade);
}

var stu1 =new Student('1','胡');
stu1.say();
stu1.sayGrade();
stu1.hasOwnProperty('name');
27 楼 google_fans 2009-04-27  
还不错,值得一看啊
26 楼 Blithe 2009-02-20  
terrysunhh 写道


3. PositionCircle.prototype.constructor = PositionCircle;
   alert(PositionCircle.constructor);
   alert(PositionCircle.prototype.constructor)
   与  
  
   PositionCircle.prototype = new PositionCircle();// 参考PositionCircle.prototype = new Circle();
   alert(PositionCircle.constructor);
   alert(PositionCircle.prototype.constructor)

请问这有什么qubie
25 楼 terrysunhh 2009-02-12  
请教一下,在最后一段代码中
1. PositionCircle.prototype = new Circle();
new Circle()是创建一个新的Circle实例还是设置PositionCircle.prototype属性指向Circle函数

2. alert(PositionCircle.constructor);
   alert(PositionCircle.prototype.constructor)
为什么得到不一样的结果呢?PositionCircle.constructor与PositionCircle.prototype.constructor有什么区别?

3. PositionCircle.prototype.constructor = PositionCircle;
   alert(PositionCircle.constructor);
   alert(PositionCircle.prototype.constructor)
   与  
  
   PositionCircle.prototype = new PositionCircle();// 参考PositionCircle.prototype = new Circle();
   alert(PositionCircle.constructor);
   alert(PositionCircle.prototype.constructor)
输出不一样?请教一下
24 楼 sdcyst 2008-12-30  
hanjs 写道
f.call(o, 1, 2);
作用就相当于
o.m = f;
o.m(1,2);
delete o.m; //这个是什么时候执行的?

我怎么通过代码看是这样的情况呢?

o=f(1,2);


f.call(o, 1, 2);
作用就相当于
o.m = f;
o.m(1,2);
delete o.m;
后面的情况是为了描述的更清楚而假设的

你自己假设的情况是不正确的,最好自己试一下。

23 楼 hanjs 2008-12-30  
f.call(o, 1, 2);
作用就相当于
o.m = f;
o.m(1,2);
delete o.m; //这个是什么时候执行的?

我怎么通过代码看是这样的情况呢?

o=f(1,2);

22 楼 sdcyst 2008-12-30  
liliefeng 写道

楼主的代码有很多错误,很明显的一个就是this的使用,其实this在js中是关联执行时的作用域,而非定义时的作用域,呵呵,好好看看,别误导新手

this的作用域是在js关联执行时确定的,但是在文章中我并没有提到这方面的内容。而且,如果代码有错误的话,那还请你详细的指出来,我肯定非常感谢
21 楼 liliefeng 2008-12-29  
楼主的代码有很多错误,很明显的一个就是this的使用,其实this在js中是关联执行时的作用域,而非定义时的作用域,呵呵,好好看看,别误导新手
20 楼 hite 2008-12-26  
daoyongyu 写道
謝謝樓主,辛苦了.寫的很好,淺顯易懂!!

这个系列基本看完了。
ps:贴主感觉繁体很帅吗?还是因为是港澳人士?小小的不爽而已。没事没事。
19 楼 yza0088 2008-12-24  
楼主第一次让我感觉到js的可怕 呵呵
18 楼 yingwuhahahaha 2008-12-19  
daoyongyu 写道
謝謝樓主,辛苦了.寫的很好,淺顯易懂!!

同感同感
17 楼 daoyongyu 2008-12-18  
謝謝樓主,辛苦了.寫的很好,淺顯易懂!!
16 楼 zhuxinyu 2008-12-17  
是否还有下文  期待 继续
15 楼 sdcyst 2008-12-16  
yuxiaojicai 写道

我很就不回复了 ,但看到你写的文章,不得不回复,写的真好,我学js,总共才有两次感悟,其中第二次是看了你的文章后,谢谢诶!

但愿我的文章不会给你造成误解,多看看别人的文章,比较一下。
14 楼 yuxiaojicai 2008-12-16  
我很就不回复了 ,但看到你写的文章,不得不回复,写的真好,我学js,总共才有两次感悟,其中第二次是看了你的文章后,谢谢诶!
13 楼 xinguangduan 2008-12-13  
很不错,适合js初学者,不知道有没有相关的书籍?
12 楼 guazi 2008-12-10  
受教了...感谢二位...
11 楼 yunhaifeiwu 2008-12-09  
是的,楼主。
10 楼 sdcyst 2008-12-09  
yunhaifeiwu 写道


你说的
引用f.call(o, 1, 2);
作用就相当于
o.m = f;
o.m(1,2);
delete o.m;

揭示f.call的含义,这是从等价代码的角度上揭示的。如果用文字进行描述又是怎样的呢?
msdn上的描述很准确,很严密,但是理解有点困难。
因此我站到我测试得到的结果,进行总结归纳: 
  f.call(o,1,2)的含义是:
  1 调用了函数f .其实际参数是 1,2
  2 在f函数执行时也仅在f函数执行时,f中的this参数中具有o中的属性。如果原来有与o相同的属性,
则会被覆盖掉。

申明:以上仅仅是个人对call的自我总结,目的是辅助理解,准确的定义请看相关权威教材。三人行必有

我师,如果有误,请指出,我会及时更正。在技术论坛上,谢绝因观点不一样,而进行人身攻击。



http://msdn.microsoft.com/zh-cn/magazine/cc163419.aspx
下面这句话是从上面提到的文章中摘录出来的:
JavaScript 中的函数是对象.每个函数对象都有一个名为 call 的方法,它将函数作为第一个参数的方法进行调用。就是说,作为函数第一个参数传递给 call 的任何对象都将在函数调用中成为“this”的值.

可能是因为javascript是一种弱类型的语言,没有那么严格的要求,所以才导致我们对问题的理解不同.当时写这些东西的时候我也没有用调试工具来调试,所以没有想到你提到的那一点.上面的文章也是从msdn上找的,不知道是不是你说的那一篇.大家参考一下,具体怎么理解就看个人了.
9 楼 yunhaifeiwu 2008-12-09  
sdcyst 写道
yunhaifeiwu 写道


测试了,你的这种也是正确的。从中受教了。感谢中!



f.call(o, 1, 2);
作用就相当于
o.m = f;
o.m(1,2);
delete o.m;

上面这个例子是原文中的,后来我测试的时候也是这样.你可以找到原书看一下.
我非常害怕自己的帖子会对别人产生误导,所以非常感谢你的意见.

扣个字眼:你在回复中说,"你的这种测试也是正确的",但是我还是没弄明白你原来
想要表达的意思,包括你觉得那个例子.


你说的
引用
f.call(o, 1, 2);
作用就相当于
o.m = f;
o.m(1,2);
delete o.m;


揭示f.call的含义,这是从等价代码的角度上揭示的。如果用文字进行描述又是怎样的呢?
msdn上的描述很准确,很严密,但是理解有点困难。
因此我站到我测试得到的结果,进行总结归纳: 
  f.call(o,1,2)的含义是:
  1 调用了函数f .其实际参数是 1,2
  2 在f函数执行时也仅在f函数执行时,f中的this参数中具有o中的属性。如果原来有与o相同的属性,
则会被覆盖掉。

申明:以上仅仅是个人对call的自我总结,目的是辅助理解,准确的定义请看相关权威教材。三人行必有

我师,如果有误,请指出,我会及时更正。在技术论坛上,谢绝因观点不一样,而进行人身攻击。




相关推荐

    javascript面向对象技术基础

    JavaScript是一种广泛应用于...以上是JavaScript面向对象技术的一些基础知识。通过理解并熟练运用这些概念,开发者能够编写出更清晰、更易于维护的代码。对于JavaScript初学者来说,掌握这些基础是进阶学习的关键步骤。

    javascript 面向对象技术基础教程第1/2页

    JavaScript面向对象技术是该编程语言非常核心的一个部分,它允许开发者使用对象来组织代码,并模拟现实世界中的实体。在JavaScript中,几乎所有的东西都可以被视为对象,包括基本数据类型如数字和字符串。对象包含...

    [推荐]javascript 面向对象技术基础教程

    本文将深入浅出地讲解JavaScript中的面向对象技术基础,包括对象、数组、函数、类、构造函数以及原型等方面的知识。 首先,让我们来看看对象和数组。在JavaScript中,对象是键值对的集合,这些键通常是字符串,对应...

    JAVASCRIPT 面向对象编程精要

    本文介绍了JavaScript面向对象编程的基本概念和技术细节,包括变量和对象的基础用法、函数的作用以及如何通过封装和继承来构建复杂的对象层次结构。JavaScript的独特之处在于它的灵活性和动态性,这使得它成为了一种...

    javascript面向对象编程.pdf

    总而言之,学习现代JavaScript面向对象编程,有助于开发者在认识这门语言演化的基础上,运用面向对象的设计和编程模式来构建更加健壮和可维护的JavaScript应用程序。同时,测试和调试是保证代码质量不可或缺的环节,...

    JavaScript面向对象编程指南.pdf

    通过以上内容,我们可以了解到JavaScript面向对象编程的基础知识以及它的核心概念。在实际应用中,理解并熟练运用这些知识点,将有助于开发出更加结构化和可维护的代码。同时,参与Java学习群和听讲大神的课程将是一...

    javascript面向对象编程(中文).pdf

    ### JavaScript面向对象编程知识点概述 #### 一、现代JavaScript编程概览 - **JavaScript的演进**:自诞生以来,JavaScript经历了从一个简单的脚本语言到现今被广泛应用于构建复杂应用的强大编程语言的过程。它的...

    JavaScript面向对象技术实现树形控件

    JavaScript面向对象技术在实现树形控件中扮演着至关重要的角色。树形控件是一种用于展示层次型数据的用户界面元素,它具有扩展和折叠功能,可以在有限的空间内清晰地展示大量的信息,使得数据间的层级关系一目了然。...

    《JavaScript内核系列》和《JavaScript面向对象基础》

    《JavaScript内核系列》和《JavaScript面向对象基础》这两本书是深入理解JavaScript编程的重要资源。JavaScript,作为一种广泛应用于Web开发的脚本语言,其内核和面向对象特性是开发者必须掌握的基础知识。以下是对...

    javascript 经典面向对象设计

    标题“JavaScript经典面向对象设计”指出了本书的主要内容是关于如何使用面向对象编程(OOP)原则和技术来编写高质量、可扩展且可重用的JavaScript应用程序及库。描述中提到本书相比其他中文资料更为清晰,深入到...

    JavaScript面向对象程序设计

    在JavaScript面向对象编程中,随着Web2.0和Ajax技术的普及,JavaScript的角色从简单的表单验证扩展到了复杂的数据交互和页面动态更新。采用面向对象的编程风格可以使代码结构更加清晰,便于管理和维护。例如,...

    JavaScript面向对象编程指南 第2版 高清 带索引书签目录_样章.pdf

    从所提供的文件信息中,我们可以总结以下几点与“JavaScript面向对象编程指南 第2版 高清 带索引书签目录_样章.pdf”相关的重要知识点。 首先,该文件提到的书籍是关于JavaScript面向对象编程的,面向对象编程...

    js面向对象技术基础

    JavaScript是一种基于原型的面向对象编程语言,它的面向对象技术基础包括对象、数组、原型、作用域、闭包以及模拟私有变量等核心概念。下面将详细介绍这些知识点。 **1. 对象与数组** 在JavaScript中,对象是键值...

    javascript面向对象编程

    ### JavaScript面向对象编程详解 #### 一、现代JavaScript概述 随着技术的发展,JavaScript这门语言已经从最初的简单脚本语言成长为现在广泛应用于Web前端、后端甚至桌面应用的强大编程工具。现代JavaScript具备...

Global site tag (gtag.js) - Google Analytics