js如何判断函数或者方法中的js 改变this指向向谁

JS函数里的this的含义,什么情况下怎么用
this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。
情况一:纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
  function test(){
    this.x = 1;
    alert(this.x);
  test(); // 1
为了证明this就是全局对象,我对代码做一些改变:
  var x = 1;
  function test(){
    alert(this.x);
  test(); // 1
运行结果还是1。再变一下:
  var x = 1;
  function test(){
    this.x = 0;
  test();
  alert(x); //0
情况二:作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
  function test(){
    alert(this.x);
  var o = {};
  o.x = 1;
  o.m(); // 1
情况三: 作为构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。
  function test(){
    this.x = 1;
  var o = new test();
  alert(o.x); // 1
运行结果为1。为了表明这时this不是全局对象,对代码做一些改变:
  var x = 2;
  function test(){
    this.x = 1;
  var o = new test();
  alert(x); //2
运行结果为2,表明全局变量x的值没变。
情况四: apply调用
apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。
  var x = 0;
  function test(){
    alert(this.x);
  var o={};
  o.x = 1;
  o.m.apply(); //0
apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改为
  o.m.apply(o); //1
运行结果就变成了1,证明了这时this代表的是对象o。
没有更多推荐了,
加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
代码是这样的:
var name = 'outer';
var obj = {
name: 'obj',
foo: function (arg) {
this.run =
this.run();
bar:function (arg) {
function fx() {
alert(this.name);
obj.foo(fx);//fx中的this指向obj,此时alert的结果是obj
obj.bar(fx);//这样调用fx中的this却指向当前作用域,alert的结果却是outer
$(selector).on('click',function(){
//这里的this会指向被选中的标签,
//而希望通过这个回调函数来操作当前作用域中的一些属性时就要另想办法
所以,this的指向问题是在哪决定的?
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。obj.foo(fx)触发时,进入foo函数的执行上下文,此时this指向foo函数的调用者objobj.bar(fx)触发时,进入bar函数里的arg函数,也就是fx函数本身,此时的this指向全局作用域中fx的调用者window对象详情参阅
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
fx的作用域是window。如果想输出'obj'的话可以:
bar:function (arg) {
arg().bind(this);
绑定obj的作用域
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
this应该指向方法的所有者,foo方法中调用的已经是obj的run方法了
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
定义on函数的时候有this.click=callback,所以this指向标签
同步到新浪微博
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:
在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。下次自动登录
现在的位置:
& 综合 & 正文
html行内触发事件的this指向(原生js学习)
http://www.cnblogs.com/snandy/archive//1976317.html
var m=function(){
A:function(){
m:function(){
B:function(){
var m=function(){
var div=document.createElement("div");
div.innerHTML="&p onclick='m();'&xx&/p&";
document.body.appendChild(div);
看起来好像onclick=m()会调用B函数里头定义的m函数,其实不会。这里新增html,且是html行内触发事件,所以函数执行在全局,m()调的是全局定义的m函数,结果弹出2,和B函数作用域一点关系都没有。
潜在包含了一层匿名函数:
&p id="f" onclick="console.log(this)"&1&/p&,值为&p id="ff" onclick="console.log(this)"&1&/p&自己。
这里相当于:
(p#f).onclick=function(){
console.log(this);
所以this当然是调用事件的p#f
&p id="f" onclick="function A(){alert(this==window);};A();"&1&/p&
(p#f).onclick=function(){
function A(){alert(this==window);};
所以A里头的this当然是window。
&p id="f" class="x" onclick="A(this)"&1&/p&
var A=function(m){
alert(m.className);
//点击弹出"x"
这里相当于:
p#f.onclick=function(){
function体里的this必然是#f元素对象,所以可以弹出m.className。。
var m=function(){
alert(10);
B:function(){
var m=function(){
var div=document.createElement("div");
div.innerHTML="cutemurphy";
div.id="gg";
document.body.appendChild(div);
document.getElementById("gg").addEventListener("click",m,false);
这个结果恰好和行内执行事件的结果相反,这里会弹出1,而非10。因为它的m函数并非去全局找,而是按照普通的函数作用域链来查找。。。理论支持是函数执行在定义的作用域里。
A:function(){
console.log(this);
B:function(){
var m=function(){
var div=document.createElement("div");
div.innerHTML="&p id='xx'&xx&/p&";
document.body.appendChild(div);
var xNode=document.getElementById("xx");
xNode.addEventListener("click",this.A,false);
这里很有意思,addEventListener里的this.A的this指的是obj,而this.A的函数体function(){console.log(this)}里的this又是xNode。
【上篇】【下篇】JavaScript普通函数中的this指向判断,箭头函数的this有什么不同?
1、普通函数
先说说普通函数中的this,各式各样的情况下判断this的指向,可以说是非常刁钻了。判断的时候,只要记住【this 永远指向调用它的对象,new的时候,指向new出来的对象。】这句话就够了。
看几个例子:
var obj = {
name: 'latency',
sayName: function(){
console.log('name:',this.name);
obj.sayName()
//name: latency
例1这个例子很好理解,sayName() 方法是 obj 调用的,所以其中的this指向obj。
var name = 'cheng';
var obj = {
name: 'latency',
sayName: function(){
return function(){
console.log('name:',this.name);
obj.sayName()()
//name: cheng
在例2中,打印出来对的this.name不是obj的name,而是window对象的name属性。这是因为sayName()函数中有个闭包,闭包中的this指向调用这个闭包的对象,也就是window对象,写成下面这样可能更好理解:
var fun = obj.sayName();
//name: cheng
fun()方法是window对象调用的,其this指向window对象
接下来看一个复杂一点的例子:
var fun = function (a){
return function(b){
console.log('a+b:', this.a + b);
}((function(a,b){return a})(1,2))
在例3中,首先要明确fun是什么,仔细看代码第7行,我们发现fun是一个立即执行的函数,它的参数也是一个立即执行的函数。
(function(a,b){return a})(1,2) 执行的结果是1,所以fun实际上是下面这样var fun = (function(a){......})(1)
在fun定义的时候,就已经开始执行了,执行结果如下:
var fun = function (a){
//this.a = 1
return function(b){
console.log('a+b:', this.a + b);
当执行到fun(3)的时候,fun中的闭包函数开始执行,传入参数b=3,由于此时调用闭包函数的是fun,所以闭包中的this指向fun,从而得出 this.a + b 的值为4。
以上是普通函数中的this,下面来看箭头函数中的this。
2、箭头函数
对于箭头函数的this,也只需要记住一句话【箭头函数没有自己的 this,当在内部使用了 this时,它会指向最近一层作用域内的 this】
上例子,可以把例2改成箭头函数,让它的表现符合我们的预期
var obj = {
name: 'latency',
sayName: function(){
return () =& {
console.log('name:', this.name);
obj.sayName()()
//name: latency
在例4中,return的是一个箭头函数,没有把this绑定到自己的内部,使用this时,指向的是上一层的obj。
var name = 'cheng';
function delay(){
setTimeout(function(){
console.log('name:', this.name);
function arrowDelay(){
setTimeout(() =& {
console.log('name:', this.name);
delay.call({name: 'latency'})
//name: cheng
arrowDelay.call({name: 'latency'})
//name: latency
这个例子就可以很清楚的看出箭头函数和普通函数中this的区别。
根据上面两个例子,我们可以总结出,在函数中需要使用闭包的时候,用箭头函数就很方便了,不需要像以前一样使用hack,类似 var context =
接下来把例1改成箭头函数来实现,看看结果:
var name = 'cheng';
var obj = {
name: 'latency',
sayName: () =& {
console.log('name:', this.name)
obj.sayName()
//name: cheng
由于sayName()整个函数就是一个箭头函数,没有自己的this,所以this指向的最近一层作用域内的this,也就是window对象。这种情况下,就不适合用箭头函数来实现了。
再看一个例子
var obj = {
name: 'latency',
sayName: function(){
return () =& {
return () =& {
return () =& {
console.log(&name:&, this.name);
obj.sayName()()()()
//name: latency
这个例子可以更好地帮助我们理解【箭头函数没有自己的 this,当在内部使用了 this时,它会指向最近一层作用域内的 this】这句话。这个例子定义了三个箭头函数,它们都没有绑定this到自己的内部,或者说没有改变this的指向,所以this始终指向obj。js中的this关键字,不是应该指向调用调用它的当前对象吗
[问题点数:40分,结帖人qq]
本版专家分:15
结帖率 95.83%
CSDN今日推荐
本版专家分:15
结帖率 95.83%
本版专家分:15
结帖率 95.83%
本版专家分:121514
2017年 总版技术专家分年内排行榜第七
2018年5月 Web 开发大版内专家分月排行榜第一2018年1月 Web 开发大版内专家分月排行榜第一2017年12月 Web 开发大版内专家分月排行榜第一2017年6月 Web 开发大版内专家分月排行榜第一2017年2月 Web 开发大版内专家分月排行榜第一2016年3月 Web 开发大版内专家分月排行榜第一2015年8月 Web 开发大版内专家分月排行榜第一
2018年4月 Web 开发大版内专家分月排行榜第二2018年3月 Web 开发大版内专家分月排行榜第二2018年2月 Web 开发大版内专家分月排行榜第二2017年11月 Web 开发大版内专家分月排行榜第二2017年10月 Web 开发大版内专家分月排行榜第二2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
本版专家分:713
本版专家分:51173
2013年11月 Web 开发大版内专家分月排行榜第二
2013年10月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复!|
CSDN今日推荐

我要回帖

更多关于 js代码测试 的文章

 

随机推荐