Javascript学习---对象方法、this关键字

添加对象方法

方法也是对象的属性，我们可以创建一个函数并将它关联到对象中，如下：

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

当然，我们也可以先声明函数再赋值，例如：

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
};

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

简写方式

如果键值对的声明方式比较繁琐，javascript提供了简写的语法，例如：

let user = {
  sayHi: function() {
    alert("Hello");
  }
};

// method shorthand looks better, right?
let user = {
  sayHi() { // same as "sayHi: function()"
    alert("Hello");
  }
};

this关键字

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(this.name);
  }

};

user.sayHi(); // John

javascript中this关键字指向调用该方法的对象，也就是点号"."前的对象。如果只是声明一个函数并且函数体内使用this，调用的时候分为两种情况：第一种是在strict mode下，会报undefined；第二种是在non-strict node下，this会绑定浏览器的window对象（默认全局对象）。

内部：引用类型

看下面一个栗子：

let user = {
  name: "John",
  hi() { alert(this.name); }
}

// split getting and calling the method in two lines
let hi = user.hi;
hi(); // Error, because this is undefined

user.hi();  //work!

javascript在调用方法user.hi()时，通过user.hi返回一个引用类型，引用类型调用圆括号()获得对象方法的信息并绑定this所指的对象。如果像上述例子将user.hi赋值到hi变量中，此时就会丢失该引用类型，导致下边的hi()丢失this。所以在调用含有this关键字的方法时，应该采用 obj.method() 或者obj[method]()语法格式。

箭头函数没有this

例子：

let user = {
  firstName: "Ilya",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Ilya

箭头函数的this取决于外部环境，例子中arrow()是取决于sayHi()方法，而sayHi()的this来自user对象。