学习JavaScript有段时间了,一直对this的理解模棱两可,查看了很多资料弄清楚了一起分享下
this的调用根据调用的上下文来确定,总结大概分为4种方式
1.函数方式调用
window.a='window'
function pay(){
console.log(this.a)
}
pay()//window
在JavaScript中函数直接调用时,也是this的默认调用方式,this指向全局对象
再看一看回调函数的例子
window.a='window'
function pay(){
function callback(){
console.log(this.a)
}
callback()
}
pay()//window
在JavaScript中回调函数一直是一个比较烦人的问题,如果不对this做些处理this,不会指向函数对象本身
通常会定义var self=this,使用self来修正this的指向
2.通过对象的方式掉用
window.a='window'
var obj={
a:'obj',
getA:function(){
console.log(this.a)
}
}
var getA=obj.getA;
obj.getA()//obj
getA()//window
看上去2个调用方法应该都会返回obj,但第二个函数的this指向了全局对象
细想起来getA=obj.getA这种把obj中getA()的引用赋值给了getA,其实本质上还是函数的调用
3.通过构造函数调用
window.name='window';
var Student=function(name){
this.name=name;
}
var leo=new Student('leo');
console.log(leo.name)//leo
通过构造函数直接调用this直接指向对象本身,但也要注意一个问题构造函数内如果返回一个对象,this会指向返回的对象
window.name='window';
var Student=function(name){
this.name=name;
return {
name:'joy'
}
}
var leo=new Student('leo');
console.log(leo.name)//joy
4.利用apply,call,bind实现this的硬绑定
开发中经常会用到这几个函数,会改变调用函数的this指向
比如
window.a='window'
var obj1={
a:'haha'
}
var obj2={
a:'heihei'
}
var obj3={
a:'welcome'
}
function say(){
console.log(this.a)
}
say();//window
say.call(obj1);//haha
say.apply(obj2);//heihei
var say3=say.bind(obj3);
say3()//welcome
这3个函数传入的第一个参数是一样的,给调用函数提供一个this指向,可以随意修改函数的this指向
可以用来借用别的函数的方法
//第一个例子
var A=function(name){
this.name=name
this.getName=function(){
return this.name
}
}
var B=function(){
A.apply(this,arguments)
}
var b=new B('leo');
console.log(b.getName())//leo
//第二个例子
var obj={}
Array.prototype.push.apply(obj,[1,2])
console.log(obj)//{0:1,1:2,length:2}
利用apply可以直接使用其他函数定义的方法
再来说一说这3个函数的区别
apply与call使用方法类似,关键在于第二个参数apply需要传入一个数组,而call需要把参数一个一个依次传入
bind与这两个方法的区别在于apply和call都会立即执行函数而bind(this)是给函数绑定this返回一个新的函数
目的是改造函数
5.this的丢失问题
把函数当做另一个函数的参数时都是引用函数的问题
window.a='window';
function callback(){
var a='leo';
console.log(this.a)
}
function pay(callback){
callback()
}
pay(callback)//window