JavaScript学习笔记 ------ this指向和箭头函数的作用

一般的三种情况的this指向

 第一种： 没有创建对象，谁（对象）调用的方法中的this指向谁

function fun(){
console.log(this  === window);
}
//this == window  (仅限于浏览器中运行，使用nodejs运行则不同)
fun(); //true

 第二种：通过构造函数创建对象，this指向该对象

let name = "张三";

function Person( name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;
this.getName = function(){
console.log("name:" + this.name);
//console.log("name:" + name);  结果为：张三
};
this.getAge = function(){......}
this.getSex = function(){......}
}

let xm = new Person("小明", 12, 男);

xm.getName();
//输出结果为：小明
//---其实和第一种一样，这里是通过xm这个对象掉用的name，所以name指向xm这个对象---

 第三中：直接创建对象，this指向该对象

let color = "black";

let cat = {
color : "white",
age : 3
getName : function(){
console.log(this.color);
//console.log(color)  输出为：black
}
}

//结果为： white
//和第二中情况是一样的概念
cat.getName();

以上三种情况都是是一种概念，就是哪个对象调用的方法，方法中的this就指向哪个对象，掉对象自身的属性和方法必须通过他this掉用，否者会根据作用域来寻找变量

箭头函数

 使用箭头函数

function Person(){
let that = this;
this.mSet = function(){
setInterval(() => {
console.log(this === window);  //false
//console.log(this === that);  //true
}, 2000)
}
}

let xm = new Person();

 不使用箭头函数

function Person(){
let that = this;
this.mSet = function(){
setInterval( function() {
console.log(this === window);  //true
//console.log(this === that);  //false
}, 2000)
}
}

let xm = new Person();

可以理解为：使用箭头函数不会绑定this（不会谁掉用this就指向谁），而是指向当前对象

- 学习笔记，仅供参考