首先说明下,本身的知识储备也不是很强,本文只是为了记录学习我理解this的一些观点,如果有错误,欢迎指正。
首先我们要搞懂this的调用方式:
- 普通函数调用(默认绑定全局变量window)
- 方法调用(方法调用时拥有一个上下文对象)
- 构造函数调用(new一个新对象来绑定)
- apply/call/bind(显示的绑定this)
- 箭头函数
普通函数调用(默认绑定全局变量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的一些理解,上面的这些例子网友也写了很多,正是看了这么多,让我收获颇丰,所以记录下自己这几天说学到心得,自己理解的才是自己的,不然看在多还是不懂,也是白看。
越努力,越幸运!!! 加油