• 理解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);
  • 相关阅读:
    虚拟列表
    vue中使用postcsspxtorem实现适配
    打包工具 rollup.js 入门教程
    后端一次给你10万条数据,如何优雅展示,到底考察我什么
    手写Promise原理
    react路由集中管理及鉴权 reactrouterconfig
    结合代码实践,全面学习前端工程化
    KDE 全局菜单文字颜色不随 Plasma Style 变化
    vue使用intro.js引导组件
    第五章、Vue3高级
  • 原文地址:https://www.cnblogs.com/taoze/p/1930971.html
Copyright © 2020-2023  润新知