设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 9|回复: 0

[javascript] javascript中的this

[复制链接]
发表于 6 天前 | 显示全部楼层 |阅读模式
s中的this总是让人,是js众所周知的坑之一。
总结一下,this的坑分为5种。
1.全局代码中的this。
alert(this);//window
全局范围内this将会全局,在浏览器window
2.作为单纯函数调用
  1. functionfoo(x){this.x =x;
  2. }
  3. foo(99);
  4. alert(x);
  5. //全局变量x值为99
复制代码

这里this指向全局对象,就是window。在严格模式中,则undefiend。
3.作为对象的方法调用
  1. varname = "xiaoming";
  2. varperson ={ name:"xiaohong", hello:function(sth){ console.log(this.name + "says" +sth); }
  3. }
  4. person.hello("hello world");
复制代码

输出 xiaohong says hello world。this指向person对象,即当前对象。
4.作为构造函数
new Foo();
function Foo(){ this.name = "fooname”;
}
构造函数内部的this指向新创建的对象
5.内部函数
  1. varname = "xiaoming";
  2. varperson ={ name:"xiaohong", hello:function(sth){varsayhello = function(sth){ console.log(this.name + "says" +sth); } sayhello(sth); }
  3. }
  4. person.hello("hello world");
复制代码

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普 遍被认为是 JavaScript语言的设计错误,因为没有人想让内部函数中的 this指向全局对象。 一般的处理方式是将 this作为变量保存下来,一般约定为 that或者 self
  1. varname = "xiaoming";
  2. varperson ={ name:"xiaohong", hello:function(sth){varthat = this;varsayhello = function(sth){ console.log(that.name + "says" +sth); } sayhello(sth); }
  3. }
  4. person.hello("hello world");
复制代码

6.使用call和apply设置this
person.hello.call(person, "world”);
apply和 call类似,只是后面的参数是通过一个数组传入,而不是分开传入。两者的方法定义:
call(thisArg[,arg1,arg2,…]); // 参数列表,arg1,arg2,…
apply(thisArg [,argArray] ); // 参数数组,argArray
两者都是将某个函数绑定到某个具体对象上使用,自然此时的 this会被显式的设置为第一 个参数。
我们可能经常会写这样的代码:
$("#ele”).click=obj.handler;
如果在 handler中用了 this,this会绑定在 obj上么?显然不是,赋值以后,函数是在回调中执行的,this会绑定到$("#ele”)元素上。
这边介绍一个bind方法
  1. varname = "xiaoming";varperson ={ name:"xiaohong", hello:function(sth){varthat = this;varsayhello = function(sth){ console.log(that.name + "says" +sth); } sayhello(sth); } }
  2. varodiv = document.getElementById("odiv");
  3. odiv.onclick=person.hello.bind(person,"hello world");//xiaohong says hello world
复制代码

bind方法和call/apply方法一样,不同的就是bind方法不执行,只是拷贝代码。用这个方法可以改变this指向,this指向的不再是odiv而是person。
web前端/H5/javascript学习群:250777811
欢迎大家关注我的微信号公众号,公众号名称:web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧(长按下面的二维码图片、并选择识别图中的二维码)



上一篇:sticky footer布局
下一篇:ECDSA数字签名算法
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-2-19 11:40

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表