JavaScript 常用功能代码

最新推荐文章于 2021-01-26 10:35:32 发布

原创最新推荐文章于 2021-01-26 10:35:32 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #F# #prototype #ViewUI

本文介绍了JavaScript中的各种实用技巧，包括iframe窗体间通信、弹出窗体返回值、作用域规则、继承机制以及call、apply和bind的用法。通过这些技巧，开发者可以更好地理解和运用JavaScript来解决实际问题。

1. 使用 iframe 时，父窗体与子窗体之间的相互调用

// 父窗体调用子窗体内的函数
window.frames['ifm_id'].valueChange("id_101");
// 子窗体调用父窗体的函数
parent.refreshTree("nodeId_202");

2. 弹出窗体与返回值

// 弹出窗体
var url = "http://www.baidu.com";
win=window.showModalDialog(url,window,"dialogLeft:400;dialogTop:200;dialogWidth:560px;dialogHeight:380px;scroll:yes;menubar:no;toolbar:no;status:no;");
// 在弹出窗体中设置返回值
var result = new Array();
result[0] = "id_101";
result[1] = "name_202";
window.returnValue = result;
window.close();

3. javascript 作用域[只有全局作用域和函数作用域,javascript没有块作用域]

// 1. 全局作用域
var id = "global variable";    // 1.1 在函数外部定义的变量
function showMsg(){    
    message = "global message";// 1.2 未定义而直接赋值的变量
                               //     在第一次使用时被定义为全局变量
}
// 2. 函数作用域
function doCheck(){
    var data = "function data";// 2.1 在函数内部定义的变量
}

4. javascript 继承机制

// 1. 对象冒充继承
function Person(strName){
    // private fields
    var name = strName;
    // public methods
    this.getName = function(){
        return name;
    };    
}
function Student(strName,strSchool){
    // 定义父类的属性及方法    
    this.parent = Person;
    this.parent(strName);
    delete this.parent;        // 删除临时变量 parent
    // 定义新属性及方法    
    // private fields
    var school = strSchool;
    // public methods
    this.getSchool = function(){
        return school;
    };     
}
// 2. Funtion 对象的 call(..) 或 apply(..) 继承
//    call 和 apply 的区别在于：
//      call  的第二个参数为可变参数;
//      apply 的第二个参数为 Array;
function Animal(strName,intAge){
    // private fields
    var name = strName;
    var age = intAge;
    // public methods
    this.getName = function(){
        return name;
    }; 
    this.getAge = function(){
        return age;
    };
}
function Cat(strName,intAge,strColor){
    // 定义父类的属性及方法    
    Animal.call(this,strName,intAge);
    // Animal.apply(this,new Array(strName,intAge));
    // 定义新属性及方法    
    // private fields
    var color = strColor;
    // public methods
    this.getInfo = function(){
        return "name:" + this.getName() + "\n"
             + "age:" + this.getAge() + "\n"
             + "color:" + color;
    };
}
// 3. prototype 继承
//    prototype 声明的属性及方法被所有对象共享
//    prototype 只有在读属性的时候会用到
Function.prototype.extend = function(superClass){
    // 此处的 F 是为了避免子类访问父类中的属性 this.xxx
    function F(){};
    F.prototype = superClass.prototype;
    // 父类构造函数
    this.superConstructor = superClass;
    this.superClass = superClass.prototype;
    this.prototype = new F();
    this.prototype.constructor = this;
};
Function.prototype.mixin = function(props){    
    for (var p in props){        
        this.prototype[p] = props[p];        
    }
};
function Box(){}
Box.prototype = {    
    getText : function(){
        return this.text;
    },
    setText : function(text){
        this.text = text;
    }
};
function CheckBox(){}
CheckBox.extend(Box);
CheckBox.mixin({
    isChecked : function(){
        return this.checked;
    },
    setChecked : function(checked){
        this.checked = checked;
    }
});

5. call , apply & bind

// thisArg 表示在 fun 内部时 this 所指示的对象
// call & apply 将立即执行 fun 并返回结果
var result = fun.call(thisArg,arg1,...);
var result = fun.apply(thisArg,[argsArray]);
// thisArg 表示在 fun 内部时 this 所指示的对象
// bind 返回的是一个匿名函数
var tmpfun = fun.bind(thisArg);
var result = tmpfun(arg1,...);

<script type="text/javascript">
/**
 * 扩展 Function 的功能
 */
Function.prototype.bind = function(obj){
    var method = this;
    var tmpfun = function(){
        return method.apply(obj,arguments);
    };
    return tmpfun;
}
function Parent(){
    this.name = "parent";
}
function Child(){
    this.name = "child";
    this.getName = function(time){
        return time + " " + this.name;
    };
}
var parent = new Parent();
var child = new Child();
alert(child.getName(1));                // show 1 child
alert(child.getName.call(parent,2));    // show 2 parent [call & apply 会立即执行]
var tmpfun = child.getName.bind(parent);// bind 不会立即执行
alert(tmpfun(3));                       // show 3 parent
</script>

6. js "==" Operator

转换规则
   如果一个操作数是 Boolean 值，则比较之前将其转成数字：false -> 0, true -> 1;
   如果一个操作数是数字，另一操作数是字符串，则比较之前将字符串转成数字;
   如果一个操作数是对象，另一操作数是数字或字符串，则比较之前会将对象转为基本类型，
       引擎会先尝试调用 valueOf(),如果 valueOf() 没有 override 或返回一个对象，
       则引擎会尝试调用 toString(),如果 toString() 没有 override 或返回一个对象,则抛出异常;
   如果是两个对象进行比较，则判断它们是否引用同一对象;
   如果一个操作数是 NaN, == 将返回 false, != 将返回 true;
   null 和 undefined 与其它值比较将返回 false,
       但 null == null, undefined == undefined, null == undefined;
   参与比较时 null 和 undefined 不能转为其它值;

7. END.

附录：

1. Mozilla developer center JavaScript Reference
https://developer.mozilla.org/en/JavaScript/Reference

2. Methods
https://developer.mozilla.org/en/DOM/window#Methods