JavaScript-----this的指向及修改this指向

目录

一.this概述:

    1.全局作用域或者普通函数中的this指向全局对象window(注意定时器里面的this指向window)

 2.方法调用中谁调用this指向谁

     3.构造函数中this指向构造函数的实例

二.修改this的指向

1.call方法

2.强制转换的另一种方法apply (只传第一个参数,apply和call的效果一样)

3.强制转换的第三种方法  bind

---

一.this概述:

this的指向在函数定义的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁

一般情况下,this的最终指向的是那个调用他的对象

    1.全局作用域或者普通函数中的this指向全局对象window(注意定时器里面的this指向window)

    console.log(this); //window

    function fn() {

        console.log(this); //window

    }

    fn();

    // window.fn();   //这里的fn(),其实是被window所调用的,指向window

    window.setTimeout(function () {

        console.log(this);

    }, 1000); //window

 

---

 2.方法调用中谁调用this指向谁

栗子1:

    var a = {

        sayHi: function () {

            console.log(this); //this指向a

        }

    }

    a.sayHi();

 

    栗子2:

    var btn = document.querySelector("button");

    btn.onclick = function () {

        console.log(this); //指向button按钮对象

    }


    btn.addEventListener('click', function () {

        console.log(this); //指向button按钮对象

    })

---

     3.构造函数中this指向构造函数的实例

    function Fun() {

        console.log(this); //this 指向的是fun  实例对象

    }

    var fun = new Fun(); //new开辟了内容空间

 以下是整理的面试题:

•  this的指向是在使用时判断的而不是创建时判断的,除了箭头函数
• 1.在全局作用域下,this指向window
• 2.普通函数和匿名函数里的this指向window,   IE事件里面this指向window
• 3.对象方法里的this指向对象本身
• 4.对象里面存放的如果是另一个对象,另一个对象的this指向另一个对象,而不是最外层的对象
• 5.构造函数的this指向它的调用者
• 6.箭头函数指向创建时的上一层作用域,箭头函数的指向不可变

二.修改this的指向

1.call方法

如果想要this强制转换指向对象,需要用call方法

语法结构:

函数.call(this强制指向的对象, 函数实参1,函数实参2,...);

如果有多个参数,中间用逗号隔开

如果使用call绑定null,或者undefined,这次绑定会被取消

要注意:new绑定高于bind,new不可以和call,apply一起使用

  function box(a, b) {
    console.log(this);
    console.log(a + b);
  }

  box(); //window
  box.call(null);
  box.call(oBtn);
  box.call(obj, 3, 8);

 

2.强制转换的另一种方法apply (只传第一个参数,apply和call的效果一样)

语法结构:

函数.apply(强制指向的对象,[函数实参1,函数实参2,...])

apply的参数二要写成数组形式

  box.apply(oBtn);
  box.apply(obj, [3, 8]);
  box.apply(null, [3, 8]);

 

 

3.强制转换的第三种方法  bind

语法结构:

函数.bind(强制指向的对象,函数实参1,函数实参2,...)()

  var fun = box.bind(oBtn, 3, 8);
  fun();