`

理解JavaScript中的对象

 
阅读更多

JavaScript有一种object数据类型,但是这种对象不同于c#或vb中的对象,在c#中,我们通过类创建一个对象,一个类相当于创建对象的模板,定义了对象的属性和方法,这些对象和方法将永远固定,我们不能在运行时不能增加对象的属性和方法。
    在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);
分享到:
评论

相关推荐

    深入理解JavaScript系列

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

    深入理解JavaScript系列(.chm)

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

    全方位理解Javascript面向对象-js族谱.png

    全方位理解Javascript面向对象-js族谱

    深化理解JavaScript中的对象复制(Object Clone)_.docx

    深化理解JavaScript中的对象复制(Object Clone)_.docx

    JavaScript 面向对象编程详细讲解文档

    原型是理解继承概念的关键, 我们将会教你如何建立原型, 如何检测一个对象是否是另外一个对象的原型, 及其 JavaScript 的模型与Java 面向对象编程之间的区别。我们同样会向你展示如何检测对象所包含的各种属性的方法...

    JavaScript面向对象编程指南.pdf

    JavaScript面向对象编程指南,可以快速对面向对象的理解

    JavaScript对象笔记.rar

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化。例如,我们一个人就是一个对象,但是编程...在后面的JavaScript对象笔记中,记录了菜鸟在学习JavaScript对象的大多数资源,希望这些资源对你也有价值。

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

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

    详解JavaScript中的属性和特性

    理解JavaScript中对象的本质、对象与类的关系、对象与引用类型的关系 对象属性如何进行分类 属性中特性的理解  第一部分:理解JavaScript中对象的本质、对象与类的关系、对象与引用类型的关系 对象的本质:ECMA-...

    深入理解javascript原型和闭包

    深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系

    理解JAVASCRIPT中hasOwnProperty()的作用

    JavaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性。 hasOwnProperty()使用方法: object.hasOwnProperty(proName)其中参数object是必选项。一个对象的实例。proName是必...

    Javascript面向对象程序设计培训讲义

    由于JS不是纯的面向对象的语言,所以对象的继承是以原型函数的形式继承的,很多人刚开始接触的时候不太理解,但是JS这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能...

    【JavaScript源代码】JavaScript中的Proxy对象.docx

    JavaScript中的Proxy对象  Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。 语法 const proxy = new Proxy(target, handler);  target: 要使用Proxy包装的目标...

    JavaScript对象.xmind

    自己总结的JavaScript对象的笔记,绘制了详细的思维导图,每个思维导图中均有详细的博文解释,方便大家学习和理解,免费分享给大家。适合网页前端的爱好者和学习者

    Javascript对象字面量的理解_.docx

    Javascript对象字面量的理解_.docx

    深入理解JavaScript

    基于对象很好理解,毕竟在 JavaScript 中⼀切都是对象,我们随时可以使⽤点号操作符来调 某个对象的⽅法。但是⼗多年前,我们编写 JavaScript 程序时,都是像 C 语⾔那样使⽤函数来组织我们的程序的,只有在论坛的...

    全面理解面向对象的 JavaScript(来自ibm)

    当今 JavaScript 大行其道,各种应用...要掌握好 JavaScript,首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的干扰,全面地从函数式语言的角度理解 JavaScript 原型式面向对象的特点。把握好这一

    JavaScript核心(对象、原型、继承、上下文、闭包、this).pdf

    面向对象概念(对象封装,各种继承,闭包原理,this作用域等)介绍清晰易懂

Global site tag (gtag.js) - Google Analytics