?
?
?
?
之前,我们已经学习了javascript的基本数据类型,数组和函数。在下面的文章中,我们会了解到一些关于对象的知识。比如如何创建和使用对象,以及对象的构造函数等。
?
从数组到对象
我们大家都知道,数组就是一序列元素的组合,每一个元素有他对应的数字索引,从0依次递增。
对象和数组很相似,不同的是对象的索引是由你自己来定义的。索引不局限于用数字来表示,可以用比较好记的关键字来表示。作为对象的属性名。比如:
var hero = { breed: 'Turtle', occupation: 'Ninja' };
?
在这个对象中,包含了两个属性名,也就是索引 ,"breed" 和 "occupation" 。
在对象中,属性名可以用单引号或者双引号引起来,也可以不加。比如:
var o = {prop: 1}; var o = {"prop": 1}; var o = {'prop': 1};
一般的,为了节约js文件的大小,通常把引号省略了。但是在有些情况下,又必须加:
- 如果属性的名字是javascript的保留字时,必须加引号;
- 如果属性的名字中包含空格或者(数字、字母、下划线)以外的字符,必须加引号;
- 如果属性名以数字开头时,也必须加引号。
总之,如果你使用的属性名不符合javascript中变量名的定义的话,你都必须加引号。比如:
var o = { something: 1, 'yes or no': 'yes', '!@#$%^&*': true };
在定义对象时,你可以用 [] 或者 {} 来定义。用 [] 的方式叫做数组字面标记法,用 {} 的方式叫做对象字面标记法。
元素,属性,方法
当我们说数组时,你可能会说数组中包含元素,当我们说对象时,你可能会说对象中包含属性。这在javascript中,并没有什么区别。
一个对象的属性可以是一个方法,因为方法也是数据。在这种情况下,我们说这个属性是一个方法。
var dog = { name: 'Benji', talk: function(){ alert('Woof, woof!'); } };
在 javascript 中,也可以在数组元素上定义方法并且可以执行,但是这种方式很少使用。
var a = []; a[0] = function(what){ alert(what); }; a[0]('Boo!');
访问对象的属性
有两种方法可以访问一个对象的属性:
- 用方括号[],比如hero['occupation']
- 用点号,比如hero.occupation
用点号可以方便我们读写,但是如果属性名是不合法的时候,用点号就不行。
我们继续看上面的hero对象:
var hero = { breed: 'Turtle', occupation: 'Ninja' };?
// 用点号访问属性 hero.breed; // "Turtle" // 用方括号访问属性 hero['occupation']; // "Ninja" // 访问不存在的属性,将会返回undefined 'Hair color is ' + hero.hair_color; // "Hair color is undefined"?
对象可以包含任何数据,包括对象。
var book = { name: 'Catch-22', published: 1961, author: { firstname: 'Joseph', lastname: 'Heller' } };
要获得 author 中的 firstname 属性的值,可以这样访问:
book.author.firstname; // "Joseph"
或者用方括号
book['author']['lastname']; // "Heller"
也可以混合使用
book.author['lastname']; // "Heller" book['author'].lastname; // "Heller"
有时候我们要访问的属性名是未知的。那么在运行时,可以把属性名动态的存在一个变量上。然后用方括号的方式访问。这种情况下,用点号是不行的。
?
var key = 'firstname'; book.author[key]; // "Joseph"
调用对象的方法
可以说,方法只不过是特殊的属性,所以,你可以像访问属性一样访问方法。
var hero = { breed: 'Turtle', occupation: 'Ninja', say: function() { return 'I am ' + hero.occupation; } } hero.say(); // "I am Ninja" hero['say'](); // "I am Ninja"
修改属性和方法
由于javascript是一种动态语言,它允许使用者在任何地方修改对象的属性和方法。包括添加,删除属性等。
我们可以先传进一个空的对象来试试:
var hero = {};
?
然后访问一个不存在的属性:
typeof hero.breed; // "undefined"
添加一些属性和方法在对象中:
hero.breed = 'turtle'; hero.name = 'Leonardo'; hero.sayName = function() { return hero.name; };
?
试一下调用对象的方法:
hero.sayName(); // "Leonardo"
删除属性:
delete hero.name; // true
然后再次调用刚才的方法:
hero.sayName(); // reference to undefined property hero.name
在前面的例子中,sayName方法使用的是hero.name来访问hero对象的name属性。其实可以使用this关键字来访问。
var hero = { name: 'Rafaelo', sayName: function() { return this.name; } } hero.sayName(); // "Rafaelo"
?所以this在这里表示当前对象。
构造函数
创建对象的另一种方法是使用构造函数。
function Hero() { this.occupation = 'Ninja'; }
为了创建对象,我们将会使用到new操作符;
var hero = new Hero(); hero.occupation; // "Ninja"
使用构造函数的好处是,它可以接受参数。
function Hero(name) { this.name = name; this.occupation = 'Ninja'; this.whoAreYou = function() { return "I'm " + this.name + " and I'm a " + this.occupation; } } var h1 = new Hero('Michelangelo'); var h2 = new Hero('Donatello'); h1.whoAreYou(); // "I'm Michelangelo and I'm a Ninja" h2.whoAreYou(); // "I'm Donatello and I'm a Ninja"
习惯上,我们会把构造函数的第一个字面大写,以便和其他方法区别开。如果你在调用一个构造方法时,忘记写new操作符,这个不会报错,但是代码不会为你创建一个对象出来。
var h = Hero('Leonardo'); typeof h; // "undefined"
这样,Hero只不过是像调用其他方法一样,方法中没有return。所以默认return了undefined并赋值给变量h。
全局对象
实际上,环境(比如浏览器)会为我们提供一个全局的对象。我们在代码里声明的全局变量,其实都是这个全局对象的属性。对于浏览器而言,这个全局变量就是window。
你可以定义一个全局变量,然后用各种方式从window上访问试试。
var a = "aaaaa"; window.a; // "aaaaa" window['a']; // "aaaaa"
就刚才的那个例子,Hero没有用new操作符。然而Hero方法里又使用了this这个关键字,this表示当前的对象,其实这个时候,当前对象就是这个全局对象。所以,此对象上会有一个name属性。
function Hero(name) { this.name = name; } var h = Hero('Leonardo'); name; // "Leonardo" window.name; // "Leonardo"
可以发现,name这个属性加到了window上面了。
所以,只有在使用了new关键字时,才能返回这个new出来的对象给变量h,那么这个时候,this所指的对象就是这个新的对象了。
?
constructor属性
其实在我们创建对象是,有一个特殊的属性会做一些幕后的工作。它就是constructor。它是构造方法的一个引用属性,我们也可以用它来创建对象。
function Hero(name) { this.name = name; } var h2 = new Hero('Leonardo'); h2.constructor; // Hero(name)
可以看到,它其实就是构造方法。
由于constructor引用的是一个方法,说以我们可以往这个constructor里面传入参数来建立一个新对象。
var h3 = new h2.constructor('Rafaello'); h3.name; // "Rafaello"
但是,值得注意的是,如果使用字面方式来定义一个对象的话,那么他的constructor属性将会指向他的内置对象Object的构造方法。
var o = {}; o.constructor; // Object() typeof o.constructor; // "function"
instanceof
使用instanceof关键字,可以用来检测对象是否是由某个特定的构造方法创建的。
function Hero(){} var h = new Hero(); var o = {}; h instanceof Hero; // true h instanceof Object; // true o instanceof Object; // true
返回对象的函数
其实,我们还可以用另外的方式来创建对象,就是在函数中返回对象。
比如下面这个简单的factory方法
function factory(name) { return { name: name }; } var o = factory('one'); o.name; // "one" o.constructor; // Object()
实际上,我们还可以改变构造函数的默认行为。
通常的:
function C() {this.a = 1;} var c = new C(); c.a; // 1
这样一个构造函数,方法最后会返回this这个对象。
function C2() {this.a = 1; return {b: 2};} var c2 = new C2(); typeof c2.a; // "undefined" c2.b; // 2
但是现在在构造函数中返回的是另一个对象。注意这里只有当函数返回的是另一个对象是,这个返回this的默认行为才会被改变。
对象的传递
当我们复制一个对象或者把对象传入函数的时候,其实他传递的是一个对象的引用。因此,对引用所做的任何改变,都会改变实际的对象。
var original = {howmany: 1}; var copy = original; copy.howmany; // 1 copy.howmany = 100; original.howmany; // 100
把对象传入函数也是一样的。
var original = {howmany: 100}; var nullify = function(o) {o.howmany = 0;} nullify(original); original.howmany; // 0
对象的比较
当比较两个对象是否相等时,只有这两个引用的对象是同一个的时候,才返回true。
var fido = {breed: 'dog'}; var benji = {breed: 'dog'}; benji === fido; // false benji == fido; // false
如果定义一个新的变量mydog,然后把其中一个对象benji赋值给他,那么benji就会和mydog指向同一个对象。
var mydog = benji; mydog === benji; // true mydog === fido; // false
?
在下一篇文章中,会对javascript的内置对象做一些说明。