JavaScript 入门必读

最新推荐文章于 2024-04-23 09:17:09 发布

xzh_blue

最新推荐文章于 2024-04-23 09:17:09 发布

阅读量315

点赞数

分类专栏： Javascript 基础

Javascript 基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中对象的概念、定义方式以及属性的使用方法。从Java和C++的面向对象语言出发，对比解释了JavaScript中对象的定义与数组的关系，强调了JavaScript对象作为散列或哈希表的特性。同时，文中还讨论了对象的constructor属性及其作用，为理解JavaScript对象的构造过程提供了深入见解。

摘要由CSDN通过智能技术生成

JavaScript面向对象程序设计(3): 对象

2009-06-08 12:15:05

标签：面向对象 OO 休闲职场 JavaScript

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。 http://devbean.blog.51cto.com/448512/163817

1. 对象

对象是面向对象程序设计的基础概念之一，只需看看这个名字就已经知道了。在我们熟悉的面向对象语言中，比如Java或者C++，都有着类似的对象定义方法。比如，我们想定义一个类，名字叫Person，有两个属性：name和age，另外有一个方法，将显示出这个Person对象的名字和年龄，那么我们可以用下面的代码实现：

Java：

public class Person {
         private String name;
         private int age;

         public String getName() {
                 return name;
        }

         public void setName(String name) {
                 this.name = name;
        }

         public int getAge() {
                 return age;
        }

         public void setAge( int age) {
                 this.age = age;
        }

         public void introduction() {
                System.out.println( "My name is " + this.name + ", my age is " + this.age);
        }

         public static void main(String[] args) {
                Person p = new Person();
                p.setName( "Tom");
                p.setAge(20);
                p.introduction();
        }
}

C++的实现也是类似的，这里不再赘述。

我们先来看一下这个类的定义：首先声明属性，然后定义属性的getter和setter方法，用来外界访问私有变量，最后定义了它自己的方法。这是一个比较常见的定义方式，以至于以后的很多语言，比如C#，都采用这种定义。

那么，什么是对象呢？对象不过是具有特定属性和方法的集合。虽然这并不是一个严格的定义，但是将属性和它的名字(不妨我们把它的方法也看作是它的属性，这并没有什么不同)放在一起，形成一个集合，这就是对象。也就是说，简单来看，对象就是这种具有“键-值”对的形式。

2. JavaScript的对象

“键-值”对的形式……这个样子看上去是不是有些面熟？Bingo！对了！这不就是数组的形式吗？嗯，恭喜你想到这一点！的确，在JavaScript中，对象的定义就是像数组的定义。下面，我们在JavaScript中对这个Person进行一下定义：

var Person = {
         "name": "Tom",
         "age": 20,
         "introduction": function() {
                alert( "My name is " + this.name + ", my age is " + this.age);
        }
};
Person.introduction();

来看一下这段代码。看上去很像数组的定义，只不过数组一般使用数字类型作为下标，而这里我们使用的是字符串。回想一下，其实在JavaScript中，字符串也是可以作为数组下标的，不是吗？好了，这里我们声明了一个对象Person，它有一个name，还有一个age，而且还有一个方法显示出这两个属性。

在JavaScript中，对象就是“键-值”对的形式，具体来说是"string-as-key": object-as-value的形式。也就是说，这个键必须是string类型的，而值可以是任何类型的。那么，方法呢？其实，JavaScript中的function也是一个类型，这个在后面会有描述的，这里仅仅先知道就可以了。这种数学上成为二元组的样式很常见，数组就是这样的，只不过数组的键必须是int。同样，JavaScript的对象也是一个特殊的二元组，只不过键是string类型的。这是不是就像是一种散列？或者说是哈希表？就是这个样子！

如果说你觉得每个属性名都要加一个引号觉得很别扭，那么你大可不加！像下面的语句，JavaScript完全认为你的正确的：

var Person = {
        name: "Tom",
        age: 20,
        introduction: function() {
                alert( "My name is " + this.name + ", my age is " + this.age);
        }
}
Person.introduction();

我比较习惯于这种写法，看上去和Java等语言差不多。

3. 属性的使用

JavaScript中属性的使用或许比较特别。看下面试图使用Person的name属性的四个语句，看上去都差不多，实际上也确实如此：

alert(Person.name);
// alert(Person."name");
alert(Person[ "name"]);
alert(Person[name]);

除去注释掉的一句，其他的三个语句都能够通过解释(由于JavaScript是解释型语言，不是编译型的，因此这里不说是编译)，但是只有1、3句能够取出name属性！第一句和Java没有什么区别，后面的两个显得比较特别，第三句看上去像什么？对了！数组元素的访问！这进一步验证了JavaScript中的数组和对象“本是同根生”。那么，第四句呢？当然是返回undefined！因为数组下标必须是数字或者字符串嘛！

熟悉Java的话或许会对introduction函数有些疑问。Java程序员不会时时刻刻把this加上，除非哪天心血来潮，才会加上这个this。但是，如果你想在JavaScript中偷懒，去掉this，结果只会是报错。这是怎么回事呢？简单来说，在这里的this关键字是必不可少的！这是JavaScript与其他语言的不同。具体为什么，会在以后的文章中说明，现在只是知道就好了——不要在这里偷懒哦~~

4. 更多属性的操作

现在对JavaScript对象属性的认识应该在这样一点上：JavaScript的对象就是一个二元组，或者说就是一个散列或哈希表。如果能明白这一点，就不会对下面的操作有所奇怪了：

5. 对象的constructor属性

在JavaScript中，每个对象都有一个constructor属性。这个constructor属性用来记录对象初始化时的构造函数名字。例如：

var date = new Date();
alert(date.constructor);
alert(date.constructor == "Date"); // false
alert(date.constructor == Date); // true

嗯，这个Date是JavaScript的内置对象。这里的代码看上去很平常。不过，如果你要使用自己写的对象，比如前面的Person，就会发现它的constructor对象怎么是Object？这里有两个问题：第一，我们并没有给Person constructor属性，它怎么会有的？第二，这个constructor属性怎么是object，而不是我们的Person呢？

对于第一个问题，很明显，是JavaScript给我们加上的。事实上，每个JavaScript对象都会有这样一个属性。那么，它的值又怎么是Object呢？这个问题，在我们说道new这个运算符的时候会给大家说明的。这里请大家注意，本文中的对象其实是指的单独的使用new之后得到的对象。也就是说，那个constructor属性是在new运算符的时候获得的。这就涉及到构造函数了——不过这不是本文的重点，以后再说吧~~ :-)

本文出自 “豆子空间” 博客，请务必保留此出处http://devbean.blog.51cto.com/448512/163817