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
};
o
4000
bj2.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();