this的使用总结

this 是在函数执行的过程中自动创建的一个指向一个对象的内部指针。确切的说,this并不是一个对象,而是指向一个已经存在的对象的指针,也可以认为是this就是存储了某个对象的地址。
this的指向不是固定的,会根据调用的不同,而指向不同的地方。
this的绑定可以分为四种:

默认绑定

当我们直接调用一个函数的时候,那么这个函数中的this就是默认绑定,默认绑定在window中

function foo(){
  console.log(this)
}
foo();//直接调用,默认绑定

注意这种情况在严格模式下("use strict"),默认绑定在undefined

隐式绑定

使用 对象.(点)方法(),就是隐式绑定,方法中的this绑定在前面的对象中

var name = "李四";
var p = {
  name : “abc”,
  foo : function(){
        console.log(this.name)
  }
}
var f = p.foo;//this现在指向window
f();//李四
new绑定

this指代将来创建出来的那个对象

function Person(){
   this.name = "a"
   console.log(this.name)
}
var p = new Person();//输出a
Person//输出a
显示绑定

call、apply、ES6新增的bind
call、apply是只有在这次调用的时候this显示绑定
bind也是显示绑定,调用函数的bind方法,会返回一个新的绑定后的函数
显示绑定bind > 显示绑定call、apply > 隐式和默认绑定

function foo(){
    console.log(this)
}
var p = {
}
foo.call(p);//把this的指向指向了p
function foo(){
    console.log(this.age)
}
var p = {
    age : 20
}
foo.call(p)//20
function foo(){
    this.age = 30;//在这里把this.age改成了30
    console.log(this.age);
}
var p = {
    age : 20
}
foo.call(p)//30
console.log(p.age);//30
var p1 = {
    age : 10,
    foo : function(){
        console.log(this.age);
    }
}
var p2 = {
    age : 20,
    foo : function(){
         console.log(this.age);
    }
}
p1.foo.call(p2);//20  显示绑定了p2
var p = {
  age:10,
  foo:function(){
      console.log(this.age);
  }
}
var age = 100;
var f = p.foo.bind(p);
f();//10 bind绑定了this永远指向p了
var p = {
  age:10,
  foo:function(){
      console.log(this.age);
  }
}
var f = p.foo.bind(p);
var p1 = {
   age : 20,
   foo : f
}
p1.foo.call(p1);//10  还是bind的绑定
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容