JavaScript中函数上下文this指向问题#面试常见读代码

this 总是指向执行时的当前对象。JavaScript 的 this 总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。也就是说 this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

除了使用 with 和 eval 的情况，常用的可分为以下几种：

作为对象的方法调用
作为普通函数调用
构造器调用
Function.prototype.call 或 Function.prototype.apply调用

1、作为对象的方法调用

对象的方法被调用时，this 指向该对象。

var obj = {a: 1,getA() {alert(this === obj); // 输出:true alert(this.a); // 输出: 1}
};
obj.getA();

2、作为普通函数调用

当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的 this 总是指向全局对象。

这里注意对象的方法被单独拷贝出来后执行，那么原来的this会丢失，变成指向全局对象。

//在浏览器的JavaScript 里，这个全局对象是window 对象。
window.name = 'globalName';
var getName = function(){return this.name;
};
console.log( getName() ); // 输出：globalName//或者：
window.name = 'globalName';
var myObject = {name: 'sven',getName: function(){return this.name;}
};
var getName = myObject.getName;
console.log( getName() ); // globalName

3、构造器调用

通常情况下，构造器里的 this 就指向返回的这个对象;

如果构造器不显式地返回任何数据，或者是返回一个非对象类型的数据，this指向返回的这个对象
如果构造器显式地返回了一个对象，则实例化的结果会返回这个对象，而不是this;

//构造器里的this 就指向返回的这个对象，见如下代码：
var MyClass = function(){this.name = 'sven';
};
var obj = new MyClass();
alert ( obj.name ); // 输出：sven
var MyClass = function(){this.name = 'sven';return { // 显式地返回一个对象name: 'anne'}
};
var obj = new MyClass();
alert ( obj.name ); // 输出：anne
var MyClass = function(){this.name = 'sven'return 'anne'; // 返回string 类型
};
var obj = new MyClass();
alert ( obj.name ); // 输出：sven

4、call 或 apply 调用

apply和call可以动态地改变传入函数的 this

var obj1 = {name: 'sven',getName: function(){return this.name;}
};
var obj2 = {name: 'anne'
};
console.log( obj1.getName() ); // 输出: sven
console.log( obj1.getName.call( obj2 ) ); // 输出：anne

除此之外，this在箭头函数中的指向与上述不同

箭头函数的this取值，规则非常简单，因为this在箭头函数中，可以看做一个普通变量。箭头函数没有自己的this值，箭头函数中所使用的this都是来自函数作用域链，它的取值遵循普通变量一样的规则，在函数作用域链中一层一层往上找。

有了箭头函数，我们只要遵守下面的规则，this的问题基本上就可以迎刃而解了

对于需要使用object.method()方式调用的函数，使用普通函数定义，不需要使用箭头函数。对象方法中所使用的this值有确定的含义，指的就是object本身。
其他情况下，全部使用箭头函数。

那么，为什么要使用箭头函数呢？

当我们需要在对象方法中嵌套一个内层函数时，this就会给我们带来实际的困扰了

JavaScript中函数上下文this指向问题#面试常见读代码相关推荐

JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
JavaScript中函数作为另一个函数的参数的时候它存在于哪个作用域
一直对函数作为参数被传递进另外一个函数理解的不是很清除.先看下这段代码吧: function test(fn){var bar = 1;fn(); } var bar = 99; test(funct ...
JavaScript中函数的length属性
JavaScript中函数的length属性 length是函数的一个属性函数的length是js函数对象的一个属性,函数的length代表形参的个数(即有多少必传参数) 形参的数量不包括不包括剩余 ...
JavaScript中函数里的arguments属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
JavaScript中函数的三种定义方法
JavaScript中函数定义的三种方法. 函数的三种定义方法分别是:函数定义语句.函数直接量表达式和Function()构造函数的方法.下面依次介绍这几种方法具体怎么实现. 1. 函数定义语句 // ...
【原理】理解JavaScript中的上下文-对象字面量
⭐️ 本文首发自前端修罗场(点击即可加入),一个专注 Web 技术.答疑解惑.面试辅导.职业发展的社区.现在加入,即可参与打卡挑战,和一群人一起努力.挑战成功即可获取一次免费的模拟面试机会,进而评估 ...
JavaScript中函数四种调用模式
目录 JS中函数的四种调用模式函数调用模式方法调用模式构造器调用模式上下文调用模式 JS中函数的四种调用模式在函数的调用模式中感觉最大的区别就是: this指向函数调用模式即通过函数名直 ...
参数中_理解JavaScript中函数的参数
1,arguments JavaScript的函数的参数(arguments)在函数体的内部表现为一个类似数组的对象.就是它拥有数组的方法,却不是Array的实例. 例1 我们直接打印出argumen ...
JavaScript中函数
函数什么是函数把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用函数的作用就是封装一段代码,将来可以重复使用函数的定义函数 ...

JavaScript中函数上下文this指向问题#面试常见读代码

JavaScript中函数上下文this指向问题#面试常见读代码相关推荐

最新文章

热门文章