对象方法概念

对象常常可以用来表示真实世界中的实体，在真实世界中对实体的操作，对应 JavaScript 中的 对象方法（Action），由属性中的函数来表示。

🌰 例子：

• 创建对象后，给对象指定函数：

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

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

也可以首先声明函数再添加到对象：

function sayHi() {
  alert("Hello!");
}

user.sayHi = sayHi;

对象方法声明简写

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

// 简写为：
let user = {
  sayHi() { 
    alert("Hello");
  }
};

但其实两种写法，在对象继承方面有一些细微的差别。在几乎所有的情况下，较短的语法是首选的。

方法的链式调用

🌰 例子：在对象中的方法，每次都返回对象本身即可实现：

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
};

ladder
  .up()
  .up()
  .down()
  .showStep()
  .down()
  .showStep(); 

⭐️ 关于方法中的 this 问题

通常对象方法需要访问对象中存储的信息才能完成其工作。为了访问该对象，方法中可以使用 this 关键字。 this 的值就是在点之前的这个对象，即调用该方法的对象。

🌰 例子：

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

  sayHi() {
    // "this" 指的是“当前的对象”
    alert(this.name);
  }

};

this 只在调用那一刻才重要：

例子：

function makeUser() {
  return {
    name: "John",
    ref: this
  };
}

这里 makeUser() 中的 this 的值是 undefined ，因为它是被作为函数调用的，而不是通过点符号被作为方法调用。

this 的值是对于整个函数的，代码段和对象字面量对它都没有影响。所以 ref: this 实际上取的是当前函数的 this 。

相当于：

function makeUser(){
  return this
}

只有写成才正确：

function makeUser() {
  return {
    name: "John",
    ref() {
      return this;
    }
  };
}

let user = makeUser();
alert( user.ref().name ); 

this 不受限制

在 JavaScript 中， this 关键字与其他大多数编程语言中的不同。JavaScript 中的 this 可以用于任何函数，即使它不是对象的方法。

• this 的值是在代码运行时计算出来的，它取决于代码上下文。遵循谁调用谁是 this 的原则，例如：

  let user = { name: "John" };
  let admin = { name: "Admin" };
  
  function sayHi() {
    alert( this.name );
  }
  
  // 在两个对象中使用相同的函数
  user.f = sayHi;
  admin.f = sayHi;
  
  // 这两个调用有不同的 this 值
  // 函数内部的 "this" 是“点符号前面”的那个对象
  user.f(); // John（this == user）
  admin.f(); // Admin（this == admin）
  admin['f']();  // Admin
  

  使用点符号还是方括号访问对象方法，不影响 this 的指向。

• 在没有对象的情况下调用： this == undefined 。例如：

  function sayHi() {
    alert(this);
  }
  
  sayHi();
  

在严格模式下 this 的值为 undefined ，如果尝试访问则会报错。

非严格模式下， this 是 全局对象（浏览器中的 window 对象）（JavaSript 历史行为，）

** 通常如果一个函数内部有 this ，一般它是在对象上下文环境调用的。** 而不应该是 undefiend 。

箭头函数的 this

箭头函数没有自己的 this 。如果箭头函数中引用 this ， this 值取决于外部「正常的」函数。

🌰 例子：

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

箭头函数的 this 特性帮助我们在不想要一个独立的 this ，反而要从外部的上下文中获取时很有用。