JavaScript中 this指向及this指向的改变

this、arguments是函数的内部属性

this指向

单独使用this指向全局对象

在nodejs环境中  this指向一个{ }

在浏览器环境中  this指向window全局对象 [object Window]

console.log(this);
function foo(){
  console.log(this)
}
foo();

函数内部使用this指向全局对象

在nodejs环境中，this指向global对象

在浏览器环境中，this指向window全局对象 [object Window]

function myFunction() {  return this; }

对象方法中使用this指向调用者

var obj = {
  name：'peter'
  sayName:function(){
    console.log(this.name)  //this指向obj
  }
};

事件中使用this指向接收事件的元素

    <button>点击我</button>
    // 1.获取button按钮 再绑定单击事件
    var btn = document.querySelector('button');
    console.log(btn);
    btn.onclick = function(){
      console.log(this)  //this指向btn
    }

this指向改变

call()方法

使用call()方法调用函数，同时指定被调用函数中this的值

语法：fun.call(this指向，实参列表...)

    // call(指定this值，指定参数...)方法
    function fn(x,y){
      console.log(this);
      console.log(x+y)
    }
    const obj = {
      uname : 'name'
    }
    // 1.调用函数
    // 2.改变this指向
    fn.call(obj,1,2)

apply()方法

使用apply()方法调用函数，指定被调用函数的this指向

语法：fun.apply(this指向,[数组arr])

apply()方法传递参数的值必须包含在数组里面，返回值是调用函数的返回值

因此apply()方法主要使用在数组，

    // apply(this指向，[数组])方法改变this指向,必须以数组的方式传递数据
    function fn(x,y){   //x=1  y=2  x，y分别是数组的第一个和第二个元素
      console.log(this);
      console.log(x+y)
    }
    const obj = {
      uname : 'name'
    }
    // 1.调用函数
    // 2.改变this指向
    fn.apply(obj,[1,2])
    // 3.有返回值，返回值就是函数的返回值

    // 求数组最大值
    const arr = [99,88,52,3]
    const max = Math.max.apply(null,arr) //this可以指向位空，这里只是利用了apply可以传递数组
    const min = Math.min.apply(null,arr)    
    console.log(max)

bind()方法

bind()方法不在调用函数，可以改变函数内部this指向

语法：fun.bind(this指向，实参列表...)

           fun.bind(this指向)(实参列表)

bind()方法返回值是一个函数，拷贝它的调用者，改变新函数的this指向

bind()()可以调用函数

<button>按钮</button>
  <script>
    // bind(this指向，...值)
    function fn(){
      console.log(this)
    }
    const obj = {
      uname : 'name'
    }
    // 1.bind 不会调用函数
    // 2.能改变this的指向 
    // 3.返回值是个函数，但是这个函数里面的this是更改过的obj
    fn.bind(obj);  //不调用函数，不打印结果
    const fun = fn.bind(obj);
    // console.log(fun) bind（）返回值是一个函数
    fun();

    // 按钮，点击禁用，定时开启
    const btn = document.querySelector('button');
    btn.addEventListener('click',function(){
      this.disabled = true
      window.setTimeout(function(){
        // 在这个普通函数里面this指向window
        //btn.disabled = false 默认方法 要使用this，更改定时器函数的this指向由window到btn
        this.disabled = false  //定时器中this指向window window.setTimeout()
        //bind(btn)
      }.bind(this),2000)  //this指向btn，当前定时器函数在btn方法中，this指向btn
    })
  </script>

相同点和不同点

都可以改变函数内部的this指向

call和apply会调用函数，bind不会调用函数

apply传递的参数类型必须为数组

var obj ={
  name:'张三',
  sayName:function(a){
    console.log(this.name,a)
  }
};
var obj1 ={
  name:'李四',
  sayName:function(a){
    console.log(this.name,a)
  }
};
// 函数名函数名
// 函数名.call()
// 函数名.apply()
// 函数名.bind()()
obj.sayName.call(obj,'hello','tom');
obj.sayName.apply(obj1,['hello','tom']);
// bind()返回的是函数本身 bind(执行环境对象，实际参数列表)(实际参数列表)
obj.sayName.bind(obj1,1)()
obj.sayName.bind(obj1)(1)

运行结果：