首先说明下,本身的知识储备也不是很强,本文只是为了记录学习我理解this的一些观点,如果有错误,欢迎指正。

首先我们要搞懂this的调用方式:

  1. 普通函数调用(默认绑定全局变量window)
  2. 方法调用(方法调用时拥有一个上下文对象)
  3. 构造函数调用(new一个新对象来绑定)
  4. apply/call/bind(显示的绑定this)
  5. 箭头函数

普通函数调用(默认绑定全局变量window)

function p(){ console.log(this.user); console.log(this); } var user = "袁杰"; p(); // 袁杰 window

方法调用

var obj = { user: "袁杰", p: function(){ console.log(this.user); console.log(this); } } var user = "这个不关我事啊"; obj.p(); // 袁杰 返回obj的内容

构造函数调用

function Person(name){ this.user = name; console.log(this); // 输出 Person {user: "袁杰"} } var p = new Person("袁杰"); console.log(p.user); // 袁杰 //这个是new操作符(实例化对象)的内部过程 function person(name){ var o={}; o.__proto__=Person.prototype; //原型继承 Person.call(o,name); return o; } var personB=person("袁杰"); console.log(personB.name); // 输出 袁杰

apply/call/bind(显示的绑定this)
我们可以手动的绑定到某个对象

function p(){ console.log(this.name); } var obj = { name: "袁杰" } //用call来绑定 p.call(obj, null); //用apply来绑定 p.apply(obj, null); //用bind来绑定,这和上面两个有一点区别,因为它会返回一个方法,要手动调用才行 p.bind(obj) //这样子会返回一个方法 p.bind(obj)() //要手动调用下才会输出 袁杰

es6的箭头函数

this始终指向外部对象,因为箭头函数本身没有this,因此它自身不能进行new、call, apply, bind等这些操作来改变this。

function Person(){ this.name = "袁杰"; setTimeout(()=>{ console.log(this); //始终指向Person的实例 console.log(this.name); //袁杰 }) } new Person();

以上是我对this的一些理解,上面的这些例子网友也写了很多,正是看了这么多,让我收获颇丰,所以记录下自己这几天说学到心得,自己理解的才是自己的,不然看在多还是不懂,也是白看。
越努力,越幸运!!! 加油