在众多编程语言中,this指向问题可谓是让很多学习语言的人苦不堪言,就拿Javascript来说,this一会儿指代window,而有时却指向的是另一个的对象,其实只需要记住一句话,this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。
1.作为方法调用
var obj1 ={
name : pchess,
age : 18,
fn : function (){
console.log(this)
}
}
obj1.fn()
输出结果为:
此处的fn为obj1的一个方法,obj1.fn() 则为调用了obj1自己的方法,所以this指向的是自己,所以打印的是obj1
2.作为对象调用
function obj2() {
var height = 20;
console.log(this.height);
console.log(this);
}
obj2()
输出结果为:
此处的this.height的值为undefined , this的值为window, 但是函数中height的值明明是20,为什么却没有打印出来,这是因为在此处调用this的实际是 window 这个对象 ,而不是obj2这个对象, 如下图:
function obj2() {
var height = 20;
console.log(this.height);
console.log(this);
}
window.obj2()
3.构造函数调用【较为抽象】
function obj3(){
this.txt = "好好学习,天天向上" //此时的this指向obj3
}
var fn = new obj3();
console.log(fn.txt) // 此时的this已经重新指向一个新对象fn
输出结果为:
使用new调用的函数,this将会被绑定到新构造的对象中,new关键字会创建一个空的对象,然后会自行调用apply方法,将this指向这个空对象,这样原先this指向的obj3将会被fn所代替
最后说一下我的记忆方法,就是 谁在 . 前面,就是谁调用,也就是this指向谁,是不是感觉很简单,来试试下面的测试题,大家可以自行测试一下
//例题一
k = "123";
function obj4(){
var k = "456"
console.log(this.k)
}
var fn1 = {
k : "789",
fn : obj4
}
var fn2 = {
k : "JQK",
fn : obj4
}
fn1.fn()
fn2.fn()
//切记,this被谁调用,this就指向谁
//最后的打印结果是多少呢??
//例题二
var obj5 = {
height : 20,
fun : function (){
console.log(this.height)
}
}
var obj6 = {
height : 10,
fun : obj5.fun
}
obj6.fun()
//输出结果是多少呢?
//例题三
var obj7 = {
a:10,
b:{
a:20,
fn:function(){
console.log(this.a);
console.log(this);
}
}
}
var c = obj7.b.fn;
c();
更多学习资料请添加公众号“码上学习鸭”