技术控

    今日:136| 主题:49552
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] JavaScript中的this的一些用法

[复制链接]
落日夕阳 发表于 2016-10-2 21:19:08
79 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Created at 2016-09-20    Updated at 2016-10-02    CategoryFront-End         TagJavaScript      
  一、global this  

  
       
  • 总结起来就是:在浏览器里面      this是老大,它等价于      window对象,如果你声明一些全局变量(不管在任何地方),这些变量都会作为      this的属性。   
  • 在node里面,有两种执行      JavaScript代码的方式,一种是直接执行写好的      JavaScript文件,另外一种是直接在里面执行一行行代码。   
  • 对于直接运行一行行      JavaScript代码的方式,      global才是老大,      this和它是等价的。在这种情况下,和浏览器比较相似   
  • 也就是声明一些全局变量会自动添加给老大      global,顺带也会添加给      this。   
  • 但是在      node里面直接脚本文件就不一样了,你声明的全局变量不会自动添加到      this,但是会添加到      global对象。所以相同点是,在全局范围内,全局变量终究是属于老大的  
  二、function this  

  
       
  • 如果不是用      new调用,在函数里面使用      this都是指代全局范围的      this   
  • 函数里面的      this其实相对比较好理解,如果我们在一个函数里面使用      this,需要注意的就是我们调用函数的方式,如果是正常的方式调用函数,this指代全局的this   
  • 如果我们加一个      new,这个函数就变成了一个构造函数,我们就创建了一个实例,      this指代这个实例,这个和其他面向对象的语言很像   
  • 另外,写      JavaScript很常做的一件事就是绑定事件处理程序,也就是诸如      button.addEventListener(‘click’, fn, false)之类的,如果在      fn里面需要使用      this,      this指代事件处理程序对应的对象,也就是      button  
  三、prototype this  

  
       
  • 你创建的每一个函数都是函数对象。它们会自动获得一个特殊的属性      prototype,你可以给这个属性赋值。当你用      new的方式调用一个函数的时候,你就能通过      this访问你给      prototype赋的值了  
  1. functionThing(){
  2. console.log(this.foo);
  3. }
  4. Thing.prototype.foo = "bar";
  5. varthing =newThing();//logs "bar"
  6. console.log(thing.foo);//logs "bar"
复制代码

       
  •       当你使用        new为你的函数创建多个实例的时候,这些实例会共享你给        prototype设定的值。当你调用        this.foo的时候,都会返回相同的值,除非你在某个实例里面重写了自己的        this.foo      
       
  •       实例里面的        this是一个特殊的对象。你可以把        this想成一种获取        prototype的值的一种方式。当你在一个实例里面直接给        this添加属性的时候,会隐藏        prototype中与之同名的属性。如果你想访问        prototype中的这个属性值而不是你自己设定的属性值,你可以通过在实例里面删除你自己添加的属性的方式来实现      
       
  •       通过一个函数创建的实例会共享这个函数的        prototype属性的值,如果你给这个函数的        prototype赋值一个        Array,那么所有的实例都会共享这个        Array,除非你在实例里面重写了这个        Array,这种情况下,函数的        prototype的        Array就会被隐藏掉      
       
  • 给一个函数的      prototype赋值一个      Array通常是一个错误的做法。如果你想每一个实例有他们专属的      Array,你应该在函数里面创建而不是在      prototype里面创建   
  • 实际上你可以通过把多个函数的      prototype链接起来的从而形成一个原型链,因此      this就会魔法般地沿着这条原型链往上查找直到找你你需要引用的值  
  1. functionThing1(){
  2. Thing1.prototype.foo = "bar";
  3. }
  4. functionThing2(){
  5. }
  6. Thing2.prototype = newThing1();
  7. varthing =newThing2();
  8. console.log(thing.foo);//logs "bar"
复制代码
四、object this  

  
       
  • 在一个对象的一个函数里,你可以通过      this来引用这个对象的其他属性。这个用      new来新建一个实例是不一样的  
  1. varobj = {
  2. foo:"bar",
  3. logFoo:function(){
  4. console.log(this.foo);
  5. }
  6. };
  7. obj.logFoo(); //logs "bar"
复制代码

       
  •       注意,没有使用      new,没有使用      Object.create,也没有使用函数调用创建一个对象。你也可以将对象当作一个实例将函数绑定到上面  
  1. varobj = {
  2. foo:"bar"
  3. };
  4. functionlogFoo(){
  5. console.log(this.foo);
  6. }
  7. logFoo.apply(obj); //logs "bar"
复制代码
五、DOM event this  

  
       
  • 在一个      HTML DOM事件处理程序里面,      this始终指向这个处理程序被所绑定到的      HTML DOM节点  
  1. functionListener(){
  2. document.getElementById("foo").addEventListener("click",
  3. this.handleClick);
  4. }
  5. Listener.prototype.handleClick = function(event){
  6. console.log(this);//logs "<div id="foo"></div>"
  7. }
  8. varlistener =newListener();
  9. document.getElementById("foo").click();
复制代码

       
  • 除非你自己通过      bind切换了上下文  
  1. functionListener(){
  2. document.getElementById("foo").addEventListener("click",
  3. this.handleClick.bind(this));
  4. }
  5. Listener.prototype.handleClick = function(event){
  6. console.log(this);//logs Listener {handleClick: function}
  7. }
  8. varlistener =newListener();
  9. document.getElementById("foo").click();
复制代码
六、HTML this  

  
       
  • 在      HTML节点的属性里面,你可以放置      JavaScript代码,      this指向了这个元素  
  1. <div id="foo"></div>
  2. <script type="text/javascript">
  3. document.getElementById("foo").click();//logs <div id="foo"...
  4. </script>
复制代码
七、override this  

  
       
  • 你不能重写      this,因为它是保留字  
  1. functiontest(){
  2. varthis= {};// Uncaught SyntaxError: Unexpected token this
  3. }
  4. evalthis
复制代码

       
  • 你可以通过      eval来访问      this  
  1. functionThing(){
  2. }
  3. Thing.prototype.foo = "bar";
  4. Thing.prototype.logFoo = function(){
  5. eval("console.log(this.foo)");//logs "bar"
  6. }
  7. varthing =newThing();
  8. thing.logFoo();
复制代码

       
  • 这会造成一个安全问题,除非不用      eval,没有其他方式来避免这个问题  
  八、with this  

  
       
  • 你可以通过      with来将      this添加到当前的执行环境,并且读写      this的属性的时候不需要通过      this  
  1. functionThing(){
  2. }
  3. Thing.prototype.foo = "bar";
  4. Thing.prototype.logFoo = function(){
  5. with(this) {
  6. console.log(foo);
  7. foo = "foo";
  8. }
  9. }
  10. varthing =newThing();
  11. thing.logFoo(); // logs "bar"
  12. console.log(thing.foo);// logs "foo"
复制代码

       
  • 许多人认为这样使用是不好的因为      with本身就饱受争议  
  九、jQuery this  

  
       
  • 和      HTML DOM元素节点的事件处理程序一样,在许多情况下      JQuery的      this都指向      HTML元素节点。这在事件处理程序和一些方便的方法中都是管用的,比如      $.each  
  1. functionThing1(){
  2. Thing1.prototype.foo = "bar";
  3. }
  4. functionThing2(){
  5. }
  6. Thing2.prototype = newThing1();
  7. varthing =newThing2();
  8. console.log(thing.foo);//logs "bar"
  9. 0
复制代码
友荐云推荐




上一篇:css之position
下一篇:DOM编程之API学习总结篇
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

陈继亚 发表于 2016-11-14 03:30:18
将薪比薪想一下,算了,不想活了。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表