基本的代码如下
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="/UploadFiles/2021-04-02/jquery-1.4.4.min.js"><script type="text/javascript">
var text="test";
var t=new functionTest(text);
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
</body>
</html>
再点击保存，取消时需要一定的操作，第一次的代码如上：
点击保存，根本没反应，很奇怪，这种最常用的jquery绑定事件竟然不起作用了。后来一比较才知道，其实自己忘了，绑定应该在$(document).ready(function () {})中进行；
js修改如下：
复制代码 代码如下:
var text="test";
$(document).ready(function () {
var t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
修改后，点击保存可以了，而且正确的传递了参数，这样就可以保证在不同点的情况下传递不同的参数了。
但还有一种情况，页面会动态生成一些标签，这些标签的点击事件也需要处理。再次以取消按钮为例，由于是动态生成，就不能使用和保存一样的方法了。
只能使用onclick="javascript:t.AlertTest;"这种类似的绑定。于是有测试如下：
修改
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
点击没反应，修改如下
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter;" />
点击还是没反应，也没有错误，在修改如下：
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter();" />
这次有反应了，看来是少了一对括号。修改为封装的方法如下：
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest();" />
点击没反应，提示Uncaught ReferenceError: t is not defined
看来是变量t没有定义，作用域起作用了。于是修改js如下，也就是把变量t放到外边，赋值放在里边，就是如下：
复制代码 代码如下:
var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
最后一步，如何给取消调用的方法传递参数？
第一步修改js如下，也就是把取消调用的函数改为需要传递参数的方法，代码如下：
复制代码 代码如下:
var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
相应的html修改如下：
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />
点击，看看是不是正确的传递了参数，一切正常，看来这样就完成了。
最后整理js代码：
把通用的js代码放到一个js文件里，这里放到了common.js中，不同的代码放在htm中，修改后的所有代码如下：
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="/UploadFiles/2021-04-02/jquery-1.4.4.min.js"><script src="common.js"><script type="text/javascript">
var t;//需要定义的外边，否则点击取消时，不能访问到变量t
var text="test"; //传递的参数
$(document).ready(function () {
t=new functionTest(text); //给t赋值，定义不能放在这里边
});
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />
</body>
</html>
common.js的代码：
复制代码 代码如下:
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="/UploadFiles/2021-04-02/jquery-1.4.4.min.js"><script type="text/javascript">
var text="test";
var t=new functionTest(text);
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
</body>
</html>
再点击保存，取消时需要一定的操作，第一次的代码如上：
点击保存，根本没反应，很奇怪，这种最常用的jquery绑定事件竟然不起作用了。后来一比较才知道，其实自己忘了，绑定应该在$(document).ready(function () {})中进行；
js修改如下：
复制代码 代码如下:
var text="test";
$(document).ready(function () {
var t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
修改后，点击保存可以了，而且正确的传递了参数，这样就可以保证在不同点的情况下传递不同的参数了。
但还有一种情况，页面会动态生成一些标签，这些标签的点击事件也需要处理。再次以取消按钮为例，由于是动态生成，就不能使用和保存一样的方法了。
只能使用onclick="javascript:t.AlertTest;"这种类似的绑定。于是有测试如下：
修改
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
点击没反应，修改如下
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter;" />
点击还是没反应，也没有错误，在修改如下：
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter();" />
这次有反应了，看来是少了一对括号。修改为封装的方法如下：
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest();" />
点击没反应，提示Uncaught ReferenceError: t is not defined
看来是变量t没有定义，作用域起作用了。于是修改js如下，也就是把变量t放到外边，赋值放在里边，就是如下：
复制代码 代码如下:
var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
最后一步，如何给取消调用的方法传递参数？
第一步修改js如下，也就是把取消调用的函数改为需要传递参数的方法，代码如下：
复制代码 代码如下:
var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
相应的html修改如下：
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />
点击，看看是不是正确的传递了参数，一切正常，看来这样就完成了。
最后整理js代码：
把通用的js代码放到一个js文件里，这里放到了common.js中，不同的代码放在htm中，修改后的所有代码如下：
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="/UploadFiles/2021-04-02/jquery-1.4.4.min.js"><script src="common.js"><script type="text/javascript">
var t;//需要定义的外边，否则点击取消时，不能访问到变量t
var text="test"; //传递的参数
$(document).ready(function () {
t=new functionTest(text); //给t赋值，定义不能放在这里边
});
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />
</body>
</html>
common.js的代码：
复制代码 代码如下:
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
标签：
js,封装,作用域
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“浅析js封装和作用域”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
2025年02月23日
2025年02月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果（九）》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]