this指针总结

最新推荐文章于 2021-03-31 12:22:19 发布

原创最新推荐文章于 2021-03-31 12:22:19 发布 · 700 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#this

前端同时被 2 个专栏收录

52 篇文章

订阅专栏

javascript

21 篇文章

订阅专栏

本文详细介绍了JavaScript中this指针的绑定规则，包括new绑定、call/bind硬绑定、隐式绑定和默认绑定等，并通过实例展示了回调函数、setTimeout/setinterval函数中this的变化及如何避免常见问题。

文章只是简单列举了方式和一些会改变this指针的情况

1.探寻之，必昭然若揭

new绑定 this–>新创建的对象
var bar = new foo()
call/bind 硬绑定 this–>指定的对象
var bar = foo.call(obj2)
隐式绑定 this–>上下文对象
var bar = obj1.foo()
默认绑定 this–>全局对象window

四种情况也是按照优先级排列的

2.实践之，定了然于胸

2.1 回掉函数会改变this指针

绑定
javascript dbTools.queryUsrDB2Datas(function(){ usrResDiv.fyDiv.apply(usrResDiv,arguments); });

2.2 setTimeout/setinterval函数会改变this指针(例子见第三部分)

2.3 绑定的例外

foo.call(null) 使用null或者undefined,忽略传入对象的this,实际运用的是默认绑定，这也是这样方法的弊端，this指向window。
修改var DMZ = Object.create(null); foo.apply(DMZ,[2,3]);
间接引用

function foo(){
        console.log(this.a);
    }
    var a = 2;
    var o = {a:3,foo:foo};
    var p = {a:4};

    o.foo();//3
    (p.foo = o.foo)(); //2 this-->window
    p.foo();  //4

p.foo = o.foo返回值是目标函数的引用，因此调用位置是foo(),而不是p.foo(),o.foo();

3.避免之，需谨小事微

除了第一部分的方法外，还有一些常用的方法。

3.1 ES5中我们经常会使用`self = this`，如：

function foo(){
    var self = this;
    setTimeout(function(){
        console.log(self.a);
    },100);
}

var obj = {
    a:2;
}
foo.call(obj);//2

3.2 ES6中的箭头函数(this词法)

function foo(){
    setTimeout => {
        console.log(this.a);//this继承来自foo()
    },100);
}

var obj = {
    a:2;
}
foo.call(obj);//2