关于普通函数和箭头函数的this指向问题详解
作者:互联网
1. 普通函数this指向问题
this 永远指向 调用 包含 自己(this本身) 的 函数 对应的对象。
也就是说,包含 this 的函数 只在乎是谁调用了它,跟在哪里进行的函数声明没有关系。
下面就来举个例子说明:
function test(){
var a = 1;
console.log(this.a);
}
test(); //undefined 其实是 window.test()
如果函数在最外层直接运行,默认绑定的对象是 window,因为 test() 是被window对象调用的,所以这里的 this.a 对应的应该是 全局变量(或者叫window变量) 而不是test函数里的局部变量,由于 在 window 对象中没有声明 变量 a,所以输出 undefined。
下面我们对代码进行改造一下:
var a = 2; //window对象下的变量
function test(){
var a = 1;
console.log(this.a);
}
test(); // 打印结果为 2
下面再来分析一个经典的例子:
var name = 'China';
var obj = {
name : 'America',
show : function() {
console.log(this.name)
}
}
obj.show(); // America
从上述代码可以看出,包含 this 的函数是 show(),而show()函数通过对象obj调用的,所以 this.name 指向 obj 中的 name(America);
我们再来对代码进行改造:
var name = 'China';
var obj = {
name : 'America',
show : function() {
return function(){
console.log(this.name);
}
}
}
var a = obj.show();
a(); // China
这里的 obj.show() 返回的是一个匿名函数
function(){
console.log(this.name);
}
然后赋值给 变量a,等价于:
var a = function(){
console.log(this.name);
}
或
function a(){
console.log(this.name);
}
所以 最后执行的 a()== window.a(), 函数a 里面的 this.name 指向 window.name('China'),所以最终输出 China。
看到这里,相信大家对 this 已经有个比较清楚的认识了,下面给大家介绍4种 this 常用的场景。
1. 在一般函数方法中使用 this 指代全局对象
function test(){
this.x = 1;
alert(this.x);
}
test(); // 1
2. 作为对象方法调用,this 指代上级对象
function test(){
alert(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1
3. 作为构造函数调用,this 指向 new 出的对象
function test(){
this.name = 'China';
}
var t = new test();
console.log(t.name); //'China'
4. apply, call 调用
function Animal(){
this.name = 'animal';
}
function Cat(){
Animal.call(this);
}
var cat = new Cat();
console.log(cat.name);// 'animal'
以上便是普通函数中 this 全部的解答。
2. 箭头函数的this指向问题
先来个总结:
箭头函数体内的this
对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象。
下面是普通函数的列子:
var name = 'window'; // 其实是window.name = 'window'
var A = {
name: 'A',
sayHello: function(){
console.log(this.name)
}
}
A.sayHello();// 输出A
var B = {
name: 'B'
}
A.sayHello.call(B);//输出B
A.sayHello.call();//不传参数指向全局window对象,输出window.name也就是window
从上面可以看到,sayHello这个方法是定义在A对象中的,当当我们使用call方法,把其指向B对象,最后输出了B;可以得出,sayHello的this只跟使用时的对象有关。
改造一下:
var name = 'window';
var A = {
name: 'A',
sayHello: () => {
console.log(this.name)
}
}
A.sayHello();// 还是以为输出A ? 错啦,其实输出的是window
我相信在这里,大部分同学都会出错,以为sayHello是绑定在A上的,但其实它绑定在window上的,那到底是为什么呢?
一开始,我重点标注了“该函数所在的作用域指向的对象”,作用域是指函数内部,这里的箭头函数,也就是sayHello,所在的作用域其实是最外层的js环境,因为没有其他函数包裹;然后最外层的js环境指向的对象是winodw对象,所以这里的this指向的是window对象。
那如何改造成永远绑定A呢:
var name = 'window';
var A = {
name: 'A',
sayHello: function(){
var s = () => console.log(this.name)
return s//返回箭头函数s
}
}
var sayHello = A.sayHello();
sayHello();// 输出A
var B = {
name: 'B';
}
sayHello.call(B); //还是A
sayHello.call(); //还是A
OK,这样就做到了永远指向A对象了,我们再根据“该函数所在的作用域指向的对象”来分析一下:
- 该函数所在的作用域:箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。
- 作用域指向的对象:A.sayHello指向的对象是A。
所以箭头函数s 中this就是指向A啦 ~~
----------------finish-------------
最后是使用箭头函数其他几点需要注意的地方
- 不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误。 - 不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。 - 不可以使用
yield
命令,因此箭头函数不能用作 Generator 函数。
标签:function,函数,sayHello,箭头,window,详解,var,name 来源: https://www.cnblogs.com/suihung/p/16244584.html