1、 this 是什么?
this 用一句通俗的话讲就是 , 谁调用我 ,this 就是谁,谁最后调用我 ,this 就是谁,用两个例子讲诉
var a = 10;
var obj = {
a:20,
fun:function(){
console.log(this.a);
},
};
obj.fun();//20
obj.fun() 说明是 obj 调用了 fun() 方法,那么 this 就指向 obj ,obj.a 不正是等于 20 么,再看下面个例子
var a = 10;
var obj = {
a:20,
b:{
fun:function(){
console.log(this.a);
}
},
};
obj.b.fun();//undefined
obj.b.fun() 中,应该理解为 obj 中的 b 调用了 fun() 方法 , 所以 b 才是调用者, b.a 并不存在,所以返回 undefined
var fun = function(){
console.log(this);
};
fun();
上面段代码中, 打印的 this 是谁呢?那就看谁调用了 fun() 方法,fun() 写在全局中,就相当于 window.fun(); 所以打印的结果为 window{} 对象
2、函数中的 this
普通函数的 this 与构造函数中的 this 的指向有什么区别呢?
function Stu(name){
this.name = name;
console.log(this.name);
fun:function(){
console.log(this);
}
}
var stu1 = new Stu('tom');//tom
这里的 this 不就是通过 new 创建的一个 stu1 对象,this 就指向 stu1,
function fun(){
console.log(this);
}
fun();//window
+function(){
console.log(this)
}();//window
3、构造函数的实例化原理
function Person(){
this.name = 'tom';
}
var per = new Person();
如果直接通过构造函数得到的肯定是一个包含name属性的对象
function Person(){
this.name = 'tom';
return 1;//这里返回 1 b并不会影响 per 的结果
}
var per = new Person();
console.log(per);
我们发现,我们给了返回值,得到的 per 并不是 1 ,任然是一个正确的对象,除了数字 1 ,我们还有字符串,布尔值,undefined,null以及复杂数据类型,我们逐一尝试,得到以下结果
- 返回值为基本数据类型的时候,得到的都是新创建的对象
- 返回值为 this 以及没有返回值的时候,得到的任然是新创建的对象
- 当返回值为 数组、对象、函数的时候,得到的就是当前返回值中的复杂数据类型
既然已经明白 this 是什么,那么我们能不能改变 this 的指向呢?
4、改变 this 指向(call、apply)
1、call方法
call(改变的对象)
可以传入多个参数(
var obj = {
name:'tom',
sayHello:function(){
console.log(this.name);
}
};
var obj1 = {name:'jerry'};
obj.sayHello();//tom
obj.sayHello.call(obj1);//jerry
2、apply()方法
可以传入两个参数,第一个是要改变的对象,第二个是数组,数组中的参数按顺序被读取
var obj = {
name:'tom',
sayHello:function(){
console.log(this.name);
}
};
var obj1 = {name:'jerry'};
obj.sayHello();//tom
obj.sayHello.apply(obj1);//jerry