关于JavaScript中this的指向问题

最新推荐文章于 2023-09-04 21:13:08 发布

LUNAR__

最新推荐文章于 2023-09-04 21:13:08 发布

阅读量330

点赞数 1

文章标签： javascript 函数

本文链接：https://blog.csdn.net/LL_wzr/article/details/78965178

版权

学习中，有问题可以一起改正哦

JavaScript函数中的this指向问题，this出现的几大场景

1.函数中的this

function fn (){
  console.log(this);
}
fn();//输出window

从代码运行结果来看普通函数中的this是指向window的，window为浏览器顶级对象，当fn()调用时其实是省略了window的，写成window.fn()也是可以输出的。

2.对象中的this

var obj = {
  name: 'zs',
   fn : function (){console.log(this)}
}
obj.fn();

输出结果：Object 即obj，说明对象中的this是指向当前对象的

3.构造函数中的this

function FucName() {
      this.name = 123;
      this.fn = function() {
        console.log(this);
      }
    }
    //实例化一个FucName对象，保存在变量名为obj的内存中
    var obj1 = new FucName();
    //修改obj中FucName对象的name属性
    obj.name = 'zs'
    obj.fn()//输出FucName对象

这里输出的FuncName并不是指的构造函数，而是一种对象名，类似于Array，Array属于Object但自己的方法和属性，var arr = new Array(); arr 就拥有Array中的属性和方法，控制台打印arr输出的就是Array[]对象，所以这里打印的obj实际上是变量名为obj的变量保存的FucName对象，和构造函数FucName没有关系，即使你修改了obj中保存的对象的属性和方法对构造函数也不会有影响，这一点我也纠结了很久，最后总结就是， 构造函数中的this指向的是构造函数new 出来的对象

4.事件绑定中的this

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    div{
      width: 50px;
      height: 50px;
      background: blue;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="js_btn">点击</div>
  <script>
    var btn = document.getElementById('js_btn');
    btn.onclick = function(){
      this.style.backgroundColor = 'red';
      console.log(this);
    }
  </script>
</body>

</html>

从代码运行结果中看，在点击事件中this指向触发事件的事件源。

5.定时器中的this

  var btn = document.getElementById('js_btn');
    var i = 0;
    var time = setInterval(function () {
      console.log(this);//输出Window
      btn.innerHTML = i;
      i++;
    }, 1000);
    setTimeout('clearInterval(time)' ,10000)

定时器中的this指向window，和普通函数类似，定时器的调用也是window触发，一定时间间隔执行定时器中的代码，控制DOM对象

6.几种改变this指向的方法：bind()、 call()、apply()

bind()方法：

函数名.bind(将this指向写在这里的函数,[{]代替this的函数中的参数])
bind方法返回的是一个新的函数,需要重新调用

function father (x) {
      var x = x;
      console.log(this);
      console.log(x);
    }
    function son (){}
    var newFather = father.bind(son , 10);
    newFather();

call()方法：
借用其他函数的方法

函数名.call(将this指向写在这里的函数,参数一参数二)

A.call(B)也可以理解为B.A(),B对象调用A方法

function father (x) {
      var x = x;
      console.log(this);
      console.log(x);
    }
    function son (){}
    father.call(son , 10);

call()方法和bind()方法的不同之处在于call方法直接调用了函数,而bind方法创建了新的函数需要重新调用

apply()方法：

类似于call()方法，不同之处在于apply()方法参数是以数组形式传递，将数组中的每一项拆分，一项一项传递到函数中，执行函数中的代码

LUNAR__

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于JavaScript中this的指向问题

学习中，有问题可以一起改正哦JavaScript函数中的this指向问题，this出现的几大场景1.函数中的thisfunction fn (){ console.log(this);}fn();//输出window从代码运行结果来看普通函数中的this是指向window的，window为浏览器顶级对象，当fn()调用时其实是省略了window的，写成window.fn()也是
复制链接

扫一扫