学习:DOJO入门-类定义

简介: 一段dojo定义类的代码: dojo.declare( "TestClass", null, { id:"", info: { name : "",age:""}, staticValue:{count:0},...

一段dojo定义类的代码:

dojo.declare(
    "TestClass",
    null,
    {
        id:"",
        info: { name : "",age:""},
        staticValue:{count:0},
        constructor : function(id,name,age) {
            this.id=id;
            this.info.name=name;
            this.info.age=age             
            this.staticValue.count++;  
             }
    }
);
var test=new TestClass(1,"John","12");
console.log("Simple argument id:" + test.id);
console.log("Complex argument info:"+test.info.name+" "+test.info.age);

console.log("count:"+test.staticValue.count);

var test2=new TestClass();
console.log("count:"+test.staticValue.count);

 

第一个参数“TestClass”为类名。

“null”,为指定的父类。

第三个参数是个hash,即是{}之间的部分。

 

id为一个简单参数
info则是一个复杂参数
staticValue则是一个静态变量,“staticValue”是自定义的,只要在构造函数里没有传参改变的变量,都是静态变量,这是dojo特别之处。
constructor则是构造函数。

方法定义:

一段代码:

dojo.declare(
    "TestClass",
    null,
    {
        id:"",
        info: { name : "",age:""},
        staticValue:{count:0},
        constructor : function(id,name,age) {
            this.id=id;
            this.info.name=name;
            this.info.age=age             
            this.staticValue.count++;  
             },
          printInfo:function(){
            return "姓名:"+this.info.name+" 年龄:"+this.info.age;
            }
    }
);
var test=new TestClass(1,"John","12");

console.log(test.printInfo());

printInfo()方法就被定义了。

运行结果如下:

 

>>> dojo.declare( "TestClass", null, { ...st.printInfo()); console.log(test.printInfo());
姓名:John 年龄:12

 

但是,假如我们进行如下修改

dojo.declare(
    "TestClass",
    null,
    {
        id:"",
        info: { name : "",age:""},
        staticValue:{count:0},
        constructor : function(id,name,age) {
            this.id=id;
            this.info.name=name;
            this.info.age=age             
            this.staticValue.count++;  
             },
          printInfo:function(){
            return "姓名:"+this.info.name+" 年龄:"+this.info.age;
            },
          printInfo:function(newName){
            this.info.name=newName;
            return "姓名:"+this.info.name+" 年龄:"+this.info.age;
            }
    }
);
var test=new TestClass(1,"John","12");

console.log(test.printInfo());

console.log(test.printInfo("Mike"));

 

运行结果则是:

 

>>> dojo.declare( "TestClass", null, { ...ntInfo()); console.log(test.printInfo("Mike"));
姓名:undefined 年龄:12
姓名:Mike 年龄:12
 
 
很奇怪吧,出现了“ undefined  
其实这个很好理解,这是因为,和java不同,js是顺序执行的。在类定义部分读到
this.info.name=newName;
this.info.name被重定向到newName,而此时,newName并没有具体的值,即是它是undefined。之前的“John”则被取消掉了。
 
且可以得出结论如下:一个类有三种参数域,全局的(相当于public),局部的(相当于方法体内部的参数,外部访问无效),静态的(相当于public static)
如果在定义的时候,仅在构造函数里通过外部传值修改了参数,则该方法是全局的
如果在定义的时候,在方法体内通过外部传值修改了参数,则该方法是局部的
其他则是静态的。
 
嗯,一看上去肯定不方便,这不是说全局函数其实是不能做任何动作的,简直就是final啊!
解决方案:
 
dojo.declare(
    "TestClass",
    null,
    {
        newName:"1",
        id:"",
        info: { name : "",age:""},
        staticValue:{count:0},
        constructor : function(id,name,age) {
            this.id=id;
            this.info.name=name;
            this.info.age=age             
            this.staticValue.count++;  
             },
          printInfo:function(){
            return "姓名:"+this.info.name+" 年龄:"+this.info.age;
            },
          printInfo:function(newName){
            if(newName!=undefined){
                this.info.name=newName;
            }
            return "姓名:"+this.info.name+" 年龄:"+this.info.age;
            }
    }
);
var test=new TestClass(1,"John","12");


console.log(test.printInfo());
console.log(test.printInfo("Mike"));

 

注意这几行:
if(newName!=undefined){
                this.info.name=newName;
            }

由于是初学,暂只研究出这种方法,坦白说,略囧。

 

以上纯属误解,undefined的出现,确实是和js的顺序执行有关,但是更主要的原因在于,“重载”

dojo不支持方法的重载,但是重载的写法并不会导致出错,而是后定义的方法覆盖先定义的方法。

于是,之前定义的两个printInfo方法,其实只有第二个有效。

所以,当调用printInfo()的时候,参数newName就成undefined了。

 

目录
相关文章
|
11月前
|
自然语言处理 JavaScript 前端开发
📕 重学JavaScript: this中的隐式绑定场景
隐式绑定就是根据函数调用的方式来确定函数内部的this指向,这种方式比较隐晦,你需要注意一些规则和特例。 今天我们就专门来聊聊关于隐式绑定的几个场景。
67 0
|
JavaScript 前端开发 Java
都2022年了你不会还没搞懂JS原型和继承吧
最近笔者再面试过程中发现能把JS原型、原型链、JS继承问题说明白的寥寥无几。因此,今天笔者再带大家来复习一遍,希望小伙伴们能有意外收获。
98 0
|
JavaScript 前端开发
JavaScript学习笔记(十四) 继承
JavaScript学习笔记(十四) 继承
65 0
|
设计模式 JavaScript 前端开发
javascript设计模式(二)----基于原型编程的js(下
javascript设计模式(二)----基于原型编程的js(下
69 0
|
前端开发 JavaScript Java
重学前端 8 # JavaScript中的原型和类
重学前端 8 # JavaScript中的原型和类
69 0
|
前端开发 JavaScript Java
重学前端 7 # JavaScript对象:面向对象还是基于对象?
重学前端 7 # JavaScript对象:面向对象还是基于对象?
76 0
|
前端开发
前端知识案例77-javascript基础语法-成员变量
前端知识案例77-javascript基础语法-成员变量
32 0
前端知识案例77-javascript基础语法-成员变量
|
JavaScript 前端开发
🍉JavaScript进阶——构造函数和原型
🍉JavaScript进阶——构造函数和原型
80 7
🍉JavaScript进阶——构造函数和原型
|
JavaScript 前端开发
🍉JavaScript进阶——继承
🍉JavaScript进阶——继承
42 7
🍉JavaScript进阶——继承
|
JavaScript 前端开发
JavaScript 进阶第九章(原型链继承)
JavaScript 进阶第九章(原型链继承)
72 0