看到别人写的一个js，有些地方不明白，请大家帮忙解释下！

huangwenquan123 2010-12-26 07:28:35 


 setValue: function(_this){

        return function(){

//为什么这里要return一个function?而不是直接设置值呢？这样写是什么意思？

            _this.obj.value=this.seqs;

            _this.autoObj.className="auto_hidden";

        }        

    },
...全文
140 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
王刚 2010-12-27
  • 打赏
  • 举报
 回复
这是一个javascript中闭包的写法，能在内层函数运行时调用到外层函数中申明的变量，尽管此时外层函数生命周期已结束。
这种方式通常用于延长变量的生命周期。
至于这个地方为什么要返回一个function，那要看具体的上下文环境。
huangwenquan123 2010-12-27
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 wanggang526514 的回复:]
这是一个javascript中闭包的写法，能在内层函数运行时调用到外层函数中申明的变量，尽管此时外层函数生命周期已结束。
这种方式通常用于延长变量的生命周期。
至于这个地方为什么要返回一个function，那要看具体的上下文环境。
[/Quote]你看下那个代码，他好象没多一个扩号setValue()()
huangwenquan123 2010-12-27
  • 打赏
  • 举报
 回复 


//我把全部代码帖出来，这个是之前看到别人写的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title><style>

body {

    margin-left: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

}

.auto_hidden {

    width:204px;border-top: 1px solid #333; 

    border-bottom: 1px solid #333; 

    border-left: 1px solid #333; 

    border-right: 1px solid #333;

    position:absolute;

    display:none;

}

.auto_show {

    width:204px;

    border-top: 1px solid #333; 

    border-bottom: 1px solid #333; 

    border-left: 1px solid #333; 

    border-right: 1px solid #333;

    position:absolute;

    z-index:9999; /* 设置对象的层叠顺序 */

    display:block;

}

.auto_onmouseover{

    color:#ffffff;

    background-color:highlight;

    width:100%;

}

.auto_onmouseout{

    color:#000000;

    width:100%;

    background-color:#ffffff;

}

</style>

<script language="javascript">

<!--

/*

通用: 自动补全(仿百度搜索框)

作者：nj-troy

时间：2010-11-101

*/

var $ = function (id) {

    return "string" == typeof id ? document.getElementById(id) : id;

}

var Bind = function(object, fun) {

    return function() {

        return fun.apply(object, arguments);

    }

}

function AutoComplete(obj,autoObj,arr){

    this.obj=$(obj);        //输入框

    this.autoObj=$(autoObj);//DIV的根节点

    this.value_arr=arr;        //不要包含重复值

    this.index=-1;          //当前选中的DIV的索引

    this.search_value="";   //保存当前搜索的字符

}

AutoComplete.prototype={

    //初始化DIV的位置

    init: function(){

        this.autoObj.style.left = this.obj.offsetLeft + "px";

        this.autoObj.style.top  = this.obj.offsetTop + this.obj.offsetHeight + "px";

        this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px    

    },

    //删除自动完成需要的所有DIV

    deleteDIV: function(){

        while(this.autoObj.hasChildNodes()){

            this.autoObj.removeChild(this.autoObj.firstChild);

        }

        this.autoObj.className="auto_hidden";

    },

    //设置值

    setValue: function(_this){//主要是这里为什么return一个function,什么意思呢？

        return function(){

            _this.obj.value=this.seqs;

            _this.autoObj.className="auto_hidden";

        }        

    },

    //模拟鼠标移动至DIV时，DIV高亮

    autoOnmouseover: function(_this,_div_index){

        return function(){

            _this.index=_div_index;

            var length = _this.autoObj.children.length;

            for(var j=0;j<length;j++){ 

                if(j!=_this.index ){        

                    _this.autoObj.childNodes[j].className='auto_onmouseout';

                }else{

                    _this.autoObj.childNodes[j].className='auto_onmouseover';

                }

            }

        }

    },

    //更改classname

    changeClassname: function(length){

        for(var i=0;i<length;i++){ 

            if(i!=this.index ){        

                this.autoObj.childNodes[i].className='auto_onmouseout';

            }else{

                this.autoObj.childNodes[i].className='auto_onmouseover';

                this.obj.value=this.autoObj.childNodes[i].seqs;

            }

        }

    }

    ,

    //响应键盘

    pressKey: function(event){

        var length = this.autoObj.children.length;

        //光标键"↓"

        if(event.keyCode==40){

            ++this.index;

            if(this.index>length){ 

                this.index=0; 

            }else if(this.index==length){

                this.obj.value=this.search_value;

            }

            this.changeClassname(length);

        }

        //光标键"↑"

        else if(event.keyCode==38){

            this.index--;

            if(this.index<-1){

                this.index=length - 1;

            }else if(this.index==-1){

                this.obj.value=this.search_value;

            }

            this.changeClassname(length);

        }

        //回车键

        else if(event.keyCode==13){

            this.autoObj.className="auto_hidden";

            this.index=-1;

        }else{

            this.index=-1;

        }

    },

    //程序入口

    start: function(event){

        if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){

            this.init();

            this.deleteDIV();

            this.search_value=this.obj.value;

            var valueArr=this.value_arr;

            valueArr.sort();

            if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空，退出

            try{ var reg = new RegExp("(" + this.obj.value + ")","i");}

            catch (e){ return; }

            var div_index=0;//记录创建的DIV的索引

            for(var i=0;i<valueArr.length;i++){

                if(reg.test(valueArr[i])){

                    var div = document.createElement("div");

                    div.className="auto_onmouseout";

                    div.seqs=valueArr[i];

                    div.onclick=this.setValue(this);//这里设置setValue

                    div.onmouseover=this.autoOnmouseover(this,div_index);

                    div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示

                    this.autoObj.appendChild(div);

                    this.autoObj.className="auto_show";

                    div_index++;

                }

            }

        }

        this.pressKey(event);

        window.onresize=Bind(this,function(){this.init();});

    }

}

//-->

</script>



</head>

<body>

<h1 align="center">自动完成函数(Autocomplete Function)</h1>

    <div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></div>

    <div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>

<script>

    var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);

</script>

</body>

</html>
strife013 2010-12-27
  • 打赏
  • 举报
 回复
闭包写法...
huangwenquan123 2010-12-27
  • 打赏
  • 举报
 回复
div.onclick=this.setValue(this);//这里通过单机div
setValue: function(_this){
return function(){
_this.obj.value=this.seqs;//使得div的seqs的值等于obj的值
_this.autoObj.className="auto_hidden";
}
},
为什么不这样写呢？多了个return funciton
setValue: function(_this){
_this.obj.value=this.seqs;//使得div的seqs的值等于obj的值
_this.autoObj.className="auto_hidden";

},
谢谢ls的回答，我不是要问div.onclick=this.setValue(this);这一句！

wern0565 2010-12-27
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 huangwenquan123 的回复:]

引用 4 楼 wanggang526514 的回复:
这是一个javascript中闭包的写法，能在内层函数运行时调用到外层函数中申明的变量，尽管此时外层函数生命周期已结束。
这种方式通常用于延长变量的生命周期。
至于这个地方为什么要返回一个function，那要看具体的上下文环境。
你看下那个代码，他好象没多一个扩号setValue()()
[/Quote]

呵呵。lz看這個div.onclick=this.setValue(this);//这里设置setValue
這不就相當與給div綁定一個onclick事件麼？又怎麼會用setValue()()的形式？
root_lee 2010-12-27
  • 打赏
  • 举报
 回复
div.onclick=this.setValue(this);//这里设置setValue
这种写法的好处是在注册事件时，还可以传递参数。如果是用addEventListener等方法注册事件，这种方法好处更加明显，因为在注销事件时，能有效提供函数指针。
llyy112233 2010-12-26
  • 打赏
  • 举报
 回复
就是定义一个函数，这个函数的返回值还是个函数咯。

eg：

var func = function (arg) {
return function (){
alert(arg);
}
}

用法 func(1)(); 打印1

不能直接func(1) 这样只是返回一个函数，并没有执行
huangwenquan123 2010-12-26
  • 打赏
  • 举报
 回复
return function后有什么作用呢？
主流前端框架下ArcGIS API for JavaScript的开发
本课程主要介绍ArcGIS API for JavaScript的开发，结合目前主流的前端开发框架React和Vue来进行详细的讲解，ArcGIS API for JavaScript版本选择最新版的4.14版本。课程主要包括在React和Vue中ArcGIS API for JavaScript的使用和ArcGIS API for JavaScript的几个通用地图功能点的开发介绍，主要向大家讲解ArcGIS JS API的开发方法，引导大家学会ArcGIS JS API的开发。课程最后结合一个业务系统来全面讲解一个WebGIS系统从框架搭建到开发部署的整个流程。
如何在html中调用js函数

js菜鸟请各位大大帮忙，能不能帮我解释一下js函数中，orderby.innerHTML是指什么？还有就是我想在html调用这个函数，实现对日期的排序功能！
补充一下！ 我已经在html中插入一个向上一个向下的小图标，点击向上图标能够实现对日期的降序排列！ 点击向下能够实现对日期的升序排列！按照楼上写的试了一下！ 提示网页上有错误，还是不能实现我说的功能！
网页中显示了一张图片，用鼠标点击一下这张图片。这张图片就移动了一个位置，比如说跑到初始位置的右边。
这里的(
一篇文章了解 threejs 在 vue 项目中的基本使用
threejs 是运行在浏览器中的 3D 引擎，是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。开发者可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）。在讲解 threejs 的时候，我们通过一个基本的简单的案例，来实现一个小的效果，然后把常用的 API、工具、功能稍微说一下哈！
廖雪峰JavaScript教程
JavaScript简介 JavaScript历史 要了解JavaScript，我们首先要回顾一下JavaScript的诞生。 在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。 由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，
JavaScript开发规范要求
作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题。本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈多多指教
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章