zoukankan      html  css  js  c++  java
  • js函数中this的不同含义

    1、js函数调用过程中,js线程会进入新的执行环境并创建该环境的变量对象,并添加两个变量:this和arguments,因此可以在函数中使用这两个变量。需要注意的是,this变量不能重新赋值,而arguments可以,如下:

            function test() {
                var name = 'test2';
                arguments = window;
                this = window; // 在这一行js运行会报错
            }

    2、this取值于函数据以执行的函数对象

      2.1 当函数在全局作用域执行时,this引用的是全局(window);当函数在某一对象上执行时,this引用的是该对象自己;当函数在另一函数中调用时,this同样引用的是全局(window),如下:

            var name = 'window';
            var obj = {
                name:'obj',
                action:test
            }
            test();
            obj.action();
            test2();
    
            function test2() {
                var name = 'test2';
                test();
            }
    
            function test() { 
                alert(this.name)
            }

    以上代码响应依次为:window -> obj -> window

      2.2 事件响应中的this,分为二种情况:

        a、html事件定义,如:

          <div style="100px; border:solid;" id="btn" onclick="test()" >doSomething</div>

          该情况下,test中this为window

        b、js事件定义,如

        <div style="100px; border:solid;" id="btn" title="hello,boy" >doSomething</div>
        <script type="text/javascript">
            document.getElementById('btn').onclick = function () {
                alert(this.title);
            };
    
            $('#btn').click(function () {
                alert(this.title);
            })
        <script>

          不论原生js还是jQuery事件,this均指拥该事件对象的html元素本身,并且为原生js对象(而非jQuery对象)

        另外,对于html事件,在事件中直接引用的this也是该事件对象的html元素本身,如下:

        <div style="100px; border:solid;" id="btn" onclick="test(this)" >doSomething</div>

        原因是引号中实际为js语句,js会隐式生成一个匿名函数,因此本质与js事件一样

    3、Function对象提供的两个方法apply()、call(),用于改变函数中this的取值

     一篇形象的讲解: 【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~

    关于this更为深入透彻的讲解:JavaScript中的this

  • 相关阅读:
    洛谷【P1177】【模板】归并排序
    洛谷【P1177】【模板】快速排序
    洛谷【P1104】生日(冒泡排序版)
    洛谷【P1104】生日(插入排序版)
    洛谷【P1104】生日(选择排序版)
    BZOJ5443:[CEOI2018]Lottery
    ReactNative---ref的用法和技巧
    ios---运用MJRefresh组件设置下拉刷新
    ReactNative---setState与性能的平衡
    ios---设置UITabBarController的字体颜色和大小
  • 原文地址:https://www.cnblogs.com/MattCheng/p/5034497.html
Copyright © 2011-2022 走看看