理解JavaScript中的对象 推荐

在JavaScript没有类的定义,创建对象时没有固定的模板,可以动态的创建新的属性和方法,在动态创建新属性的时候,我们能做的就是为这个属性创建新的值,下面一个例子就是创建一个对象并增加x,y两个属性。


代码如下:

var Programmer = new Object();
Programmer.name = "Young";
Programmer.age = 25;
alert(Programmer.name + " : " + Programmer.age);

JavaScript对象完全不同于c#或vb对象,JavaScript对象可以看成一组健/值对的集合,用对象.属性名来访问一个对象属性。我们可以把JavaScript对象看成.NET framework中Dictionary类,我们可以通过"[]"操作符来创建对象属性。


代码如下:

var Programmer = new Object();
Programmer["name"] = "Young";
Programmer["age"]= 25;
document.getElementById("message").innerHTML=Programmer["name"] + " : " + Programmer["age"];
alert(Programmer.name + " : " + Programmer.age); 通过上面的例子可以发现两种访问对象的方法是一样的。如果一个属性没有创建,将返回"undefined"。

我们同样可以将函数添加为健/值对集合的值,这样就构建为对象的方法,


代码如下:

var Programmer = new Object();
Programmer["name"] = "Young";
Programmer.age= 25;
Programmer.speak=function(){
alert(this.name + " : " + this["age"]);
}
Programmer.speak();

在上面的代码中我们交替使用"."和"[]"来定义可访问属性、方法,者=这两种方法的一样的,有时这些操作符会导致一些概念上的混淆,在为一个已经存在的属性设置新值是表达的不是很清晰,下面我们介绍第三种语法可以更加明确的表达我们的意图。


代码如下:

var Programmer =
{
name : "Young",
age : 25,
speak : function(){ alert(this.name + " : " + this.age); }
}
Programmer.speak(); 上面的代码更加清晰的表达了对象初始化的开始和结束,我们还可以用这种方法在独享中嵌套对象。 var Programmer =
{
Figure : {name : "Young" , age : 25 },
Company : {name : " Arcadia" , address : "ShenZheng"},
speak : function(){
alert("name:"+this.Figure.name+"\nage:"+this.Figure.age + "\nCompany:"+this.Company.name+" of

"+this.Company.address);
}
};
Programmer.speak();

这种语法因为其清晰的意图和紧凑的代码格局而非常流行,你可以在各种流行的JavaScript frameworks中看到,包括目前在互联网上流行的JavaScript Object Notation(JSON),JSON是一种轻量级的数据交换格式,同时也易于机器解析和生成,语法也非常严格。JSON允许JavaScript在互联网上交换数据,我们可以用eval将JSON对象转化为本地JavaScript对象。


代码如下:

var Programmer="({name: 'Young',age : 25})";
var p = eval(Programmer);
alert(p.name + ',' + p.age);

通过上面的讨论我们知道了明白了所有的JavaScript对象都是一组字典。在JavaScript中还有另外一个重要的东西——函数。
1:在JavaScript中,函数都是一个对象。这一点完全不同于c#中的方法。我们看下面一个例子。


代码如下:

function add(point1, point2)
{
var result = {
x : point1.x + point2.x,
y : point1.y + point2.y
}
return result;
}
var p1 = { x: 1, y: 1 };
var p2 = { x: 2, y: 2 };
var p3 = add(p1, p2);
alert(p3.x + "," + p3.y);2:将函数作为对象的方法。 var Boy=
{
name:"Young",
Love:function(Girl){
return this.name+" 爱上了 "+Girl.name
}
}
var Girl={
name:"Jing"
}
alert(Boy.Love(Girl));

现在问题是两个类似的对象,一个有love方法,一个没有,因为我们并没有定义类似c#的类,而只是简单的创建两个对象,如果你期望在两个对象都有love方法可以象下面那样定义。


代码如下:

function LoveRelation(person){
alert(this.name+" 爱上了 "+person.name);
}
var person1={
name:"Young",
Love:LoveRelation
}
var person2={
name:"Jing",
Love:LoveRelation
}
person1.Love(person2);

上面的代码看上去想创建一个person类,然后创建person类两个实例,以使这两个实例具有相同的特征,显然上面代码不够。我们可以通过两种途径来满足这种要求。
途径1:


代码如下:

function Person(n)
{
this.name=n;
this.Love=function(person)
{
alert(this.name+" 爱上了 "+person.name);
}
}
var person1=new Person("Young");
var person2=new Person("Jing");
person1.Love(person2);

途径2:利用JavaSctipt对象的prototype属性。


代码如下:

function Person(n)
{
this.name=n;
}
Person.prototype.Love=function(person)
{
alert(this.name+" 爱上了 "+person.name);
}
var person1=new Person("Young");
var person2=new Person("Jing");
person1.Love(person2);
person2.Love(person1);

上面的例子中,我们可以将Person函数看成Person对象的构造器,而所有通过此构造器构造出来的对象共用一个prototype属性。
在Douglas Crockford的<a href="http://www.crockford.com/javascript/private.html">Private Members In JavaScript"</a>中,作者为我们详细的演示了如何创建对象的私有成员,其思想不再详细讲解,我们简单的重写一下那个 demo


代码如下:

function Point(x, y)
{
this.get_x = function() { return x; }
this.set_x = function(value) { x = value; }
this.get_y = function() { return y; }
this.set_y = function(value) { y = value; }
}

Point.prototype.print = function()
{
return this.get_x() + ',' + this.get_y();
}

var p = new Point(2,2);
p.set_x(4);
alert(p.print());

最后我们讲解一下javascript对象的命名空间,命名空间可以削除一些同名类型间的冲突,学习过c#的朋友对这点一定非常清除了,我们可以在javascript中通过以下代码开定义命名空间。 var Arcadia = {}


代码如下:

Arcadia.Person=function(n)
{
this.name=n;
}
Arcadia.Person.prototype.Love=function(person)
{
alert(this.name+" 爱上了 "+person.name);
}
var person1=new Arcadia.Person("Young");
var person2=new Arcadia.Person("Jing");
person1.Love(person2);

(0)

相关推荐

  • 理解JavaScript中的对象 推荐

    在JavaScript没有类的定义,创建对象时没有固定的模板,可以动态的创建新的属性和方法,在动态创建新属性的时候,我们能做的就是为这个属性创建新的值,下面一个例子就是创建一个对象并增加x,y两个属性. 复制代码 代码如下: var Programmer = new Object(); Programmer.name = "Young"; Programmer.age = 25; alert(Programmer.name + " : " + Programmer.

  • 深入理解JavaScript中的对象复制(Object Clone)

    JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b.k2 = 4; 如果只想改变b而保持a不变,就需要对对象a进行复制. 用jQuery进行对象复制 在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制. a = {k1:1, k2:2, k3:3}; b = {}; $.extend(b,a); 自定义clone

  • 理解JavaScript中的对象

    JavaScript中对象的简介 我们知道生活中客观存在的一切事物皆为对象,那在程序中的对象是什么样子呢?我们可以将程序中的对象理解为客户端世界中的对象在一种计算机中的一种表示方式.所有的编程语言中提到的对象其性质都是类似的,它往往对应内存中的一块区域,在这个区域中存储对象的属性或方法信息. JavaScript中对象的创建 基于{}符号创建对象 在JS中我们可以直接基于{}定义对象,在对象内容定义属性和方法,例如: 在JS中我们可以将对象理解为用于封装属性和方法的一个结构体,例如 如果需要反复

  • 深入理解JavaScript中的对象

    JavaScript是一种面向对象编程(OOP)语言.一种编程语言可以被称为面向对象的,它为开发者提供了四种基本功能: 封装 - 存储相关的信息,无论是数据或方法,还是对象 聚合 -  存储一个对象到另一个对象的内部 继承 - 类的能力依赖于另一个类(或类数),用于其部分的属性和方法 多态性 - 编写函数或者方法,在各种不同的方式工作 对象是由属性.如果属性包含一个函数,它被认为是一个对象的方法,否则,该属性被认为是一个属性. 对象属性: 对象的属性可以是任何三种基本数据类型的,或者任何抽象数据

  • 带你彻底理解JavaScript中的原型对象

    一.什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承. 1.1 函数的原型对象 ​ 在JavaScript中,我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即:prototype的属性的值是这个对象 ).这个对象B就是函数A的原型对象,简称函数的原型.这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说:c

  • 深入浅析javascript中的作用域(推荐)

    所谓的作用域,可以简单理解为一个可以读.写的范围(区域),有些js经验的同学可能会说:"js没有块级作用域",js除了全局作用域外,只有函数可以创建作用域.作用域的一个好处就是可以隔离变量. 我们通过一些例子来帮助我们理解js中的作用域. alert(a); var a = 1; 如果对作用域一点不了解的同学可能会说 alert的是1或者报错:但实际上是undefined: 说到这里,我们首先说一下js逐行解析代码之前做的一些准备工作, js在逐行读代码之前,会做一些"预解析

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • javascript中的对象创建 实例附注释

    javascript中的对象创建声明: var obj = {}; 或者 var obj = new Object(); 为对象加入属性,方法: //=====第一种写法==================================== obj.name = '小明'; //为对象加属性 obj.updateName = function(name){//为对象定义updateName方法 this.name = name; } alert(obj.name); obj.updateNam

  • 全面理解JavaScript中的继承(必看)

    JavaScript中我们可以借助原型实现继承. 例如 function baz(){ this.oo=""; } function foo(){ } foo.prototype=new baz(); var myFoo=new foo(); myFoo.oo; 这样我们就可以访问到baz里的属性oo啦.在实际使用中这个样不行滴,由于原型的共享特点(数据保存在了堆上), 所有实例都使用一个原型,一但baz的属性有引用类型就悲剧了,一个实例修改了其他实例也都跟着变了...wuwuwu 自

  • 理解JavaScript中worker事件api

    如果你不是很了解Event事件,建议先这篇文章<理解javascript中DOM事件>. 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的worker对象新开一个接口,此接口会处理客户端与indexedDB数据库之间的通信.这里的数据库是指浏览器数据库.如果,你需要判断浏览器是否支持worker对象,详见如下代码.或者浏览器是否支持indexedDB数据库,详见同下,二者判断最好选择前者.因为IE不支持indexedDB . if(window.Worker){ dosometh

随机推荐