要想学好js,那么其中那些特别令人混淆迷惑的知识点,就一定要弄清楚。this关键字就是其中让初学者比较迷惑的知识点之一,不过灵活运用this可以提升代码的性能和复用性,那么今天我就和大家一起来了解this的具体情况,
首先this作为关键字,它的作用就是引用,并且它通常只写在函数内部就是函数体内,在js中this的引用对象随着函数的使用环境变化而变化,好在具体的使用环境并不多,基本就四种。分别是普通函数、构造函数、对象属性、apply&call方法。
一、普通函数中的this
所谓普通函数,就是写在全局环境中,并且不属于构造函数、对象属性、调用过apply&call方法的任意一种情况。我们平时写的普通的方法和功能基本都是普通函数。普通函数中的this都引用window对象
//function关键字声明的普通函数
function fn1(){
console.log(this);
};
fn1();//执行结果:window{...} //函数表达式形式的普通函数
var fn2=function(){
console.log(this);
}
fn2();//执行结果:window{...}; //访问全局属性,
var x=10;
function fn3(){
console.log(this.x)
}
fn3();//执行结果 10 //普通函数中的this,和全局环境中this是一样的
var x=10;
console.log(this)//执行结果 window{...}
console.log(this.x)//执行结果 10
二、构造函数中this
构造函数与普通函数的区别就是,构造函数的目的是用来构造对象的,类似Java中的class ,构造对象的方式就是使用new 关键字 ,如何通过构造函数给对象添加属性?就是使用this关键字,所以构造函数中的this指向的是它实例化的对象
//写一个构造函数
function person(){
this.sex='female';
this.age=''20'
};
var xiaoming=new person();//js在执行到此条语句时,将this的引用指向了xiaoming
console.log(xiaoming.age),//执行结果 20 //需要注意的是 如果直接执行构造函数,而不是new 一下,那么this还是指向window
function person(){
this.sex='female';
this.age=''20';
console.log(this)
};
person();//执行结果 window{...}
三、apply方法和call方法
this这么强大,不好好利用怎么对得起js属于高级语言的行列。js提供了可以自主更改this的指向的方法。玩转高级js ,不知道apply 和call方法怎么行。apply 和call方法,是所有函数类型的原生方法,和数组的split(),push() 一样,不需要另外声明直接可以用的方法。函数调用call()、apply()方法后,this的引用为call apply 方法传进去的第一个参数
//先来一个call
var a={
c:0,
b:1
};//定义一个对象
function fn1(){
console.log(this)
};
fn1.call(a)//执行结果:{c:0,b:1} //call apply 的功能一样,唯一不同的是传给函数的参数的方式(就是第二个参数开始,第一个参数是this指向的新对象)
//apply 传数组,这个数组包含函数所需要的参数,call 直接传参数
var a={
c:0,
b:1
};//定义一个对象,用来做call和apply的第一个参数
function fn2(arg1,arg2){
console.log(this)
console.log(arg1+arg2)
};
fn2.call(a,1,1)//执行结果{c:0,b:1} 2
fn2.apply(a,[1,1]);//执行结果{c:0,b:1} 2
fn2.apply(a,1,1)//报错 //其实还有一个bind方法.bind方法和call使用方式一样,作用也一样,不一样的是实现方式,call传参结束后直接执行函数(apply也是),而bind只是更改this值和给函数传参,函数并不执行
,所以bind可以作为事件的处理函数去使用
//比如给div绑定一个click事件
div.onclick=fn.call(obj,arg1,arg2)//这样不待div点击fn就已经被执行了
div.onclick=fn.bind(obj,arg1,arg2)//这样当div被点击时才会有效
四、作为对象的属性
js中的对象概念,也值的花大篇幅去介绍,再此不做赘述,这里讨论的对象只是js特有的对象格式(用大括号包括,以键值对的形式表示属性和属性值,并且每个属性用逗号隔开),js函数也可以作为对象的属性值,这个时候作为对象属性值的函数,其内部this指向的就是这个对象
var obj={
x:1,
y:function(){
console.log(this);
console.log(this.x)
}
};
obj.y;//执行结果 {x:1,y:fn} 1 //需要注意的是,如果函数不是作为对象属性的属性值被调用,而是作为属性值赋值给其他变量,则此函数中的this不再指向该对象
var obj={
x:function(){ console.log(this) }}
var z=obj.x;//作为属性值赋值
z();//执行结果 window{...} //利用此原理,我们可以将一个函数供给两个对象使用
obj1.fn=obj2.fn=function(){
console.log(this)
}
//这样obj1,和obj2就都有一个fn属性,这个属性值是一个函数,并且这个函数中this指向的对象分别obj1 ,obj2
//大名鼎鼎的jQuery很多地方都用了这样的方式,有兴趣的同学可以看看jQuery源码
写到这了,this的用法就基本描述完了,也许this还有其他更高级更优秀的用法,那就需要各位自己去探索,总结了。总之学海无涯,需要我们一点一滴的积累,切不可急躁。