this绑定

来源:互联网 发布:python老男孩10期网盘 编辑:程序博客网 时间:2024/06/06 18:16

this绑定的四种情况

简单地说,this在js中就是指指向一个对象的内部指针,this中存储的是某个对象的地址.

this绑定分为四种:

1.默认绑定

2.隐式绑定

3.new绑定

4.显示绑定

下面依次介绍这四种绑定.

默认绑定(即直接调用一个函数时,为默认绑定)

    function foo(){      console.log(this);    }    foo();// window(非严格模式), undefined(严格模式)

隐式绑定(当使用 对象.方法()这种方式调用, 称之为隐式绑定, 此时this绑定到前面那个对象上)
看下面这个例子:

    var name = "ls";    var obj = {        name : "zs",        foo : function () {        alert(this.name);        }    };    var foo = obj.foo;    foo();// ls, 此处this绑定到window对象上

new绑定(使用new来调用构造函数的方式, 为new绑定, this绑定在新创建的那个对象上)

    function foo() {        this.name = "ls";        console.log(this);    }    var f = new foo();// foo{name: ""}

显示绑定(可以通过调用call, apply, bind方法改变this指向, 进行函数回调, 实现显示绑定效果, 需要注意的是, 这三种绑定对原函数都没有影响)

先说call和apply 绑定, 他们相同点为这两种都是一次性绑定, 不同点为: 参数的传递的方式.
call: 参数一个一个的传递
apply: 把要传递的参数封装到一个数组中去传递

下面这个例子可以说明问题

    function foo(a, b){        console.log(this.name, a, b);    }    foo.call({name:"abc"}, 10, 20) // abc, 10, 20    foo.apply({name:"abc"}, [10, 20]) // abc, 10, 20

而固定绑定为永久绑定, 为ES6新增的方法, 可以把一个函数中的this绑定到新对象,并返回绑定后的函数。注意:bind绑定返回的函数不能再通过call绑定this

    var obj = {        name : "ls"    };    function foo() {        alert(this.name);    }    var f = foo.bind(obj);    var obj2 = {        name : "zs",        foo : f    };    obj2.foo(); // ls

这四种绑定的优先级:
bind > call,apply > new > 隐式绑定 > 默认绑定

这里总结一下this指向问题

​ 在JavaScript中,this的指向是动态改变( 运行时绑定 )的,不同的调用方式,this的指向是不同的。

  1. 调用一个方法或者函数的时候,如果是直接调用 方法名() 则这函数或方法中的this指代的就是 window
  2. 调用一个方法或者函数的时候,使用的是 对象.方法名() 则这个函数或方法中的this指代的就是 这个对象
  3. 当做构造方法来用,使用 new 的时候,则 this指代的是将要创建的对象
  4. 使用call或applay改变this的指向、bind(es6新增)

最后补充一下this绑定丢失的问题:

回调函数的this绑定丢失问题: this会绑定到window显示绑定的丢失问题:显示绑定到undefined和null上面的时候, 会变为默认绑定
    var obj = {        name : "李四",        foo : function (){            console.log(this); // window{...}        }      };    obj.foo.call(undefined);