`
carolaif
  • 浏览: 71041 次
  • 性别: Icon_minigender_2
  • 来自: 大连
最近访客 更多访客>>
社区版块
存档分类
最新评论

深入javascript function对象(二)

阅读更多

http://bbs.51cto.com/thread-568229-1.html

 

Javascript中的类
上一篇中我们了解了 function 对象,下面我们来看看如何运用function对象实现面向对象。
1.      
对象

什么是对象?
js中,对象是一种复合数据类型,他们将多个数据值集中在一个单元中,而且允许使用名字来存取这些值。
怎么创建对象?
对象是由运算符new创建的。
在这个运算符之后必须有用于初始化对象的构造函数名。例如:
var o = new Object(); //创建一个空对象,即没有属性的对象。
js还支持内部构造函数,例如:
var now = new Date(); //当前日期和时间
通过对象直接量创建对象。
对象直接量提供了另一种创建并初始化新对象的方式。对象直接量由属性说明列表构成,列表包含在大括号中,其中属性说明由逗号隔开,对象直接量中的每个属性都是由属性名加上冒号和属性值构成。例如:
var circle = {x:0, y:0, radius:2};
var coder = {
name:”huchen”,
age:22,
sex:”mail”,
email:”
vs2010.net@gmail.com”

};
变量的读取
这个相信就不用在啰嗦了吧,如:coder.name;
如果要读取一个不存在的属性(即还没有被赋值的属性)的值,那么得到的结果将是undefined
删除属性:
delete coder.sex;
删除一个属性不仅仅是把该属性设置为undefined,而是真正从对象中移除该属性。

2.      
构造函数

从上一篇中我们知道,在javascript中,使用new运算符以及预定义的构造函数(Object(),Date())可以创建并初始化一个新对象。在许多实例中,这些预定义的构造函数和他们创建的内部对象类型都很有用。但是,在面向对象的程序设计中,使用由程序定义的自定义对象类型也是很普遍的。例如如果你想编写一个操作矩形的程序,那么可以用一个特殊类型或者对象类来表示矩形。这个矩形类的每个对象都有一个width属性和一个height属性,因为他们定义矩形的本质特征。

要创建已经定义了的带有属性的对象,需要编写一个构造
函数在新的对象中创建并初始化这些属性。构造函数是具有两个特性的javascript函数:

l
它由new运算符调用。

l
传递给他的是一个对新创建的空对象的引用,将该引用作为关键字this的值,而且它还要对新创建的对象进行适当的初始化。

例:
function Rectangle(w, h)
{
      
this.width = w;

      
this.height = h;

}
var rect1 = new Rectangle(2,5);
var rect2 = new Rectangle(3,7);
学过面向对象编程的都知道面向对象通过属性和方法描述现实世界中的类型。
那个有了属性,自然就应该有方法。
3.      
方法

javascript中,可以借助可以讲函数赋给任何变量这个特性。我们可以把函数赋给一个对象属性。如果有一个函数f和一个对象o,就可以适应如下代码定义一个名为m方法:
o.m = f;
定义了之后可以采用下面方式调用:
o.m();
方法有一个非常重要的属性,就是在方法主体内部,关键字this可以引用当前调用该方法的对象。那么有了这些概念我们来看个例子:
function compute_area()
{
      
return this.width * this.height;

}
var page = new Rectangle(4, 5);
//通过吧函数赋予对象的属性,来定义一个方法。
page.area = compute_area;
//调用方法
var a = page.area();
在这个例子中有一个明显的缺点,就是在调用对象rect的方法area()之前,必须先将该方法赋给rect对象的一个属性,虽然可以调用名为page的特定对象的area()方法,但是在没有将该方法赋给其他的Rectangle对象之前,我们就不能调用任何Rectangle对象的area()方法。这很就会使你感到繁琐。
对此我们可以用这种方法解决:
例:
//首先定义一函数,它们将被用作方法。
function Rectangle_area(){return this.width * this.height;}
function Rectangle_perimeter(){return 2*this.width + 2*this.height;}
function Rectangle_set_size(w,h){this.width = w; this.height = h;}
function Rectangle_enlarge(){this.widht *= 2; this.height *= 2;}
function Rectangle_shrink(){this.width /= 2; this.height /= 2;}

function Rectangle(w, h)
{
      
this.width = w;

      
this.height = h;

      
//
在构造函数中定义对象方法

      
this.area = Rectangle_area;

      
this.perimeter = Rectangle_perimeter;

      
this.set_size = Rectangle_set_size;

      
this.enlarge = Rectangle_enlarge;

      
this.shrink = Rectangle_shrink;

}
var r = new Rectangle(2, 3);
//现在,一但创建了一个Rectangle对象,就可以直接调用它的方法了。
var a = r.area();
r.enlarge();
var p = r.perimeter();

虽然这种方法不用对每个实例化的对象属性赋予方法。但是还是有缺点,在这个例子中,构造函数Rectangle()对它所要初始化的Rectangle对象的7个属性都进行了设置,即使其中5项属性的值都是常量,每个矩形对象的这5项都是相同的。由于每个属性都占用了一定的内存空间,所以给Rectangle类添加方法,就会使每个Rectangle对象占用的内存为原来的3倍。幸运的是javascript引入了一种解决该问题的方法,即它允许一个对象继承原型对象的属性。

分享到:
评论

相关推荐

    深入理解JavaScript系列

    深入理解JavaScript系列(9):根本没有“JSON对象”这回事! 深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇) 深入理解JavaScript系列(11):执行上下文(Execution Contexts) 深入理解...

    深入理解JavaScript系列(.chm)

    深入理解JavaScript系列(9):根本没有“JSON对象”这回事 深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇) 深入理解JavaScript系列(11):执行上下文(Execution Contexts) 深入理解...

    深入剖析JavaScript面向对象编程

    Javascript 面向对象编程:构造函数的继承 本节主要介绍,如何生成一个”继承”多个对象的实例。 比如,现在有一个”动物”对象的构造函数, function Animal(){ this.species = "动物"; } 还有一个”猫”对象的...

    javascript面向对象之对象的深入理解

    本文进一步分析讲述了javascript面向对象之对象的深入理解。分享给大家供大家参考。具体分析如下: javacript面向对象程序设计中,可以理解为一切都是对象。实例代码如下: 代码如下:[removed] function Cat(){ } ...

    javascript function、指针及内置对象

    javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法: ...

    深入浅析JavaScript面向对象和原型函数

    对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅。。(哔!)。 下面给大家介绍下常用的几种对象创建模式 使用new...

    深入浅析JavaScript中的Function类型

    Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念。 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的...

    深入领悟JavaScript中的面向对象

    JavaScript 是面向对象的。但是不少人对这一点理解得并不全面。 在 JavaScript 中,对象分为两种。一种可以称为“普通对象”,就是我们所普遍理解的那些:数字、日期、用户自定义的对象(如:{})等等。 还有一种,...

    javascript面向对象快速入门实例

    本文深入浅出的讲述了javascript面向对象快速入门实例。分享给大家供大家参考。具体如下: javascript面向对象入门案例: 代码如下:[removed] function Cat(){//js中对象的定义与函数一样,不同点在于怎么样调用。 ...

    深入理解JavaScript创建对象的多种方式以及优缺点

    这篇文章更像是笔记,因为《JavaScript高级程序设计》写得真是太好了! 1. 工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name);...

    理解javascript对象继承

    先从一个问题进行研究深入,什么是javascript对象继承? 比如我们有一个“动物”对象的构造函数。 function animal() { this.type = '动物'; } 还有一个“猫”对象的构造函数。 function cat(name,color) { ...

    深入理解JavaScript 函数

    2.method 是面向对象中的概念,一般与类或对象成对出现 关系 1.对象的属性可以是任意类型 2.对象的属性如果是函数类型,它就叫做这个对象的方法 3.所以方法的本质还是函数 函数的调用 1.fun() 2.obj.fun() 3.fun...

    JavaScript深入之创建对象的多种方式以及优缺点

     这篇文章更像是笔记,因为《JavaScript高级程序设计》写得真是太好了!  1. 工厂模式  function createPerson(name) {  var o = new Object();  o.name = name;  o.getName = function () {  console....

    JavaScript this 深入理解

    函数调用者与所有者 JavaScript 中函数(function) 存在调用者 与 所有者这两个概念,调用者是指调用函数的对象,通常是一个指向调用了当前函数的函数的引用,如果是顶层调用,那么caller=null, 大部分浏览器的...

    深入理解(function(){… })();

     Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function对象。 我们先看看,Function对象能不能直接运 用构造函数创建一个新的函数呢?答案是肯定的。 var abc = new Function(x,y,return x*...

    理解Javascript_08_函数对象

    函数对象 首先,大家得明确一个概念:函数... 注:Function对象本身也是一个函数,因此它也一个函数对象。关于Function的深入理解,请见后续博文。 正面我们来看一段代码: 代码如下: //定义方式一 function func(x)

    深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解

    1、JavaScript中定义函数有2钟方法:  1-1.函数声明: 代码如下:function funcName(arg1,arg2,arg3){ //函数体} ①name属性:可读取函数名。非标准,浏览器支持:FF、Chrome、safari、Opera。 ②函数声明提升:指...

    JavaScript内核系列

    在JavaScript中“一切皆对象”,在这一方面,它比其他的OO语言来的更 为彻底,即使作为代码本身载体的function,也是对象,数据与代码的界限在JavaScript中已经相当模糊。虽然它被广泛的应用在WEB客户 端,但是其...

    深入理解JavaScript系列(49):Function模式(上篇)

    主要介绍了深入理解JavaScript系列(49):Function模式(上篇),本文讲解了回调函数、配置对象、返回函数、偏应用、Currying等内容,需要的朋友可以参考下

    深入理解javascript构造函数和原型对象

    gf.sayWhat = function() { console.log(this.name + "said:love you forever"); } 使用字面量创建 这样似乎妥妥的了,但是宅寂的geek们岂能喜欢如此复杂和low土的定义变量的方式,作为一门脚本语言那应该有和...

Global site tag (gtag.js) - Google Analytics