this关键字的使用方法
1、方法中的this,指向调用方法的对象
2、全局环境下指向全局对象
3、全局函数中的this,指向全局对象
4、内部函数中的this,指向全局对象
5、事件中的this,指向触发事件的DOM对象
6、构造函数中的this,指向new创建的对象【面试题new的作用】
7、箭头函数中的this,指向定义函数上下文的this。
8、使用闭包,var获取dom的索引。
一、普通函数中的this
function Person(color) {
console.log(this)
this.color = color;
this.getColor = function() {
console.log(this)
return this.color;
};
this.setColor = function(color) {
console.log(this)
this.color = color;
};
}
Person("red"); //this是谁? window
var p = new Person("yello"); //this是谁? p
p.getColor(); //this是谁? p
var obj = {};
p.setColor.call(obj, "black"); //this是谁? obj
//setColor作为obj对象的方法调用
var test = p.setColor;
test(); //this是谁? window
function fun1() {
function fun2() {
console.log(this);
}
fun2(); //this是谁? window
}
fun1();
-
this是什么?
* 一个关键字, 一个内置的引用变量
* 在函数中都可以直接使用this
* this代表调用函数的当前对象
* 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的 -
如何确定this的值?
* test() window
* obj.test() obj
* new test() 新建的对象
* test.call(obj) obj前置知识: * 本质上任何函数在执行时都是通过某个对象调用的
//创建一个name变量
var name = "全局";
//创建一个fun()函数
function fun(){
console.log(this.name);
}
//创建两个对象
var obj = {
name:"孙悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
//我们希望调用obj.sayName()时可以输出obj的名字
obj.sayName();//孙悟空
obj2.sayName();//沙和尚
在函数中直接使用
//##在函数中直接使用
function get (content) {
console.log(content)
}
get('你好')
get.call(window, '你好window')//在函数中直接使用,第一个参数是window对象
函数作为对象的方法被调用(谁调用我我就指向谁)
var person = {
name: '彤彤',
run: function(time) {
console.log(`${this.name} 在跑步 最多${time}min就不行了`)
},
}
//下面两种方式等效
person.run(30)//函数作为对象的方法被调用(谁调用我我就指向谁),run是person对象的方法
person.run.call(person,30)
阿里面试题
var name = 222
var a = {
name: 111,
say: function() {
console.log(this.name)
}
}
var fun = a.say
fun() //222 fun.call(window)
a.say() //111 a.say.call(a)
var b = {
name: 333,
say: function(fun) {
fun()
},
}
b.say(a.say) //222 say.call(window)
b.say = a.say
b.say() //333 b.say.call(b)
二、箭头函数中的this
●箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。
●箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。 正是因为它没有this,所以也就不能用作构造函数。
●箭头函数中的this是在定义函数的时候绑定
:
因为箭头函数没有this
:
指向最近的外部函数的this
:
外面没有函数就指向全局咯
var a = 1;
var obj = {
a: 2,
say: () => {
console.log(this.a);
},
}
obj.say();//1
所谓的定义时候绑定,就是this是继承自父执行 上下文中的this,比如这里的箭头函数中的this.a,箭头函数本身与say平级以key:value的形式,也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.a实际上表示的是window.x,因此输出的是1。
<script type="text/javascript">
let birth: 1991;
var obj = {
birth: 1990,
getAge: function() {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
console.log(obj.getAge())//31
</script>
例子中箭头函数本身是在getAge方法中定义的,因此, getAge方法的父执行上下文是obj,因此这里的this指向则为obj对象