this指向

118 阅读3分钟

this指向什么

1.函数在调用时,JavaScript会默认给this绑定一个值;
2.this的绑定和定义的位置(编写的位置)没有关系;
3.this的绑定和调用方式以及调用的位置有关系;
4.this是在运行时被绑定的;

this绑定规则

1.默认绑定

1. 什么情况下使用默认绑定?独立函数调用
2. 独立函数调用我们可以理解成函数没有被绑定到每个对象上进行调用

2.隐式绑定

一种常见的调用方式是通过某个对象进行调用的:
也就是它的调用位置,是通过某个对象发起的函数调用

3.显示绑定

call和apply方法
1.JavaScript所有的函数可以使用call和apply方法
  call和apply方法的区别:第一个参数相同,后面的参数apply为数组,call为参数列表
2.两个函数第一个参数都要求是一个对象,这个对象的作用是什么呢?就是给this准备的
3.在调用这个函数时,会将this绑定到这个传入的对象上

bind函数
1.手写一个辅助函数,让它总是显示的绑定到一个对象上
 function bind(func, obj) {
      return function() {
        return func.apply(obj, arguments);
      }
 }
2.使用Function.prototype.bind    
3.内置函数
 如:
 3.1 setTimeout中会传入一个函数,这个函数中的this通常是windowsetTimeout内部是通过apply进行绑定的this对象,并且绑定的是全局对象。
 3.2 数组的forEach
 forEach传入的函数打印也是window对象,因为默认情况下传入的函数是自动调用函数(默认函数)
 改变函数this指向
 forEach(callbackfn:()=> void,thisArg?:any):viod
 3.3点击事件的回调中,this指向谁?点击元素的dom对象

4.new绑定

javascript函数可以当做一个类的构造函数使用,也就是使用new的关键字
使用new关键字来调用函数时,会执行如下的操作:
a.创建一个全新的对象
b.这个新对象会被执行Prototype连接
c.这个新对象会绑定到函数调用的this上(this的绑定在这个步骤完成)
d.如果函数没有返回其他对象,表达式会返回这个新的对象

规则的优先级

new绑定 > 显示绑定(bind)> 隐式绑定 > 默认绑定    

this规则之外

1.忽略显示绑定
    显示绑定中,传入nullundefined
    foo.call(obj); // obj对象
    foo.call(null); // window
    foo.call(undefined); // window
2.间接函数引用
创建一个函数的间接引用,这种情况使用默认绑定规则
-   赋值(obj2.foo = obj1.foo)的结果是foo函数;
-   foo函数被直接调用,那么是默认绑定
    function foo() {
      console.log(this);
    }
    var obj1 = {
      name"obj1",
      foo: foo
    }; 
    var obj2 = {
      name"obj2"
    }
    obj1.foo(); // obj1对象
    (obj2.foo = obj1.foo)();  // window
    3.ES6箭头函数
    箭头函数不使用this的四种标准规则(也就是不绑定this),而是根据外层作用域来决定this

文章主要来自的以下链接文章的整理:mp.weixin.qq.com/s/hYm0JgBI2…