js jquery this

最新推荐文章于 2024-09-02 22:23:47 发布

iteye_13425

最新推荐文章于 2024-09-02 22:23:47 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_13425/article/details/82508044

js 专栏收录该内容

28 篇文章

订阅专栏

本文探讨了在JavaScript中使用对象方法时遇到的问题，特别是内部方法中调用对象属性方法时出现的`this`穿透问题。通过示例展示了如何通过变量引用解决这一问题，并提供了实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到一个问题，在使用js创建对象时，里面的方法内包含function时，在内部的function里无法调用对象的方法，this无法穿透，this在方法中可以使用，但在往下一层就不可以，解决办法是在方法里使用var obj=this,然后在内部的function里使用obj.fun就可以调用对象的属性方法。

<body>
<div class="">
<a href="javascript:void(0);" id="testFirst">上层</a>
<a href="javascript:void(0);" id="testSec">第二层</a>
<a href="javascript:void(0);" id="testSolve">解决</a>
</div>
 
</body>
<script type="text/javascript">
var jsObject={
 
str:"1qaz2wsx?asdfghjkl.",
testFirstThis:function(){
alert(this.str); -----------------1qaz2wsx?asdfghjkl.
},
testSecThis:function(){
$(document).ready(function(){
alert(this.str);----------------undefined
});
},
testSolve:function(){
var obj=this;
$(document).ready(function(){
alert(obj.str);---------------------------1qaz2wsx?asdfghjkl.
});
}
 
}
 
$(document).ready(function(){
$("#testFirst").click(function(){
jsObject.testFirstThis();
});
$("#testSec").click(function(){
jsObject.testSecThis();
});
$("#testSolve").click(function(){
jsObject.testSolve();
});
 
});
 
</script>

总结与实例：

<body>

 

<div>

<p class="p1" style="background-color:orange;"> click</p>

<p class="p3" style="background-color:yellow;" onclick= "fun();" action-str="ssss"> click</p>

<p class="p2" style="background-color:green;" onclick= "funClick(this);" action-str="ssss"> click</p>

</div>

 

</body>

<script type="text/javascript">

 

 

//jquery 绑定事件函数中的this指DOM元素，$(this)指该DOM元素的jquery对象

$(document).ready(function(){

 

$('.p1').on('click',function(){

alert(this);

var innerHTML = $(this).html();

alert(innerHTML);

})

 

 

});

// js的this所在的函数是哪个对象的方法调用，该对象就是this所指向的对象
 
 
 
 
 
var fun = function(){
 
debugger;
 
alert(this);     //由于包含this的函数fun是全局的window里的函数，所以this指向window
 
//alert(this.fun()); // 该处即可调用到fun
 
 
 
}
 
 
 
 
 
var funClick = function(v){
 
debugger;
 
var strHtml = $(v).html();//onclick绑定事件传入的this，调用onclick的对象是A标签，所以this指向DOM元素，，脚本引擎生成了一个标签实例对象的匿名成员方法，而onclick指向这个方法
 
var str = $(v).attr("action-str");
alert(str);
 
 
 
}