举例讲解JavaScript中关于对象操作的相关知识
从数组到对象
rush:js;">
var myarr = ['red','blue','yellow','purple'];
myarr;// ["red","blue","yellow","purple"]
myarr[0];//"red"
myarr[3];//"purple'
数组大家都很熟悉吧，我们可以理解为一个Key对应一个Value，而这个Key在数组中，已经默认了(如上述代码，它的key分别是0,1,2,3 value是red,blue,yellow,purple)。
那么一个对象就可以理解为一个自定义Key的数组。看如下代码
rush:js;">
var hero ={
breed: 'Turtle',occupation:'Ninja'
};
上述代码我们可以了解到:
1.对象的名称叫hero.
2.和数组不同的是用符号'{'替代了'['
3.对象的属性(如breed和occupation)用符号','分隔
4.Key和Value的语法是 KEY:VALUE
还有需要注意到是不管属性(也就是key)是放在双引号，单引号，或者是没有引号，他们的结果都是一样的，下面的代码是一样的
rush:js;">
var obj={a:1,b:2};
var obj={'a':1,'b':2};
var obj={"a":1,"b":2};
推荐的写法是不要把属性放在引号中。除非属性的名称是特殊符号，如数字，或者带有空格等等。
本篇很简单，要注意的是，定义数组的符号[] ，而定义对象的符号为{}
学习数组的时候，我们可以说数组里包含了元素，当谈到对象的时候，我们可以改变下说法
rush:js;">
var animal={
name: 'dog',run:function(){
alert("running");
}
}
name就是属性(property),run本身是个函数，在这个对象中，我们叫方法(method)。
访问对象的属性
有两种方式访问对象的
属性。
用数组的形式如：animal['name']
用点的方式访问：animal.name
第一种访问
方法适合任意情况。但是如果
属性是无效的命名的话，如上一节所说的
属性命名'1name'或者'my name'这种情况用点的方式访问就是
错误的。这一点要注意。
下面具体看一个对象访问的例子
<div class="jb51code">
<pre class="b
rush:js;">
var book = {
name:'Javascript Fundation',published:jixie.
author:{
f
irstname:'nicholas',lastname:'xia'
}
};
1.获取author对象的firstname属性
rush:js;">
book.author.f
irstname //nicholas
2.获取author对象的lastname属性，我们尝试用另一个写法
rush:js;">
book['author']['lastname'] //xia
我们也可以用混合的访问方式
book.author['lastname']或者book['author'].lastname 这些方式都是有效的，要灵活去运用
在属性是动态的情况下，一般用数组的访问对象的方法。
<div class="jb51code">
<pre class="b
rush:js;">
var key ='lastname'
book.author[key];//xia
rush:js;">
var hero = {
breed: 'Turtle',occupation: 'Ninja',say: function() {
return 'I am ' + hero.occupation;
}
}
hero.say();
访问对象的方法很简单，有点就行，不过也可以用数组的方式，看起来比较诡异
如 hero['say']();
不推荐这种写法，访问对象的时候尽量用点的方式。
因为Javascript是动态语言，所以在任何时候都可以
修改对象的
属性和
方法。看如下的例子
rush:js;">
var hero={};
hero是个空的对象。
rush:js;">
typeof hero.breed;//undefined
说明了hero对象没有breed的属性
接下来可以添加属性和方法了
rush:js;">
hero.breed = 'turtle';
hero.name = 'Leonardo';
hero.sayName = function() {return hero.name;};
rush:js;">
hero.sayName();//Leonardo
rush:js;">
delete hero.name;//true
hero.sayName();//
方法失败
This
rush:js;">
var hero = {
name : 'Rafaelo',sayName : function(){
return this.name;
}
}
hero.sayName();//Rafaelo
this的意思就是这个对象的意思,关于this的复杂问题以后在讨论。
构造函数(Constructor Functions)
另一种创建对象的方式是用构造
函数，直接看例子
rush:js;">
function Hero(){
this.name ='Refaelo';
}
var hero = new Hero();
hero.name;//Refaelo
这种方式的好处在于创建个对象的时候可以传入参数
rush:js;">
function Hero(name){
this.name = name;
this.whoAreYou = function(){
return this.name;
}
}
var hi = new Hero('nicholas');
hi.whoAreYou();//nicholas
要注意的时候，不要丢点 new 操作符。。。
全局对象
上几节我们说过
全局变量的事情，已经说过了我们要尽量避免使用
全局变量，当我们学过对象的时候，我们在看看
全局变量究竟怎么回事，其实
全局变量就是全局对象
一个属性了。如果主机的环境是web浏览器，
全局变量就是window。
如果我们定义 var a = 1;
我们可以这么理解：
一个全局变量a，
做为window的
一个属性a.我们可以这么
调用window.a或者window['a']
再看看预定义
函数的parseInt('123 m');我们可以写为window.parseInt('123 m');
constructor 属性
对象建立之后，
后台有创建了个隐藏
属性，constructor.
rush:js;">
h2.constructor;//Hero(name)
因为constructor的属性是对函数的引用。如果你不关心h2对象是由什么创建的，而只关心创建一个新的对象和h2相似就用如下写法
rush:js;">
var h3 = h2.constructor('Nicholas');
h3.name ;//Nicholas
我们来看看如下写法的意思
rush:js;">
var o = {};
o.constructor;//Object()
typeof o.constructor;//"functions"
其实就是隐藏了 new Object(),更深的层次应用以后几个教程在说明。
instanceof 操作符
用instanceof来判断对象是否是指定的构造
函数创建的。
rush:js;">
function Hero(){
}
var h = new Hero();
var o = {};
h instanceof Hero;//true
h instanceof Object;//false
o instanceof Object;//true
要注意的是instanceof 后面的是个引用 不是个函数 如错误写法 h instanceof Hero();//错误
可以用构造
函数来创建个对象，也可以通过普通
函数返回对象来创建对象
rush:js;">
function factory(name){
return {
name:name
};
}
用这个方法创建对象
rush:js;">
var o = factory('one');
o.name
让我们接下来看看比较少见的构造函数返回对象的例子
rush:js;">
function C(){
this.a = 1;
return {b:2};
}
var c2 = new C();
typeof c2.a //undefined
c2.b; // 2
说明了 并不返回this了 而是返回了对象{b:2}。。这点要注意
传递对象
如果传递
一个对象到
函数里，那么传递的是个引用。如果改变了这个引用，也就会改变原始的对象。
下面是个对象赋值的例子
rush:js;">
var original = {name:'nicholas'};
var
copy =original;
copy.name;//'nicholas';
copy.name = 'Jason';
original.name;// 'Jason';
修改了copy的属性name 也就等于修改了original的属性name
对象传参到函数中，也是同样的。
rush:js;">
function modify(o){
o.name ='Jason'
}
var original={name:'nicholas'};
modify(original);
original.name;//Jason
对象的比较
两个对象的比较如果是true的话，那么他们就是同
一个对象的引用。
rush:js;">
var fido ={breed:'dog'};
var benji ={breed:'dog'};
benji===fido; //false;
benji==fido; //false;
以上的代码都不是同一引用，所以都是false
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
