js jquery this

ruoyiqing 2013-05-10

今天遇到一个问题,在使用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);
 
 
 
}

相关推荐