zoukankan      html  css  js  c++  java
  • JavaScript面向对象编程—this详解

      this详解

    作者的话

     

        在JavaScriptOPPt面向对象编程中,this这位老大哥,相信大家不会陌生。大家在遇到this时,很多朋友难免会有个疑问:“这个this是什么,它到底指向谁?”

    今天,博主针对this的指向问题,进行了整理。本篇博客,博主给大家详尽介绍了不同情况下,this的指向!!以下奉上博主总结的关于this的指向详解,希望对各位开发者朋友有所帮助:

    1、谁最终调用函数,this指向谁。

     ①this指向的,永远只可能是对象!!!!!
     ②this指向谁,永远不取决于this写在哪,而是取决于this在哪调用;
     ③this指向的对象,我们称之为函数的上下文context,也叫函数的调用者

    2、*****this指向的规律(与函数调用的方式息息相关)

    this指向的情况,取决于函数调用的方式有哪些:
    ①通过函数名()直接调用的:this指向window
    ②通过对象.函数名()调用的:this指向这个对象;
    ③函数作为数组的一个元素,通过数组下标调用的:this指向这个数组
    ④函数作为window内置函数的回调函数调用时:this指向window
    setTimeout(func,1000);setInterval等
    ⑤函数作为构造函数,用new关键字调用时:this指向的是new出的新对象

    实例演示:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>this详解</title>
    </head>
    <body>
    <div id="div"></div>
    </body>
    <script type="text/javascript">
    
    function func (name) {
    console.log(this);
    
    
    }
    func();//window
    //狭义对象
    var obj={
    name:"obj",
    func1:func
    };
    obj.func1();//obj
    //广义对象
    document.getElementById("div").onclick=function () {
    this.style.backgroundColor="red";
    };//this指向div    
    
    //函数作为数组的一个元素,通过数组下标调用的:this指向这个数组
    var arr=[func,1,2,3]
    arr[0]();
    
    //函数作为window内置函数的回调函数调用时:this指向window
    setTimeout(func,1000);
    //setInterval等
    
    //函数作为构造函数,用new关键字调用时:this指向的是new出的新对象
    var obj=new func;//this指向的是new出的新obj
    
    
    
    /*
    * 综合小练习
    */
    var obj1={
    name:"obj1",
    arr:[setTimeout(func,5000),1,2,3]
    }
    document.getElementById("div").onclick=obj1.arr[0]();//函数最终调用者:setTimeout;符合规律⑤,this指向window
    
    var obj1={
    name:"obj1",
    arr:[func,1,2,3]
    }
    document.getElementById("div").onclick=obj1.arr[0]();//函数最终调用者:arr数组下标;符合规律③,this指向arr
    
    var obj1={
    name:"obj1",
    arr:[{name:'arrObj',fun:func},1,2,3]
    }
    document.getElementById("div").onclick=obj1.arr[0].fun();//函数最终调用者:对象;符合规律②,this指向{name:'arrObj',fun:func}这个对象
    
    </script>
    </html>

        以上为本期分享内容,希望本篇博客可以对广大开发者朋友有所帮助!如果有需要补充的部分,可在下方评论区予以补充。

    如果本篇内容对你有所帮助,欢迎收藏,原创内容,欢迎大家积极评论转载和推荐!

  • 相关阅读:
    mysql把一个表的字段update成另一个表的字段根据id
    1月房地产企业销售TOP100出炉 万科重回第一
    别拿学历说事,这些天王中学没毕业,最低的是成龙
    马云:未来经济形势很艰难,需要企业家挺身而出
    私有云与公有云区别,公有云不可能统一天下
    除了首付,购房预算还须有这7项才能买到房!
    房产交易中的10个非典型问题 你肯定不懂!
    几个常用快速无损压缩算法性能比较
    ValueTask
    Mobaxterm
  • 原文地址:https://www.cnblogs.com/liuyongqi/p/6832709.html
Copyright © 2011-2022 走看看