想知道JavaScript 函数中的 this 指向，就得知道我们的函数什么时候被调用。
普通函数调用分为直接调用、方法调用、new函数后调用。特殊的情况有通过bind将函数绑定到对象上再调用，还有call(),apply()调用。ES6中的箭头函数的调用。今天先分析下普通函数调用和ES6中的箭头函数调用时this的指向
普通函数调用
1.直接调用
什么是直接调用呢？直接用函数名()的方式调用函数.这时候函数内部的this对象为全局对象.在浏览器下是window对象，在在 NodeJs 中全局对象是 global
function directCall() {
alert(this===window);
}
directCall();//true
注意的是直接调用不代表是在全局环境下的调用，在任何作用域下以函数名()的方式调用函数都是直接调用
(function directCall(window){
function test(){
alert(this===window);
}
test();
})(window)
2.方法调用
方法调用——对象调用自己的方法。直接用对象.方法名()的方式调用。这时侯this指向调用该方法的对象
- 第一种形式：调用对象内部自己定义函数
let obj = {
isObj(){
alert(this===obj);
}
};
obj.isObj();//true
- 第二种方式：为定义好的对象附加一个方法
let obj = {};
obj.isObj= function(){
alert(this===obj);
};
obj.isObj();//true
- 第三种方式：跟第二种方式很相似
let obj = {};
function t() {
alert(this === obj);
}
obj.isObj = t;
obj.isObj();
注意，下面的方式会将this指向全局变量
const obj = {
test() {
console.log(this === obj);
}
};
const t = obj.test;
t(); // false
3.new 函数后调用
在ES5 中，用 new 调用一个构造函数，会创建一个新对象，而其中的 this 就指向这个新对象。这没有什么悬念，因为 new 本身就是设计来创建新对象的。
function Person(name,age){
this.name = name;
this.age = age;
}
let person = new Person("xiaoming",18);
alert("姓名"+person.name+"年龄"+person.age);//xiaoming 18
用Person函数创建一个对象实例person,此时的this指向对象person.
ES6中的箭头函数的调用
在ES6中，引入了箭头函数，那么箭头函数在调用时this指向哪里呢？其实是包含了箭头函数的外函数或函数表达式中的this.
const obj = {
test(){
const arrayFunction = ()=>{
alert(this===obj);
}
arrayFunction();
}
};
obj.test();//true
上述代码对象obj调用自己的方法test(),属于方法调用,所以this指向该对象。而arrayFunction函数this的指向即为外层函数test()的this,所以 this===obj 为true
const obj = {
test(){
return ()=>{
console.log(this===obj);
}
}
};
const a = obj.test();
a();//true
这段代码如果用ES5语法来写，则需要把this赋给一个变量，如下：
const obj = {
test(){
var self = this;//把this赋给变量self
return function(){
console.log(this===obj);
}
}
};
const a = obj.test();
a();
ES5需要通过像 self 这样的局部变量来临时引用 this 给闭包函数使用,但箭头函数让大家在使用闭包的时候不需要太纠结 this
不管在什么情况下使用箭头函数，它本身不用再给this赋值，它用的是直接外层函数(即包含它的最近的一层函数或函数表达式)绑定的 this。
好了，关于bind(),call(),apply()后续更新！
每天都努力一点点
谢谢你看完
