JavaScript一般函数中 "this" 的判断

最新推荐文章于 2023-02-09 12:54:59 发布

置顶 u011277123

最新推荐文章于 2023-02-09 12:54:59 发布

阅读量314

点赞数

科技优家 2016-12-22 15:34

JavaScript中this值很让人头疼, 今天总结下几个方法快速判断this的指定.

先说结论(传统语法):

函数在new(new绑定)中调用: this绑定的是新创建的对象:
```
var bar = new foo; //this 指向bar.
```
函数通过call / apply(显式绑定) 或者硬绑定调用, this指向括号内的对象:
```
 var bar = foo.call(obj2); // this 指向 obj2
```
函数在某个上下文对象中调用(隐式绑定), this绑定该上下文对象:
```
 var bar = obj1.foo; //this 绑定 obj1
```
如果上述三种都不是, 使用默认绑定. 在严格模式下绑定到undefined, 否则绑定到全局对象:
```
 var bar = foo; //非严格模式下,this指向全局对象;
```

重点: ES6中 this词法

ES6中引入了箭头函数, 解决了this的复杂性.
箭头函数不是使用function关键字定义的, 而是使用"=>"操作符定义的.
箭头函数不使用上文的四种标准规则, 而是根据外层(函数或全局)的作用域来决定this.

function foo{
    //返回一个箭头函数
    return (a) => {
        //this继承自 foo
        console.log(this.a);
    };
}

var obj1 = {
    a:2
};

var obj2 = {
    a:3
};

var bar = foo.call( obj1 );
bar.call( obj2 );    //2, 不是3

foo内部创建的箭头函数会捕获调用foo时的this.

由于foo的this被绑定到obj1, bar(引用箭头函数) 的this也会绑定到 obj1;

箭头函数的绑定无法被修改(new也不行).

箭头函数最常用于回调函数中, 例如事件处理器或定时器:

    function foo{
        setTimeout => {
 //这里的this 在词法上继承自foo
 console.log( this.a );
        }, 100 );
    };
    
    foo.call( obj ); //2

    function foo{   //等价于上述代码
        var self = this;    //ES6之前的模式 , self绑定外层函数.
        setTimeout( function{
 console.log( self.a ); //此时self的指向已经固定.
        }, 100 );
    }
    var obj = {
        a = 2;
    };
    foo.call(obj); //2