JS中this的几种使用方式

this的使用总结

this的绑定一般有四种情况:

默认绑定(非严格情况下指向的是window,严格情况下指向undefined)

隐式绑定,对象.方法(),this指向前面那个对象

new绑定,this绑定在新创建的那个对象上

显示绑定,call和apply 都是仅一次调用使用了显示绑定,对原函数没影响

call与apply主要的区别是:call的参数是一个一个传递,apply是把参数封装到数组中传递

bind: 固定绑定 es6新增

• 调用函数对象的bind方法, 返回一个固定this绑定的新的函数

• 对原来的函数没有影响

  绑定的优先级别 bind > call, apply > new > 隐式

<script>
  //对象的绑定
  var obj = {
    name: "a"
}
function foo(){
    console.log(this.name);
}
var f = foo.bind(obj);
​
var obj2 = {
    name: "b",
    foo : f
};
obj2.foo()    //a    固定绑定的优先级更高
​
​
​
​
var obj = {
    name : "a",
    foo : function (){
        this.age = 20;
        console.log(this);   //foo   3
    }
}
console.log(obj.foo());  //obj对象     1
var foo = obj.foo;      //重新定义了foo,默认绑定this指向window
console.log(foo());     //window       2
var obj1 = new foo()   
console.log(obj1);      //foo    4
​
/*function foo(){
    this.name = "abc"
    console.log(this);
}
var obj = new foo();
console.log(obj);    //foo{name = "abc"}  foo{name = "abc"}*/
​
​
var obj1 = {
    name: "李四",
    foo: function (){
        console.log(this.name);
    }
}
var obj2 = {
    name: "张三",
    foo: obj1.foo
}
​
obj2.foo()     //张三  隐式绑定,调用obj2的name
​
​
​
​
​
​
​
​
// "use strict"
// function foo(){
//     console.log(this);
// }
// foo()
 </script

显示绑定到undefined或null上,会使用默认绑定

var obj = {
    name : "李四",
    foo : function (){
        console.log(this);
    }
}
​
obj.foo.call(undefined);   //window
​
//处理this在回调函数中容易犯的错误例子
var name = "zs"
var obj = {
    name : "李四",
   /!* show : function (){
        var self = this;
        setInterval(function (){
            console.log(self.name);
        }, 1000)
    }*!/
    show : function (){
        setInterval(function (){
            console.log(this.name);
        }.bind(this), 1000)
    }
}
obj.show();